CSS problem with horizontal menu

Discussion in 'CSS' started by Mooseman, May 4, 2007.

  1. #1
    I tried to fix this for a while now and I just can't.. nothing I've tried works.
    This is the problem, look at this wp theme in FF or IE7 and the menu works perfectly fine.
    Then look at it in IE6 and you see the menu (top right) doesn't align to the bottom for some reason, anyone knows why?

    Link:
    http://www.flatt-life.se/wordpress/

    Thanks
     
    Mooseman, May 4, 2007 IP
  2. hans

    hans Well-Known Member

    Messages:
    2,923
    Likes Received:
    126
    Best Answers:
    1
    Trophy Points:
    173
    #2
    <li><a href="http://www.flatt-life.se/wordpress/">Home</a></li>
    <li class="page_item"><a href="http://www.flatt-life.se/wordpress/?page_id=2" title="About">About</a></li>
    <li class="page_item"><a href="http://www.flatt-life.se/wordpress/?page_id=9" title="Page 2">Page 2</a></li>

    the first item of your menu has no class style and hence differs from the next 2 times of your navigation menu

    since normally everything has/uses default value unless defined in CSS
    that might be the possible cause
    $i have NO IE hence can NOT verify/reproduce your display error

    however

    since your CSS and your HTML are fully validated
    the cause ONLY can be such a minor detail in your page layout style-code
     
    hans, May 4, 2007 IP
  3. Mooseman

    Mooseman Peon

    Messages:
    453
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thanks for your reply.
    That wasn't the problem though, I tried removing that first li that don't have the class, but it didn't work.

    I took a little screen of it for you who doesn't have IE6 =)
    [​IMG]
     
    Mooseman, May 4, 2007 IP
  4. hans

    hans Well-Known Member

    Messages:
    2,923
    Likes Received:
    126
    Best Answers:
    1
    Trophy Points:
    173
    #4
    I see

    you have 2 different CSS for both menu
    above and below

    see your CSS below contains
    <div id="sidebar">

    #sidebar ul{
    float:left;

    for your menu above
    <div id="menu">
    i see no float

    hence the 2 are different in display

    whatever - left - right or float
    make both equal in your CSS
    or
    give an absolute position to start for both
     
    hans, May 4, 2007 IP
  5. Mooseman

    Mooseman Peon

    Messages:
    453
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Yea but.. for horizontal menu's, the float sometimes gives it a wierd positioning, that's why I used text-align:right; instead..
    And imo absolute positioning is bad, unless it's really needed.
    So I dunno.. the wierdest thing is that all my other menu's work fine in IE6, and they use equal CSS.. lol I'm so tired of this, always one little tiny things that I need to spend days fixing..
    Haven't fixed it yet btw, so if any others got anything that might solve it?
     
    Mooseman, May 5, 2007 IP
  6. hans

    hans Well-Known Member

    Messages:
    2,923
    Likes Received:
    126
    Best Answers:
    1
    Trophy Points:
    173
    #6
    that it displays correct in SOME browsers may in this case be pure incident or luck
    if you really want to align then only if BOTH navigation parts top and below have identical CSS

    else

    put the TOP menu into a table and make the table exactly matching size to your below display
    then you have absolute control to the pixel


    just remember
    there most be a reason why so many ( maybe all ) really large web sites use tables instead of complex sophisticated methods

    there always is a reason why huge sites are what they are - more successful
    they have no room for errors - only for competition and productivity
     
    hans, May 5, 2007 IP
  7. clicyu

    clicyu Peon

    Messages:
    22
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #7
    i think u need to remove default margins and padding from ul and li elements.set margin:0;
    padding:0;
    ie have different default margins for ul and li elements.u define it yourself....

    i see now u already do that.

    try this :
    * html #menu .c
    {
    padding-bottom:0;
    margin-bottom:-9px;
    }
    it is working in ie6 i didn't look in other browsers...
    have a nice day .
     
    clicyu, May 5, 2007 IP
    Mooseman likes this.
  8. Mooseman

    Mooseman Peon

    Messages:
    453
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Thanks ALOT man, that solved the problem, it's working perfect now :D
     
    Mooseman, May 5, 2007 IP