Absolute Positioning Differing Between Browsers

Question

I have noticed that my three absolutely positioned divs with text inside are positioned one way in internet explorer and firefox and slightly different in chrome and safari. What is the reason and solution for this?

They are positioned like this

 style="position: absolute; left: 100px; top: 270px; width: 499px;"

and are inside a relatively positioned element.

The page with the problem can be found here. The issue is with the three text groups on the left next to the number images.

Answer 1

It looks like there is some problem with the font sizes being rendered in Chrome and FF. The text is not aligned with the numbers because in chrome and IE8 the h1 content comes in two lines where as in FF it is in single line. And i am no expert to say why this is happening.

To fix this try giving giving a smaller font size to the h1, for eg:

<h1 style="position:relative;top:-15px; font-size:30px; line-height:34px;">How to Make Your First Website</h1>

I suggest you to avoid inline styling in your html, instead write the styles in your CSS because it makes easy for you to change the styles