IE trouble with basic css menu

Discussion in 'CSS' started by fotoviva, Oct 29, 2008.

0
  1. #1
    Hey folks

    I have a slight issue when viewing my basic menu in IE7 - works fine on FF and all Mac browsers. On the menu here there is a small green graphic that sits above and below the menu. There should be a 1px white gap between the menu and these graphics. In IE there is a larger gap.

    If you view the source you will see the graphic is:
    .menutab { background-image:url(images/menu-tab2.jpg); height:8px; margin-bottom:1px; margin-top:1px; }

    Perhaps it is a margin issue with the menu itself?

    How can I resolve this please?
     
    fotoviva, Oct 29, 2008 IP
  2. justinlorder

    justinlorder Peon

    Messages:
    4,160
    Likes Received:
    61
    Best Answers:
    0
    Trophy Points:
    0
    #2
    justinlorder, Oct 29, 2008 IP
  3. Funk-woo10

    Funk-woo10 Peon

    Messages:
    1,109
    Likes Received:
    21
    Best Answers:
    0
    Trophy Points:
    0
    #3
    I will take a look hold on ..
     
    Funk-woo10, Oct 29, 2008 IP
  4. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #4
    You need to make sure you set the margins & paddings for the menu UL and LI because they have different defaults.

    So typically

    #navlist {margin:0; padding:0;}
    #navlsit li { margin:0; padding:0; }
    or any other value you want just make sure you set it
     
    wd_2k6, Oct 29, 2008 IP
  5. fotoviva

    fotoviva Active Member

    Messages:
    265
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    60
    #5
    Thanks, I added the #navlist but no joy, so added the #navlist li but this didn't help either. That last one actually removed the 1px gap I wanted in Safari too!
     
    fotoviva, Oct 29, 2008 IP