CSS Forum

**AliKat** · 01-31-2008, 11:17 AM

I am trying to design a site that looks great in FF and IE7 but there is one problem in IE 6.

The top menu there Home item says "e Hom" in IE6. The words are actually a background image so I'm pretty sure something is up with the CSS, but the code is identical to Forums and it displays correctly so I'm at a loss.

http://www.alikat-designs.com/client.../template.html

Any help would be appreciated.

**angele803** · 01-31-2008, 06:30 PM

Im not sure why you are telling the background image to repeat. That might be messing things up. Also, you might try to position the background image to "top left".

**AliKat** · 06:40 PM

I tried both of those, didn't do anything.

Just tried it again, nothing.

**LadynRed** · 01-31-2008, 08:51 PM

You need to change that repeat in the background to no-repeat.

**BruceWayne** · 01-31-2008, 09:52 PM

Do you still have that problem ?

**AliKat** · 01-31-2008, 10:15 PM

I did and it didn't work.

Updated the file. It still doesn't work.

**AliKat** · 02-03-2008, 09:10 AM

hmmm, no one else wants to take a stab at the problem?

Things i've tried relative positioning, and moving the element.
no-repeat background.
background placement top left

so far nothing I've tried has worked.

**Mooofasa** · 02-03-2008, 11:56 AM

I would attempt to help but I don't have IE6

**LadynRed** · 02-03-2008, 01:11 PM

I managed to get it fixed. I wouldn't do the menu that way at all, images for navigation are just bad for accessibility, but this works.

First you need to use conditional comments and a separate css file to target IE6. This goes in your <head> section:

Quote:

I also changed the menu and made it a true list:

Quote:

And here's the CSS:

Quote:

#menu {
height: 25px;
background: url(images/bar25px.gif) repeat-x;
text-align: center;
clear: both;
/*position: relative;*/
/*top: -5px;*/

}

#menu ul{
list-style-type: none;
margin: 0;
padding: 0;
height: 25px;

}

#menu li, #menu li.h, #menu li.f{
display: inline;
margin: 0 10px;
padding: 10px 0px 0px 0;

}

#menu li a {
padding: 0;
margin: 0;

/*position: relative;
top: 3px;*/

}
#menu img {
border: none;

}
#menu li.h {
background: url(images/menu_home.gif) no-repeat;

}

#menu li.h a:hover, #menu li.h a:focus {
background: url(images/menu_home_over.gif) no-repeat;
margin: 0;
padding: 10px 0 0 0;
}
#menu li.f {
background: url(images/menu_forums.gif) no-repeat;
}

#menu li.f a:hover, #menu li.f a:focus {
background: url(images/menu_forums_over.gif) no-repeat;
margin: 0;
padding: 10px 0 0 0;
}

IEfixes.css file

#menu li{
margin: 0 10px;
padding: 0px 0px 0px 0;

}
#menu ul li.h, #menu ul li.f{
margin: 0 5px 0 0;
padding: 0px;

}
#menu li a{
vertical-align: bottom;
height: 1%;
margin: 0;
padding: 0px;

}

#menu ul li.f a:hover, #menu ul li.f a:focus, #menu ul li.h a:hover, #menu ul li.h a:focus{
padding: 0;
margin: 0;
}

Putting the proper height and width on the gifs in the menu was the first thing to do, which meant taking that OUT of the CSS.

I commented out the stuff you don't need and that includes that conditional comment you had in the html trying to correct the padding issue.