View Full Version : Simple CSS List based menu problem

08-25-2010, 02:22 AM
I know I'm overlooking something simple. But I'm trying to help out a student and I can't for the life of me figure out why her horizontal menu is wrapping to a second line in IE7 (and 6).

The page is at http://www.legacydesignco.com/NewTouch/test5.htm

Any ideas would be welcome!

08-25-2010, 03:27 AM
looks ok but i wonder about that div align center on about nt

08-25-2010, 04:03 AM
looks ok but i wonder about that div align center on about nt

Thought of that and stripped everything out. But look at this:


08-25-2010, 04:28 AM
hm, i would reduce the 25% width of the li then if it displays ok , start looking at the padding borders . i cant see anything but there must be a bug there somewhere

08-25-2010, 05:09 AM
Finally after stripping all the content except the container and the menu and discovering that the menu still wrapped to a second line I've got an answer.

It's a rounding issue in IE6 and IE7. The container was set to 755px wide. 25% of 755 is 188.75 which apparently IE7 rounds to 189. 189 x 4 = 756px and the menu wraps.

All I had to do was change the container width to 756px (which is divisible by 4) and everything works as it should!

Actually it appears that WebKit rounds down and leaves a small space to the right of the menu. Firefox handles it without an issue.

08-25-2010, 05:13 AM
nice one good old ie finds another way to get us