Width difference between FireFox and IE

[Primal]

I've been working on a website for a friend of mine and I'm about to pull my hair out. I don't ever remember having this much trouble before.

I've validated the CSS and HTML (it validates except for the added code at bottom by Yahoo Webhosting), but I know that doesn't mean there isn't a problem. I looked over the code myself numerous times and can't find a problem either. Look at this site (http://barnesprocarpetcare.com/test.html) in Firefox first. It looks the way I want it too there. Now go take a look at the site in IE. (By the way, the blue background in IE is not going to stay. It's there to show where the container div is.) What the heck is going on?!?!

It makes absolutely no sense to me. Why does IE seem to add width? Also, why isn't the container div's background color showing up in Firefox?

[Tentuxius]

I've looked at the page and see no width problems - I can see the differnece between browsers though. IE has a different width due to it's scroll bar which is there if it needs to be or not. This may make it appear different.

As for the background - this is probably due to the fact Firefox keeps to standards and IE doesn't - they ignore standards. Dabble and change things around and try to ensure you're using correct elements within each other.

[Primal]

Thanks, Tentuxius, for looking at the site. Can you see how the logo at the top is not in the same spot in different browsers, and how the title is not lined up in IE? I've already been dabbling in it so long that it's gotten to the point where it's like "dabble, dabble, dab-Oh for Christ's sake!!!" :o

Anyway, I still need help if someone cares to take a look. Lavalamp, I sure could use your keen eye right now.

[Tentuxius]

Still can't see a difference, here's some screenshots:

http://streets.plus.com/screen-1.jpg

http://streets.plus.com/screen-2.jpg

[Primal]

Thanks for posting the screenshots. I can see that I wasn't clear enough on my description. Don't look at the photo, the link box, or the box below the photo. Those stay relatively the same between browsers. Look at the position of the logo above the link box. It clearly moves from side to side between browsers. Also, the title next to the logo moves in and out of alignment between browsers. Look also at the amount of blue space to the right of the photo in IE. That should not be there. If you look closely in Firefox and IE, you'll see that the boxes, logo, etc. are lined up in Firefox, but all the content EXCEPT the light blue space is slightly more to the left in IE. That's because of the added width in IE. Why is that there?

[Daniel T]

Hmm... very weird. I can't test it out right now, but you could try putting this at the top of your CSS file:* {
margin: 0;
padding: 0;
}

[Tentuxius]

Yeah that should fix it... :rolleyes:

[Primal]

Dan, I looked at your site and did a little research. I looked at your source and your arctic stylesheet. Looking at the footer id, I noticed that the width is 662px, with 5px padding on the left and right. Now the full width of the content is 674px, using the banner width you specified. I added it all up: 662px for the div, plus 2px for the border on either side, plus the 5px padding, equals 674px. Now that's where my question is. Maybe I'm mistaken and have learned the CSS box model wrong... I thought padding only affected content INSIDE the div, not the overall width. Is that wrong? I think the answer to that may help me.

[Daniel T]

The padding is added on to the width or height of the obeject if there is a fixed width or height specified. For example, if I need to fit a box inside of a container that is 400x200, and I want 5px padding, the dimensions of the box will be 390x190. IE sometimes screws this up, in which case, you could use a hack, like the following(though, it should only be used as a last resort):
#box {
width: 390px !important; /* the width firefox will use */
width: 400px; /* the width IE will use */
}
For some reason though, IE only seems to screw it up in some cases, but not others. Another way to get around the problem is to create another div inside the other div, and put a margin of 5px on it, rather than 5px padding on the outer div. Ryan (http://www.ryanbrill.com) wrote an entry explaining the CSS box model (http://ryanbrill.com/archives/css_box_model_and_you/) that you may find useful.

[Primal]

Thanks, Dan. I think I'll try the div within a div suggestion. (Wow! You're prophetic! It's like Ezekiel's wheel within a wheel...)

Anyway, that's the box model I remember but I never knew it's little quirk when it came to fixed widths. Thanks for clearing that up. A question about that hack, in case I use it one day: does the order of the two widths matter? I mean, does Firefox have to come first and THEN IE? Or can it be the other way around?

[Daniel T]

Originally posted by Primal
A question about that hack, in case I use it one day: does the order of the two widths matter? I mean, does Firefox have to come first and THEN IE? Or can it be the other way around? Yes, the one with !important must come first, because IE always reads the last width attribute, because it does not recognize !imporant. Firefox(and other standards browsers) see !important and know not to pay any attention to anymore width attributes in that definition.

[DaveSW]

Personally I wouldn't bother with the Hacks because the next generation of browsers may be different.

My way is simple (and I beliveve others have started using it too):
One Div with your width applied to it.
Another div inside with the padding applied to it (it will expand to fill the width of it's parent)

e.g.
<div style="width: 250px;">
<div style="padding: 5px;>
Content
</div>
</div>

You can do similar things to apply margins etc.
This will render the same in Mozilla and all the Gecko browsers, Opera and IE.

[Primal]

Dave, I've got a question for you. When using your method, The text inside the second div is always centered vertically. Know how to get the text to go to the top vertically? That's at the top BELOW the padding amount, of course.

[DaveSW]

is it the padding on the second div?

if you put this code in then it's top left:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
</head>
<body>
<div style="padding: 0; width: 250px; border: 1px solid #000;">
<div style="padding: 0px;">
Content
<br />
<br />
more content
</div>
</div>
</body>
</html>

[Primal]

Yes, if I specify 0 padding on both divs, then the text moves to the top left. But as soon as I add padding to the second div, the text moves to the center vertically.

[DaveSW]

I think it's centered because it has equal padding top and bottom...

try using padding-top etc.

[Tentuxius]

tried:
vertical-align: top;
text-align: left;
INSIDE the div in which you want the text to be in the middle. I agree with DaveSW though - shouldn't use hacks. Then again I disagree with the entire industry - why can't you just all agree? This entire HTML, DOM, CSS stuff - big mess c'mon lets sort it out guys!