Pixel and percentage widths

M1kael · 07-23-2007, 05:50 PM

I am having a problem with my width percentages. I have a top navigation bar with a fixed size box inside on the left, then 4 dynamic sized boxes. I have been tweaking it, and it now works semi-correctly in IE, but not Opera or FF. Here is the simplified code:

Code:

<?xml version="1.0" encoding="utf-8"?>
<!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>Welcome!</title>
	<meta http-equiv="content-type" 
		content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />

  <style TYPE="text/css">

	#container {
		margin: 0px;
		padding: 0px;
		width: 100%;
		border: 1px solid #000;
	}

	#fixBox {
		float: left;
		width: 150px;
		height: 100px;
		border: 1px solid #000;
	}

	#dynamicBoxContainer {
		width: 100%;
		border: 1px dotted #0f0;
	}

	#dynamicBox {
		margin-left: 8px;
		float: left;
		width: 23%;
		height: 100px;
		border: 1px solid #000;
	}


  </style>
</head>

<body>
<div id="container">
	<div id="fixBox"></div>
	<div id="dynamicBoxContainer">
		<div id="dynamicBox"></div>
		<div id="dynamicBox"></div>
		<div id="dynamicBox"></div>
		<div id="dynamicBox"></div>
	</div>
</div>




</body>

</html>

I'm new to css, so any help would be greatly appreciated!

_Aerospace_Eng_ · 07-23-2007, 05:52 PM

Remove this

Code:

<?xml version="1.0" encoding="utf-8"?>

Its likely the reason why you can get it to work in IE but not the other browsers. IE6 is in quirks mode causing to render some stuff incorrectly. The general rule of thumb is to code for a good browser and tweak for IE. Make it look right in Firefox or Opera then tweak for IE.

M1kael · 07-23-2007, 06:16 PM

Thanks for the heads up. Although, my problem is only worse now, as it does not work for any browsers. Can anyone help me get this working correctly?

The idea is simple. Navigation bar with a fixed size search box on the left, and 4 link boxes that expand to fit the rest of the window length.

_Aerospace_Eng_ · 07-23-2007, 06:33 PM

Quote:

Originally Posted by M1kael

Thanks for the heads up. Although, my problem is only worse now, as it does not work for any browsers. Can anyone help me get this working correctly?

I figured it would be after you said you got it working in IE but not the other browsers. This is why again you getting working in a good browser and hack/tweak for IE. Try this

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>Welcome!</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style TYPE="text/css">
html, body {
margin:0;
padding:0;
}
#container {
border: 1px solid #000;
}

#fixBox {
float: left;
width: 150px;
height: 100px;
border: 1px solid #000;
}

#dynamicBoxContainer {
border: 1px dotted #0f0;
margin-left:160px;
}

#dynamicBox {
margin-left: 8px;
float: left;
display:inline;
width: 23%;
height: 100px;
border: 1px solid #000;
}

.clear {
clear:both;
font-size:0;
line-height:0;
}
</style>
<!--[if lte IE 6]>
<style type="text/css">
#fixBox {
margin-right:-3px;
}
#dynamicBoxContainer {
margin-left:8px;
height:1%;
}
</style>
<![endif]-->
</head>
<body>
<div id="container">
	<div id="fixBox"></div>
	<div id="dynamicBoxContainer">
		<div id="dynamicBox"></div>
		<div id="dynamicBox"></div>
		<div id="dynamicBox"></div>
		<div id="dynamicBox"></div>
		<div class="clear">&nbsp;</div>
	</div>
</div>
</body>
</html>

Compare it to what you have now. I didn't change much. Just a few widths. By default a block level element like a div takes up 100% width of its container. Explicitly setting the width and then adding the border makes it take up more than 100%. Borders add to overall width as does padding.

IE6 has this 3px gap bug explain here: http://www.positioniseverything.net/...reepxtest.html

I've already implemented this into your code using conditional comments.

I also fixed the double margin bug on #dynamicBox. http://www.positioniseverything.net/...ed-margin.html