What is the current method (or hack) for fixing CSS width problems?

**deffvaltez** · Feb 10, 2012 01:55

I played around with the padding and width of a single div and noticed the differences in size between Chrome and IE 8. Here is the code:

Code:

div {
    width: 100px;
    padding: 10px;
    border: 10px solid #000;
  }

So then I spent some time on google looking for tutorials that could fix this problem. One (dated) tutorial suggested this hack:

Code:

* html div {
    \width: 140px; 
    w\idth: 100px; 
  }

Then I found Tantek's Box Model hack and I will see if this works. But I'd like to know if you guys are familiar with modern box model hacks or actual CSS3 methods to make sure that everything looks the same in any browser. I am designing my practice site in XHTML strict and I have the classic problem of trying to correct my columns after I applied padding to them.

**ralph.m** · Feb 10, 2012 01:58

This is not a problem that I am aware of. It sounds like something from the IE5 days.

**RyanReese** · Feb 10, 2012 10:25

First of all you shouldn't even need to be coding for IE6 and down anymore these days (unless for some reason your site statistics show it htat way)

In IE5s box model, the width of margins/borders/padding isn't added up in total of width. It's subtracted from the total dimension.

If you aren't coding for IE5 but rather for IE6, and you are getting this issue. Most likely you are still in quirks mode somehow.

**deffvaltez** · Feb 10, 2012 11:44

Right now I am only using IE 8. I don't understand why the following layout looks different between IE8 and other browsers whenever I apply a padding of 6px to one of the content columns.

What's the best fix for this situation?

Conditional statements
CSS hack or Javascript hack
Should the columns be classes instead of divs?
Errors in the CSS code?

Stylesheet:

Code:

#wrapper {
	background-color: gray;
	width: 760px;
	margin:0 auto;
}
#header {
	background-color: orange;
}

#container {
	background-color: silver;
}
#mainCol {
	background-color: #ffffff;
	width: 560px;
	float: left;
	padding: 6px;
}
#rigCol{
	background-color: #99cc00;
	width: 200px;
	float: right;
}
#footer {
	background-color: #cc6600;
	clear: both;	
}

Website structure:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>2 Column Layout Example</title>
	<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
<div id="wrapper">
<div id="header">a</div>
<div id="container" class="clearfix">
	<div id="mainCol">aaaaaaaaaaaaaa aaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaa a</div>
	<div id="rigCol">a</div>
</div>
<div id="footer">a</div>
</div>
</body>
</html>

Thanks

**raw10** · Feb 10, 2012 14:14

What happens when you click the little "compatibility view" icon in IE 8? It's otherwise known as the "completely-hose-the-site button," but if for some reason you are in compatibility mode it may have switched to the IE box model instead of the standard box model.

Because of the IE fiasco that I just never set a padding or border on elements with a width. I don't trust IE 8 either, even though it's supposed to render pages with the standard box model. Users can still click that compatibility button.

**Paul O'B** · Feb 10, 2012 14:35

Hi,

Compatibility view won't trigger the broken box model in IE it just triggers an ie7 mode I believe which is still in standards mode and still uses the correct box model. Iit's only quirks mode that triggers the broken box model in ie6+. ( Ie5 is always in the broken box model mode but we can forget IE5 as it is dead and buried.)

There are a few simple reasons why you will have triggered quirks mode and it will be one of the following:

1) No doctype

2) Old html 4 transitional doctype without URI (or an even older doctype)

3) You have comments or code above the doctype

4) You have the xml declaration above the doctype in IE6

If you have done any of the above you will be in quirks mode. Just use a full modern doctype with no xml declaration and no comments or code above the doctype and then you will be in standards mode and use the correct box model.

**Paul O'B** · Feb 10, 2012 14:39

Originally Posted by deffvaltez

Right now I am only using IE 8. I don't understand why the following layout looks different between IE8 and other browsers whenever I apply a padding of 6px to one of the content columns.

It looks exactly the same to me in IE7,8, 9 and Firefox. Do you have a live link so we can test?

**deathshadow60** · Feb 11, 2012 08:28

1) are you using a reset? If not you may have default margins/paddings messing with you (since I'm not explicitly seeing them set).

2) perfect width on a layout tends to fail in many browsers, a negative margin on one of your elements can prevent 'perfect width' drop... though in your case, you've got one element with width, why does the other one need it? This is part of were I find it EASIER to design fluid, even if the overall layout is fixed.

3) raw10 hit it on the head, just don't declare padding/border same time as width... for example instead of declaring a side padding on the container, declare side MARGINS or padding on the children.

4) lose the stupid clearfix nonsense and just declare overflow and a haslayout trigger on your wrapper.

User Tag List

Thread: What is the current method (or hack) for fixing CSS width problems?

Thread Tools

Display

What is the current method (or hack) for fixing CSS width problems?

Bookmarks

Bookmarks

Posting Permissions