Screen Widths Problem

Hello Everyone.

I gave up on frames, and now I'm trying to achieve the same navigation
with CSS - which is probably not the best idea. I've hit a strange
snag.

I've positioned a top banner DIV at 2% left and width of 96% absolute.

Underneath, I have three DIV columns, the first at 2% left, width 27%,
the second at 31% left, width 38%, and the third at 71% left, width
27%.

Although the percentages of the bottom three DIVs add up to 98%, which
should correspond with the top banner DIV, there are several pixels of
difference in IE6 and Opera 7.10, but not in Mozilla Firebird 0.61,
Beonex Communicator 0.8 or DocZilla 1.0, the last three using the
Gecko renedering engine so I understand, as in Netscape. I also
checked with Amaya 8.1, but I guess the positioning is not fully
supported yet, and each DIV came out one above the other.

I guess this must be a known problem. Is there a known solution?

Thanks.

Alan Clark
University of Herts. UK.





--
Best regards,
Alan mailto:alan (AT) eggless (DOT) com

Alan Clark wrote:

Hello Everyone.

I gave up on frames, and now I'm trying to achieve the same navigation
with CSS - which is probably not the best idea. I've hit a strange
snag.

I've positioned a top banner DIV at 2% left and width of 96% absolute.

Underneath, I have three DIV columns, the first at 2% left, width 27%,
the second at 31% left, width 38%, and the third at 71% left, width
27%.

Although the percentages of the bottom three DIVs add up to 98%, which
should correspond with the top banner DIV, there are several pixels of
difference in IE6 and Opera 7.10, but not in Mozilla Firebird 0.61,
Beonex Communicator 0.8 or DocZilla 1.0, the last three using the
Gecko renedering engine so I understand, as in Netscape. I also
checked with Amaya 8.1, but I guess the positioning is not fully
supported yet, and each DIV came out one above the other.

I guess this must be a known problem. Is there a known solution?

Thanks.

Alan Clark
University of Herts. UK.



--
Best regards,
Alan mailto:alan (AT) eggless (DOT) com

In order for IE to line things up properly, you need to eliminate the
document padding and margins:

<style...
body {
padding: 0;
margin: 0;
...
}

[I know the MSDN docs say the default values for these properties are 0,
but I don't believe it...]
In IE, these properties influence the position of all other objects on
the page *even if they are declared position: absolute* (I'll bet that
the "overrun" was about 8 pixels).

Doing this *should* have no adverse affect on the gecko browsers. I have
absolutely no experience with Amaya, so I can't help you there.

Fox
*************