LOGO image not rendered within Header in IE7

Question

I'm working on http://companies.ur-nl.com/ seems Logo (its H1) image in header is not rendered in IE7, it works within FF and other browsers, Please help me out of this

HTML

    <div id='logo'>
      <h1>
         <a href='/' title='Some Text HERE'>
           Some Text HERE
         </a>
      </h1>
   </div>

CSS

#logo {
    float: left;
}
#logo a {
    background: url("http://companies.ur-nl.com/assets/logo_image_name.png") no-repeat scroll 0 0 transparent;
    display: inline-block;
    height: 62px;
    margin: 35px 0 0;
    text-indent: -100000px;
    width: 195px;
}

Please add the relevant parts of your code to your question. — m90, Jul 30 '13 at 07:01

score 2 · Answer 1 · edited May 23 '17 at 12:20

This is quite a well known text-indent bug for IE7, for example see Text indent is not working in ie7

However, I could not get the solution for that question to work on your site. Instead you can remove the text-indent and replace with:

line-height: 0;
font-size: 0;

which seems to work nicely in the Chrome30, IE7 and IE9 browsers I tested with.

Source: Solved: IE7 Negative Text-Indent CSS Bug

score 0 · Answer 2 · answered Jul 30 '13 at 07:04

0

add this to your css

#logo a{display:block;}

answered Jul 30 '13 at 07:04

Abdul Malik

2,632
1
18
31

score 0 · Answer 3 · answered Jul 30 '13 at 07:05

0

Define This css

#logo a{
display:inline-block;  // remove this line
display:block;  // add this line
}

answered Jul 30 '13 at 07:05

Rohit Azad Malik

31,410
17
69
97

score 0 · Answer 4 · answered Jul 30 '13 at 07:54

That's because inline-block property isn't fully supported in IE7.

If for some reason you absolutely need the anchor inside the logo container to be an inline-block element for the major browsers, you can leave the display: inline-block rule and add a hack for IE7 like this:

#logo a {
    display: inline-block;
    *display: block;
}

LOGO image not rendered within Header in IE7

4 Answers4