PDA

View Full Version : CSS: Line-height problem in ONLY IE6(and possibly before)



ffmariners
Apr 10th, 2007, 12:59 AM
http://www.frank-the-tank.com/ltscm/css4v3/index.php
http://www.frank-the-tank.com/ltscm/css4v3/default.css

Code in question (I think)

.header {
float: left;
width: 640px;
background: url(img/header2.jpg) no-repeat;
font: normal 2.4em Verdana,sans-serif;
line-height: 150px;
vertical-align:top;
text-align:right;
border-bottom:3px solid #cc0000;
}


For some reason in firefox, opera, and IE 7 the header is displayed at the full 150px

In IE6... it is not


I DO have a spacer.gif in the header so that ff/op/ie7 dont ignore it:

<div id="top" class="header"><img src="img/spacer.gif" width="15" height="1" /> </div>

koyama
Apr 10th, 2007, 01:19 AM
You are going about this in the wrong way. No need for spacer-gif's anymore.


.header {
float: left;
width: 640px;
background: url(img/header2.jpg) no-repeat;
/* font: normal 2.4em Verdana,sans-serif; */
/* line-height: 150px; */
height: 150px;
/* vertical-align:top; */
/* text-align:right; */
border-bottom:3px solid #cc0000;
}



<div id="top" class="header"></div>

Moreover, I would use assign an id instead of a class since the element will never appear more than once on a page.

ffmariners
Apr 10th, 2007, 01:38 AM
guess you are my savior for the day :)

Yeah I reassigned the id as header and got rid of the .top id... you are right about the class... but it originally was like that because there were two overlapping divs essentially... one with an image... one with plain text over it

then I just made the banner inclusive of the text... so no need for the .top anymore

thanks for pointing it out

for some reason I thought line-height was appropriate there instead of height

thanks x 2!

Frank