SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member Averagebacon's Avatar
    Join Date
    Nov 2003
    Location
    Vermontville, MI
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question IE/Win Adds Extra Space in Nested Lists...?

    Okay, for the first time since starting with CSS (not too long ago, but not yesterday either), I need to ask for actual, human-being type help.

    First, a couple of links to the relevant files:

    http://www.averagebacon.com/ : My site
    http://www.averagebacon.com/abstylesheet.css : My style-sheet

    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.

  2. #2
    SitePoint Member Averagebacon's Avatar
    Join Date
    Nov 2003
    Location
    Vermontville, MI
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nevermind, got it.

    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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •