Logo Graphic Is Clipped In IE8

[Todd Temple]

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-
http://www.flynnelectriccompany.com/test/

Thanks in advance to all that help!
Todd

[ralph.m]

#header {
    height: 74px;
}

[Todd Temple]

#header {
    height: 74px;
}

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?

[ralph.m]

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

[Todd Temple]

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

Ralph,

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

[Rayzur]

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.

#logo a, #logo a:link, #logo a:visited {
background:url("../i/gfx_logo.png") no-repeat scroll 0 0 transparent;
display:block;
height:101px;
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 {
height:101px;
}

That should work for all browsers.

[Rayzur]

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;
margin-top:-27px;
padding:34px 0 0;
width:960px;
}

Not sure if that is what you are after though.

[Todd Temple]

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;
margin-top:-27px;
padding:34px 0 0;
width:960px;
}

Not sure if that is what you are after though.

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?

[Rayzur]

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.

[Todd Temple]

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.

[Rayzur]

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;
}

[Todd Temple]

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;
}

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

[Rayzur]

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; 
margin: 18px 0 0 20px; 
padding: 0; 
font: bold 13px/38px Helvetica, Arial, sans-serif; 
color: #000; 
text-shadow: #FFF 0 2px 0; 
float: left; 
display:inline;/*fix IE6 double margin bug*/
}

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

#nav { 
overflow: hidden; 
list-style: none; 
margin: 0 0 0 12px; 
}
* html #nav { /*IE6*/
height: 1%; 
overflow: visible; 
}

[Todd Temple]

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!