Extra padding in IE6&7

without implementing some ugly conditional CSS hacks the simplest solution (which is also very ugly) is to remomve the line breaks between LIs from your HTML

eg

<li>link</li>
<li>link</li>

becomes
<li>link</li><li>link</li>

floating the LIs will also resolve but that will messup the centering of the design

google IE6 LI whitespace bug from more info

I use this code:

* {
   margin: 0;
   padding: 0;
}

at the beginning of every stylesheet, then set padding for each element as needed. It makes issues such as this non-existent in a lot of cases.

RoseCitySister – excellent advice but the IE6 bug and the nature of the design will trump that approach unfortunately

Hmmm – you mean that IE6 will read a line break as an unbreakable space?

I’m reminded every time I code a site, how much I hate Microsoft! ??

Thanks for the help, everyone. Eliminating the line breaks did the trick. I also tried zeroing out the margin and padding values as suggested by RoseCitySister just for the sake of it but it didn’t help in this situation. Thanks for the suggestion, though. I can see how it would often prove very useful.

Just one more thing. I now notice that selecting a new page causes the navigation links to move slightly to the right or left (depending on which link is selected). This is the case in all the browsers I’ve tested and is most noticeable when browsing to or from the gallery which is actually a non-WP page and therefore has a slightly different navigation structure. I am completely baffled as to why this new problem has arisen. Any thoughts?

whisperofreality,
The problem that you mentioned:

I now notice that selecting a new page causes the navigation links to move slightly to the right or left (depending on which link is selected)

This is not actually a bug rather it can be explained by regular browser functionality. You see, the Home and News pages are very short (vertically)… so short the the browser see now need to render a vertical scrollbar. The other 3 pages on the site are long – therefore, the browser does render a scrollbar. This will be true in just about every browser on the market.

Below are a few options that you might want to explore. I don’t think that any of them are cross-browser supported, but at least they will help in some browsers. A javascript solution might be helpful to – I am not aware of one though.

If you find an alternative solution, please post as I would love to know it!!!

Best of luck,
-Mike

#1
html { overflow-y: scroll; }

#2
html { overflow-y: scroll; }
html { overflow: -moz-scrollbars-vertical; }

Actually, the links move even when a scrollbar is not added or removed. If you browse from one short page to another (i.e. home to news to gallery) or from one long page to another (about to resources) the links move slightly within relation to each other and the navigation menu itself, not in relation to the page as a whole. It is as if there is a slight difference in padding or margins for the current link though I can’t find where it could be coming from.

Figured it out. I just had to switch #nav ul li.current_page_item to #nav ul li.current_page_item a. Thanks for all your help.