My logo works in Firefox but not IE

Question

Hi

My logo, which I'm referencing in my external css style sheet is working fine in Firefox, but does not appear to work in internet explorer:

below is the code I'm using:

#header
    {
    width: 760px; 
    float: left;
    background-color:  #fff;
}


#header h1
    {
    float: left;
    font-size: 1em;
    text-indent:-9999px;
}





#header h1 a
{

background:#fff url(images/logo.jpg) no-repeat;

width:290px; 

height: 75px;

float:left;

text-decoration:none;

}

Can anyone suggest a way in which I can get this logo to appear correctly in i.e?

Thanks

Matt

Answer 1

try adding overflow: hidden to any floated elements.

Answer 2

Try adding display:block to your #header h1 a class, If that still doesn't work, try changing your #header h1 a background to something like hot pink and verify its diminsions.

Update: If your logo is collapsed try removing the float:left from that. You already have float:left on the header and header h1. You may also want to play around with a clear tag, or better yet, implement clearfix

Answer 3

I would definitely look for something like Firebug for IE (there must be something out there...) and then have a click-around. This isn't too scientific an approach, basically just trial-and-error, but I'm sure if the problem is something small like this, you could get to the bottom of it in no time this way :) good luck

Answer 4

Actually, try using display: none; to get rid of the text in your header element combo'd with a "background:" definition.

Answer 5

Hi, if your logo (image ) is CMYK it will not be displayed. Please make sure that your logo is RGB format, otherwise will not be supported in other browsers \

KosovoCustomDevelopment

Answer 6

It may be possible that IE considers the link as text and is therefore indenting the anchor instead of the text content inside the anchor.

Try moving your text-indent property into the rule of the anchor.

#header h1 {
  float: left;
  font-size: 1em;
}

#header h1 a
{
  background:#fff url(images/logo.jpg) no-repeat;
  width:290px; 
  height: 75px;
  float:left;
  text-decoration:none;
  text-indent:-9999px;
}

Does that make any difference?