I'm trying to translate this picture to a website
http://home.hetnet.nl/~j.e.dijkstra/test/perspect/test.htm, but am having some problems with the
middle part (navigation part).
Fot this design it is crucial that all elements have the same height, width and distance.
All blocks (divs and ul's) are the same width (125px) an must have the same right-margin of 3 px.
The navigation part consists of the four yellow/orange ul's.
The highest level ul with a green background color should be 512px wide.
4* 175 + 4*3 = 512.
I've added the right-margin of 3 px to the list items of the highest level ul.
This works correct in Opera 7.51 and Firefox 1.0.
But IE 6 is adding 3 extra pixels to the highest level ul (green).
ALso, all blocks should be the same height which is 100px.
I've given the list items (orange) belonging to first ul a height of 20px
and the second level ul (yellow) )a height of 80 px.
This works correct in Firefox 1.0.
But in Opera and IE 20px + 80px adds up to 99.
The highest level ul (green) is peeping from under it.
Maybe I just should have used a table to keep it simple?
Does anyone know a solution to this problem?
Thanks in advance.
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/