Fixing margin problems across browser versions

[Daan]

Please look at the menu of this site:
http://campuslaan37.student.utwente.nl/new/index.php. When hovering over
'De flat', a dropdown menu should appear. Now when you hover over one of
the links in that menu, the background should turn white.

The problem is, in Mozilla Firefox, the white background overlaps the
right border of the drop down menu. In IE and Opera, the background
stays within the borders, as it should.

Why does it do this and how can it be fixed?
Thanks in advance,

 

[Steve Pugh]

Please look at the menu of this site:
http://campuslaan37.student.utwente.nl/new/index.php. When hovering over
'De flat', a dropdown menu should appear. Now when you hover over one of
the links in that menu, the background should turn white.

The problem is, in Mozilla Firefox, the white background overlaps the
right border of the drop down menu. In IE and Opera, the background
stays within the borders, as it should.

You have this:

<li>
<ul>
<li></li>
</ul>
</li>

li has a width of 10em.
ul has a border all round and an unspecified width (hence width:
auto.
The inner li has a width of 10em becaus eyour #menuDiv li rule also
matches this li.

Hence the inner li is wider than the ul. Mozilla correctly makes the
inner li spill out over the edge of its parent elements. IE
incorrectly expands the parent to accomodate.

If you had set the background on the li or the non-hover states of a
you would have seen this at all times, not just when hovering.

A rule along the lines of #menuDiv li li {width: auto;} should fix the
problem.

Steve

 

[Daan]

http://campuslaan37.student.utwente.nl/new/index.php

Thanks Steve, that helped. I rebuilt the menu and used your advice, but
now there's another problem When viewing the page in IE, there is
space between the menu items (for debugging purposes colored green).
This space shouldn't be there and *isn't* there in Firefox... Any
suggestions, anyone?

 

[Daan]

Thanks Steve, that helped. I rebuilt the menu and used your advice,
but now there's another problem When viewing the page in IE, there
is space between the menu items (for debugging purposes colored
green). This space shouldn't be there and *isn't* there in Firefox...
Any suggestions, anyone?

Hm, I've found some sort of a workaround by adding this:

#menuDiv li li {
border-bottom: 1px solid #fff;
}

But still, if anyone knows a proper way of solving the problem, that'd
be welcome!