$6 paypal to anyone that can help me with this CSS IE menu bar bug :)

Discussion in 'CSS' started by sunnymonkey, Feb 1, 2009.

  1. #1
    Hey all.

    I have a site that I am putting together. I have a problem where the menu is fine in FIREFOX but is off to the right in IE (IE7).

    If someone can help me solve it that would be super. I will even pay $6 paypal to the first person that can help me fix it :)

    The site in question is // link removed now the problem is resolved. :)

    Thanks

    Many thanks!

    Sunny
     
    sunnymonkey, Feb 1, 2009 IP
  2. shallowink

    shallowink Well-Known Member

    Messages:
    1,218
    Likes Received:
    64
    Best Answers:
    2
    Trophy Points:
    150
    #2
    Just as a quick guess.. I would check what's going on with the first item in the menu bar. When I use the web developer toolbar with "outline current element" in FF, if I hover over the first item FF outlines a much larger section than looks necessary (oddly enough its about the amount IE7 is pushed over).
     
    shallowink, Feb 1, 2009 IP
  3. sunnymonkey

    sunnymonkey Peon

    Messages:
    623
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Yeah, been trying to use firebug in FF to work out the problem. Keep changing things, and can break it more but not fix it.

    In IE, if I change the #nav margin-left to be margin-left:230px; or similar and this fixes the problem in IE, but the you have the opposite issue in FF> :(
     
    sunnymonkey, Feb 1, 2009 IP
  4. shallowink

    shallowink Well-Known Member

    Messages:
    1,218
    Likes Received:
    64
    Best Answers:
    2
    Trophy Points:
    150
    #4
    well quick fix is use an IE conditional. sucks but you could spend hours trying to track it down. Conditional or use the star hack :)
     
    shallowink, Feb 1, 2009 IP
  5. sunnymonkey

    sunnymonkey Peon

    Messages:
    623
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Any chance you can tell me how to do that? :)

    I had a look just now but couldn't get it to do what I wanted. :)
     
    sunnymonkey, Feb 1, 2009 IP
  6. sunnymonkey

    sunnymonkey Peon

    Messages:
    623
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #6
    This is the line in the CSS

    #nav { float:left; margin-top:15px; margin-left:18px; font-size:1.1em; z-index:999; position:absolute; top: 95px; }


    FOR IE IT NEEDS TO BE

    #nav { float:left; margin-top:15px; margin-left:285px; font-size:1.1em; z-index:999; position:absolute; top: 95px; }



    From the bits I have read. Can we use the 'box model' or something to use the second bit of IE only? :)

    http://dev.opera.com/articles/view/supporting-ie-with-conditional-comments/
     
    sunnymonkey, Feb 1, 2009 IP
  7. ActiveFrost

    ActiveFrost Notable Member

    Messages:
    2,072
    Likes Received:
    63
    Best Answers:
    3
    Trophy Points:
    245
    #7
    Try position:fixed instead of position:absolute :rolleyes:
     
    ActiveFrost, Feb 1, 2009 IP
  8. sunnymonkey

    sunnymonkey Peon

    Messages:
    623
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Tried that. Just piles all the menus on top of each other. :)
     
    sunnymonkey, Feb 1, 2009 IP
  9. shallowink

    shallowink Well-Known Member

    Messages:
    1,218
    Likes Received:
    64
    Best Answers:
    2
    Trophy Points:
    150
    #9
    You have to have both of them. FF understands the first one, ignores the 2nd.

    #nav { float:left; margin-top:15px; margin-left:18px; font-size:1.1em; z-index:999; position:absolute; top: 95px; }

    * html body #nav { float:left; margin-top:15px; margin-left:285px; font-size:1.1em; z-index:999; position:absolute; top: 95px; }

    Yes its box model hacks or whatever they want to call it. I usually prefer to use conditionals if I have to use anything. But if you got that far without any hacks or conditionals, one won't kill us.
     
    shallowink, Feb 1, 2009 IP
  10. sunnymonkey

    sunnymonkey Peon

    Messages:
    623
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #10
    Thanks. Put it in. No change. Very odd.

    grrr
     
    sunnymonkey, Feb 1, 2009 IP
  11. shallowink

    shallowink Well-Known Member

    Messages:
    1,218
    Likes Received:
    64
    Best Answers:
    2
    Trophy Points:
    150
    #11
    ok then go to the conditionals. Have to put this into the head of the page .

    <!--[if IE]>
    <style type="text/css">
    #nav { float:left; margin-top:15px; margin-left:285px; font-size:1.1em; z-index:999; position:absolute; top: 95px; }
    </style>
    <![endif]-->
     
    shallowink, Feb 1, 2009 IP
  12. sunnymonkey

    sunnymonkey Peon

    Messages:
    623
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #12
    Thanks. Will try that next.

    Also, I think the html box hack doesnt work in IE7 anyway...

    Right, lets try this.
     
    sunnymonkey, Feb 1, 2009 IP
  13. sunnymonkey

    sunnymonkey Peon

    Messages:
    623
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #13
    LOL< It only flippin worked! You star!
     
    sunnymonkey, Feb 1, 2009 IP
  14. sunnymonkey

    sunnymonkey Peon

    Messages:
    623
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #14
    Ping me your paypal shallowink. ;)
     
    sunnymonkey, Feb 1, 2009 IP
  15. sunnymonkey

    sunnymonkey Peon

    Messages:
    623
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #15
    Payment sent :)

    Thank you again. Total life saver!
     
    sunnymonkey, Feb 1, 2009 IP
  16. Rossdimassimo

    Rossdimassimo Peon

    Messages:
    41
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #16
    looks like im too late again
     
    Rossdimassimo, Feb 4, 2009 IP