IE and Firefox incompatibility issue

[Nils Weisensee]

Hello!

For some reason, Internet Explorer is displaying one CSS-layer on my
website http://home.arcor.de/nilsweisensee/links.html slightly
differently than Firefox, Opera, Konqueror and Safari are displaying
it. The menu with link categories in the upper-right corner of the
grey box is positioned 10 pixels to the right by IE, while all the
other browsers position the menu a bit more left. With IE, the menu
overlaps with the border of the grey box.

The corresponding stylesheet can be found at
http://home.arcor.de/nilsweisensee/css/styles.css ...it would be great
if somebody could take a look at it and help me find out what's wrong.
The class of the miss-positioned object is "headline2" . It's not
placed within a table, so I don't think the problem is caused by IE's
box border bug.

Thanks for your help!

NilS

[Jim Moe]

Nils Weisensee wrote:

For some reason, Internet Explorer is displaying one CSS-layer on my
website http://home.arcor.de/nilsweisensee/links.html slightly
differently than Firefox, Opera, Konqueror and Safari are displaying
it. The menu with link categories in the upper-right corner of the
grey box is positioned 10 pixels to the right by IE, while all the
other browsers position the menu a bit more left. With IE, the menu
overlaps with the border of the grey box.

A handy diagnostic aid is to put a visible border around each element
to see where the edges are.
In this case IE and Firefox interpret the Frameset DTD slightly
differently. IE considers everything to be inside the div.main, including
the scroll bar. Firefox places the scroll bar outside div.main. The 10px
difference is the scroll bar width.

--
jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[Nils Weisensee]

Hi Jim,

Thanks for your hint! The problem wasn't caused by the scrollbar-issue
you described, but I found the error by putting black frames around
the elements. The problem was that I had assigned a smaller width to
the element "main" than to the "content"-element inside of it. IE
simply enlarged the "main"-element to make sure the "content"-element
fit into it. Firefox, in contrast, respected the too-small size of the
"main"-element and simply allowed "content" to extend the
"main"-element and overlap. In the end, the "main" element was
displayed in different sizes by IE and Firefox. That's what caused the
element "headline2" to be positioned differently.

Thanks -
NilS