header h1 image not displaying properly in IE 6/7.

nickHiebert · 12-08-2009, 05:19 PM

Here is my site:

Code:

http://nickhiebert.com/

CSS for IE6:

Code:

#header h1 {
	height: 30px; 
	line-height: 30px;
	vertical-align:text-top;
	text-indent: 0;
}

CSS for IE7:

Code:

#header h1 {
	height: 92px;
	width: 304px;
	margin-right: 300px;
	margin-bottom: -89px;
	line-height: 18px; 
}

Another thing that may be triggering the problem in the HTML. If i put my title in such as my name like: <div id="header">
<h1><a href="http://nickhiebert.com/">Nick Hiebert<img src="images/logo.png" alt="header h1"/></a></h1> it just makes a bigger space (on the bottom between the banner and the nav) To note: also that the header h1 img is clickable for my home page.

Code:

<div id="header">
        	<h1><a href="http://nickhiebert.com/"><img src="images/logo.png" alt="header h1"/></a></h1>

nickHiebert · 12-08-2009, 05:33 PM

IE 6:

IE 7:

Excavator · 12-08-2009, 05:54 PM

Hello nickHiebert,
I've never liked conditional comments and 99.999% they are unnecessary.

I only have IE8 placed into IE7mode using developer tools to view this in but removing this bit from css/styleie7.css, quoted in red below, makes it display correctly -

Code:

/*CSS File for Internet Explorer 7*/
/*Header*/
#header h1 {
	height: 92px;
	width: 304px;
	margin-right: 300px;
	margin-bottom: -89px;
	line-height: 18px; 
}

nickHiebert · 12-08-2009, 07:11 PM

Thanks that worked.