CSS Forum

**goodness me** · 08-07-2008, 10:06 PM

Hi,

I’ve got two issues that I hoping you can help me with. I’ve tried looking on the web to find out the answers myself, but I’m totally lost.

Issue 1:
IE6 and Firefox have different div heights; Firefox has a bigger height than IE6.

I prefer Firefoxe’s look, so hopefully that’s the one that IE6 can respect.

The HTML code:

<div id="header">
<img style="float: left" src="photo.JPEG"
alt="Real Estate with Tim Golder BA; Dip. Tching" class="photo"/>
<h1>words?</h1>
<p style="font-family: verdana, arial, sans-serif; font-size: x-large; font-weight: light; text-align: center">words,</p>
<p style="font-family: times new roman, trebuchet, sans-serif; font-size: x-large; font-weight: bold; text-align: center"> words <span style="color:red">WORD</span>,
right <span style="color:red">WORD</span>, right <span style="color:red">WORD</span>?</p>
<p style="font-size: large; text-align: center"><span style="color:brown">words &nbsp</span> <span style="font-size:large; font-style: italic; text-align: center”>words <span style="color: blue; font-family: verdana, arial, sans serif">words</span> for words</p>
</div> <!...header...>

The CSS code:

#header
{left: 0; width: 964px; margin: 0 0 0 4px; padding: 10px 0 10px 10px; background-color: khaki; line-height: 1.3em; }

Issue 2

I also have another div that has the same problem (ie: deeper height in Firefox than in IE6), but this time the div only holds 2 words; nothing else is in the div.

The HTML code:

<div id="title">
<p>words</p>
</div>

The CSS code:

#title
{ border: 1px solid red; left: 0; background-color: yellow; width: 784px; color: black; text-align: center; font-family: verdana; font-size: x-large; font-weight: light; font-style: italic; height: 1%}

All suggestions are welcome and I really appreciate your assistance.

**goodness me** · 08-08-2008, 09:50 AM

An update: I've got rid of everything including the photo on the page except for the header div with words. And even then the text sits closer to the top border in ie6 than in firefox. Why? Is this usual and can it be fixed easily?

This is all the code I have got now:

HTML
<!DOCTYPE HTML PUBLIC "-//w3c/DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/htm14/loose.dtd">

<html>
<head>
<link rel="stylesheet" type="text/css" href="new.css" />
<title>Some words</title>
</head>
<body>
<div id="header">
<h1 style="font-weight: bold; text-align: center">Words</h1>
<p style="font-family: verdana, arial, sans-serif; font-size: x-large; font-weight: light; text-align: center">Some words</p>
<p style="font-family: times new roman, trebuchet, sans-serif; font-size: x-large; font-weight: bold; text-align: center">Some words<span style="color:red">Some words</span>,
right <span style="color:red">A word</span>A word<span style="color:red">A word</span>?</p>
<p style="font-size: large; text-align: center">Some words<span style="font-size:large; font-style: italic">Some words</span><span style="font-family: verdana">Some words</span></p>
</div> <!...header...>

</body>
</html>

CSS

#header {height: 250px; margin: 0px; padding-top: 17px; padding-left: 17px; background-color: khaki;
border: 1px solid green; line-height: 1.7em}

Also: Why would the last line in the header not text-align: center (in firefox) unless I use line-height: 1.3em?

Believe me, any suggestions at all are more than welcome.

**LadynRed** · 08-08-2008, 05:35 PM

Resign yourself to the fact that IE6 is a red-headed step child in the browser world and does things utterly different from it's more standards-compliant competition.

#1 - make sure you CLEAR your floats.
- The left:0 is ineffective unless the element is positioned. You need to zero out the margins and padding on the body like this:
body{margin: 0; padding: 0;}
- you must put a the width and height properties on the image in your html, especially if you're going to float the image - it needs the defined dimensions.

#2 - the words in #title ARE centered, but because the width of #title is not as wide as #header, it's centering the text within the 784px box. removed the width or make it equal to #header.

**goodness me** · 08-08-2008, 06:49 PM

Ladynred,

I love the way you explain things; you makes things very clear to me. Thanks soooo much.

I now have a far clearer understanding of the relationship between Left, Top and Position than before.

It also saves me time because I'll only use Left and Top appropriately instead of putting it in 'for safety' as 'extra backup' to make sure it stays where it should.

Removing the width makes absolute sense now that you've expressed it to me. So issue 2 in my first post has also been resolved.

Interestingly, when I associated Width of <p> (in the header) with the width of the Header itself, <p> dropped down and aligned with the bottom of the photo. Just like it would if Clear: right was applied. But it has no effect in firefox.

So, I'm guessing the width of the photo has no effect on the width of the div in firefox whereas ie6 does include the width of the photo in the div?

Last night I was up until 3am investigating conditional statements (IF IE6) and am wondering if that's the way I should go - or am I travelling ahead of myself. I also don't know if conditional statements slow down download speeds.

Once again Ladynred, I can't express enough thanks for your help. You really do help me learn.

**LadynRed** · 08-08-2008, 07:51 PM

Quote:

whereas ie6 does include the width of the photo in the div?

Yes, IE6 incorrectly "shrinkwraps" around it's contents instead of sticking to the width you defined.

Quote:

investigating conditional statements (IF IE6) and am wondering if that's the way I should go

Conditional comments are definitely the way to go.

I define mine like this:

Quote:

So the first one targets any IE version below 7, and the 2nd one targets any version of IE ABOVE 7 - and my 'ie7fixes' file is almost always empty, haven't had to hack it yet.

**goodness me** · 08-09-2008, 02:24 AM

Ladynred,

Shrinkwrap's a good way to express it and it further clarifies my understanding about ie6's response to Width: 'x' . Also thanks for stating the most important conditional statements to me.

When I get back later tonight I'm going to try it out on the ie6 header; I know it sounds bazaar but I'm quite excited about this and I'm really enjoying the thought of the exercise.

Thanks for taking the time to offer your help Ladynred; you're neat.

**LadynRed** · 08-09-2008, 12:34 PM

Thanks, and you're welcome