Logo Graphic Is Clipped In IE8

HTML & CSS
1

I have a logo located in the top left corner and it is clipped off or trimmed on the bottom part when I view the page in Safari, Chrome and IE 8… but looks okay in IE7. What gives? Why would it do this? Here is a link to the page in question.

LINK-

Thanks in advance to all that help!
Todd

2

After looking at your logo image again it looks like you are wanting the overlap. In that case you could drag the banner up with a neg top margin in addition to what I just posted.

#banner  {
background:url("../i/gfx_banner_bkg.jpg") no-repeat 0 0 ;
height:378px;
[B]margin-top:-27px;[/B]
padding:34px 0 0;
width:960px;
}

Not sure if that is what you are after though.

3

Ralph,

The link to the page in question has not changed. It is still the same page.

4

I have added the height to the #header div and the negative margin-top to the #banner div and all looks well in every browser except IE6.

Here is a snapshot of the banner with its position shifted down a bit.

996×608 108 KB

5

Rayzur,

That did the trick! I should have tried this earlier but I wasn’t thinking correctly. I REALLY appreciate your help and sticking with me.

I am not sure why the links are not working. I tested them on my end and they are working properly. Again, thank you, thank you, thank you!

6

Hi,
You have a “double margin bug” going on in IE6. You have floated the “#nav li a” left with a left margin. It is causing the list items to drop down to a new line. Did you notice that the last couple of links were not visible?

#nav li a, 
#nav li a:link, 
#nav li a:visited { 
text-decoration: none; 
height: 38px; 
display: block; 
[B]margin: 18px 0 0 20px;[/B] 
padding: 0; 
font: bold 13px/38px Helvetica, Arial, sans-serif; 
color: #000; 
text-shadow: #FFF 0 2px 0; 
[B]float: left;[/B] 
[COLOR=Blue]display:inline;/*fix IE6 double margin bug*/[/COLOR]
}

Also when you set up an override for IE6 it needs to come AFTER the original selector in the cascade.

[B]#nav [/B]{ 
overflow: hidden; 
list-style: none; 
margin: 0 0 0 12px; 
}
[B]* html #nav[/B] {[COLOR=Blue] /*IE6*/[/COLOR]
height: 1%; 
overflow: visible; 
}
7

all looks well in every browser except IE6.

Try setting “haslayout” on #nav for IE6. It is always important that a parent with child floats has-layout. Your LIs’ are floated.

You have overflow:hidden on #nav and that is setting “haslayout” for IE7 and enclosing the floats in modern browsers. It does not trip haslayout for IE6 though.

* html #nav { /*IE6 haslayout*/
height:1%;
overflow:visible;
}
8

Hi,
Your header div is not containing it’s floats. Your h1 is floated left and the “h1 a” has a height of 101px on it.

[B]#logo a[/B], #logo a:link, #logo a:visited {
background:url("../i/gfx_logo.png") no-repeat scroll 0 0 transparent;
display:block;
[B]height:101px;[/B]
text-indent:-9999em;
width:271px;
z-index:999;
}

You need to set haslayout on the header for IE6/7 and height will do that. Just make it the same as your “h1 a”


#header {
[B]height:101px;[/B]
}

That should work for all browsers.

9

This seems to mess things up for every browser. I am going to remove the margin top and go back to the previous version that worked in all browsers except for IE6… Still wondering why it is doing this. Maybe I should add a condition just for IE6?

10

If you change the page you linked to we can look at IE6. Better to have IE8 working first, IMO.

11

I have added this new code to the CSS document and I still see the same results in the IE6 browser only.

12

I am going to remove the margin top and go back to the previous version that worked in all browsers except for IE6… Still wondering why it is doing this. Maybe I should add a condition just for IE6?

IE6 treats height as if it were min-height. You have 101px height on your anchor so IE6 is going to stretch the header to accommodate it.

This seems to mess things up for every browser

I had mentioned that it needed to be used along with height 101px on the header. Did you do that? I can’t get your page to load now for some reason.

In that case you could drag the banner up with a neg top margin in addition to what I just posted.

13

This works well in IE 8 but now the IE6 browser shows the DIV banner pushed down as well as everything beneath it. Would I need to add something to the ie.css style sheet?

14 
#header {
    [COLOR="Red"]height: 74px;[/COLOR]
}