Margin left is not correct when using absolute positioning

[trivektor]

Hi,

I have a layout here http://ucsaa.com/utvsa/main.php It works fine in Firefox but in IE, the "What's new" and "Welcome" parts are displayed incorrectly. Their margin-left seem to have been so much exaggerated. Can anyone pls help me fix this? Thanks.

[Centauri]

When absolutely positioning something, you should always specify both x and y coordinates, otherwise the browsers have to guess the position and IE quite often gets this wrong. The #main2 div should have a relative position to provide the reference for the absolute coordinates, and the center text align needs to be removed here as well as it mucks up the reference point in IE. The width of #main2 should also be reduced to match up with the background image. The css for these elements can be :#main2{
width:950px;
margin:50px auto 0;
position: relative;
}

div.text {
position:absolute;
top:110px;
display:block;
left:550px;
z-index:100;
width:290px;
}

div#update {
width:300px;
position:absolute;
top:290px;
left:100px;
z-index:110;
}


PS: It would have been better if the notebook.gif image was a background to #main2, and then the content divs could just be floated left and right without any need for absolute positioning.

[trivektor]

Awesome! Thanks so much Centauri.

[trivektor]

Btw, I didnt use the notebook as the background cause it might be slow to load. Do you have any suggestion? Thanks again.

[Centauri]

Due to the nature of the graphic, there is little you can do to improve loading times, and at around 38k is not too bad. Won't make any difference loading wise whether it is a background or not, but if the same image is to be used on more than one page then the browser will cache the image if it is specified as a background in the css, which will speed up the loading of the other pages.