Now, if you load the above page in Safari, or IE Mac, things look just dandy. Ignoring the problem of the style sheet not loading at all in any Gecko-based browsers (I'll figure that one out when I'm ready), and, honestly, ignoring every other problem, can someone please tell me why, in Windows IE versions (all, as far as I can tell) there is an extra space under the averagebacon.com button, right below the pinkish-image?
Basically, the navigation is made up of a list nested within a list, hence the main button in question, and the buttons off to the side. I've removed all the spaces in the XHTML (may not be entirely compliant yet - like I said, still working on that and the other bugs) to deal with that IE bug, but still, the space.
Thanks in advance for any and all help - I've just wandered into Sitepoint, and I have a feeling I might be spending a bit more time here.
It turns out that there appears to be a bug in Internet Explorer for Windows wherein if you nest one list inside of another (for the purposes of navigation - take a look at the source of this page and my style sheet for more info), and you don’t declare a bottom border of some sort for the nested list’s parent ‘li’ tag, and that same parent ‘li’ tag contains an element which has been set to ‘display:block’ (as the ‘a href’ tags that make up the navigation for my site in fact are), the browser will insert an extra line below that block element element. This line is subject to being styled - as in you can declare, say, a line-height (35px, in the case of my site) for each list item in the parent list, and the ‘li’ (the ‘li’ which contains the aforementioned block element andnested list) will be double the declared height (70px, in the case of my site).
Perhaps this is documented elsewhere, or I was just doing something *really* dumb without realizing it, but I just thought I'd let everyone know what I found.
Bookmarks