Text rendering cross browser

hey there,

I have a div (Content) which has a specified width, nested in another div (#wrapper), also with specified width. #wrapper has overflow:hidden, and clicking a button will move Content up using jQuery’s animate function, in order to reveal the bottom half of Content.

However different browsers will render the text differently and so the exact amount by which Content is to be moved changes.

I there any way to rectify this problem using css, or should I look into new ways of solving this issue?

Many thanks in advance,

By “text differently” what exactly do you mean? Got a live link to look at so we can see the issue more clearly?

Assuming you have taken care of padding,margin, line-height and font-size issues there shouldn’t be that much difference between browsers.

There will be some difference between systems obviously as mac text usually renders a little bit wider but if you let your pages breathe a little then most times things are pretty close that you wouldn’t notice anything unless you put them side by side and compare. (Something it seems that only clients and web developers do. Visitors don’t do this :))