WordPress.org

Forums

[resolved] Extra padding in IE6&7 (9 posts)

  1. whisperofreality
    Member
    Posted 6 years ago #

    I have a small IE problem concerning the navigation of http://www.andreakrausemk.com. If you view the site in Firefox (Win/Mac), Opera (Win/Mac), or Safari the padding on either side of the currently highlighted link is the same and there is a small margin between it and the next link. However, IE6 and IE7 add several extra pixels of padding on the right side of the currently highlighted link. This is particularly noticeable when you hover over the link just to the right of the currently highlighted link. I have tried everything I can think of and have not been able to remove this extra padding. Does anyone have any ideas? They would be much appreciated.

  2. zeniph
    Member
    Posted 6 years ago #

    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

  3. RoseCitySister
    Member
    Posted 6 years ago #

    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.

  4. zeniph
    Member
    Posted 6 years ago #

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

  5. RoseCitySister
    Member
    Posted 6 years ago #

    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! ;)

  6. whisperofreality
    Member
    Posted 6 years ago #

    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?

  7. Michael Fields
    Themer
    Posted 6 years ago #

    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; }

  8. whisperofreality
    Member
    Posted 6 years ago #

    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.

  9. whisperofreality
    Member
    Posted 6 years ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Topic