'gap' above CSS menu in IE

**PH!L** · 10-27-2009, 04:08 PM

I have been developing a website over the passed few weeks and had it looking perfect in firefox, I finally took the plunge and viewed in it IE and it looked a mess (no suprise)

So ive been going through adapting the CSS to make it few correctly in IE also.

The problem is there is a gap above my css menu and I cant figure out what is causing it? The site is not live so I have attatched some screen shots.

This is how it looks in Firefox (as it should tight against the header)

In Internet explorer the menu seems to be pushed downwards:

in my CSS men part here:

Code:

        .menu li a {
    display:block;
    text-decoration: none;
    text-indent: -1100px;
    height:35px;
    background-color: #53534b; 
    padding:0px;
    background-repeat: no-repeat;
    margin:0px;
}

If I change display:block to display:inline; the menu goes into the correct position, but then doesnt function correctly.

does anyone have any ideas what could be causing the gap?

Thanks

**LadynRed** · 10-27-2009, 05:17 PM

No way we can dissect what's going on there with just an image and that bit of code. We need to see ALL of it as there is usually something ELSE in the code causing that.

By the way, you should be using conditional comments to call a separate "fixes only" CSS file for IE's bad behavior.

**PH!L** · 10-27-2009, 05:33 PM

Thanks for the reply, I will post some more code, can I jsut ask, what is the most efficient way to call seperate formating for IE?

Create another style sheet and call it with this in the html of each page:

**PH!L** · 08:38 PM

Its seems that the div which holds the menu is getting foced onto a new line and the holding div is getting doubled in height. Like I say If I change the display to inline instead of block on the menu li a tag it moves up to the correct position, but the functionality doesnt work.

The html part in quesiton is:

HTML Code:

<body>
<div id="wrapper">
<div id="login">[!loginlogout!]</div>
  <div id="header-container"><div id="header-logo"><a href=""><img src="a" alt="name" width="333" height="81" /></a></div>
  <div id="header-advert"> banner ad is here</div>
  </div>
  
  <div id="navi-holder"><div id="navi-title">  <div id="menu-holder"><img src="" alt="Title" width="368" height="35" /></div>
  <div id="menu-holder2"><div id="menuwrap"><ul class="menu">
Menu is here
     </ul>
</div></div></div>
</div>

and the css including the css for menu is:

Code:

#wrapper {width:960px; margin:0 auto; padding:0; background-color:#2a2b26;   border: none;
      text-align: left; vertical-align: middle; }
#login{  padding-top:5px; background-color:#2a2b26; height:20px; font-family:Verdana, Helvetica, sans-serif, Arial; font-size:10px;  color:#cdcdc9; text-align:right; text-decoration:none;}
#login a {text-decoration:none; color:#cdcdc9;}
#header-container {padding:0; height:81px; background-color:53534b; overflow: hidden;  }
#header-container  img{border:0; margin:0px; }
#navi-holder {float:left; padding-left:5px; height:35px; width:955px; background-color:#53534b; display: inline;}
#navi-title {float:left; text-align:left; padding-right:0px; margin:0px; height:35px; width:955px; background-color:white; }
#header-logo {padding:0; height:81px; width:333px; float:left;  text-decoration:none; display: inline; margin:0px;}
#header-logo img {
border: 0px none;
}
#menu-holder{
    height:35px;
    margin: 0 auto;
    float:left;
    width:371px;
    border-top-style:solid;border-top-width:1px; border-top-color:#fffe72; border-left-style:solid;border-left-width:1px; border-left-color:#fffe72; ;
display: inline;

}

#menuwrap {
      margin: 0 auto;
         vertical-align: top;
             text-align:left;
            float:left;
 height:35px;
 width:584px;
 padding:0px;
 display: inline;

 }
#menu-holder2{
    height:35px;
    margin: 0 auto;
    float:left;
    text-align:left;
    width:584px;
padding:0px;
display: inline;

    
}

 .menu {
    margin: 0;
padding:0px;
    list-style: none;
    background: #53534b; 
    height:35x;
    
    
}
.menu li {
    padding: 0;
    margin: 0;
    height: 35px;
    
    list-style: none;
    background-repeat: no-repeat;
}
        
        .menu li a, .menu li a:visited {
    display:block;
    text-decoration: none;
    text-indent: -1100px;
    height:35px;
    background-color: #53534b; 
    padding:0px;
    background-repeat: no-repeat;
    margin:0px;
    
}


.menu span
{
  display: none;
}

ul {margin: 0; padding: 0;}
ul li {display:inline; margin:0 10px 0 10px; padding: 0;}
ul li a {padding:0; margin:0px;}



.nav2 {background-image: url(../images/store2.png); width: 99px;}
.nav2 a {background-image: url(../images/store1.png);}
.nav3 {background-image: url(../images/brand2.png); width: 80px;}
.nav3 a {background-image: url(../images/brand1.png);}
.nav4 {background-image: url(../images/discount2.png); width: 103px;}
.nav4 a {background-image: url(../images/discount1.png);}
.nav6 {background-image: url(../images/blogs2.png); width: 75px;}
.nav6 a {background-image: url(../images/blogs1.png);}
.nav5 {background-image: url(../images/news2.png); width: 66px;}
.nav5 a {background-image: url(../images/news1.png);}
.nav7 {background-image: url(../images/about2.png); width: 73px;}
.nav7 a {background-image: url(../images/about1.png);}
.nav8 {background-image: url(../images/contact2.png); width: 88px;}
.nav8 a {background-image: url(../images/contact1.png);}
ul.menu li a:hover {background: none; margin: 0; padding: 0;}
.menu li {float: left;  }
.menu:after {content: "."; display: block; height: 0; clear: both; visibility: hidden; margin: 0; padding: 0;}

Sorry its a bit messy

EDIT: Another strange thing, in the blank space (where the red arrow is on the screenshot, where the menu actually should be) that whole area holds the same link attributes as the logo image. i.e. it links to the homepage :/

**LadynRed** · 10-27-2009, 09:50 PM

Quote:

That IS a conditional comment, but you should target which VERSION of IE as some things that don't work in IE6 work in 7, etc.

**PH!L** · 10-28-2009, 08:08 AM

Thanks, its IE6 its happening in, havent had a chance ot test other version yet.

Anyone have any idea whats causing the it to be pusehd down?

**LadynRed** · 10-29-2009, 11:14 AM

Do you have a URL? It's difficult to troubleshoot when we don't have your images and only incomplete code.