4 replies [Last post]
Martagnan
Offline
Regular
uk
Last seen: 12 years 41 weeks ago
uk
Joined: 2003-08-27
Posts: 21
Points: 0

Hello,
I need this structure to fit together pixel perfect accross ALL browsers... im almost there!!! the container DIV appears to be 2 pixels too wide in everything except IE. Any ideas please??

This is the HTML

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="/style/newstyle.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="container">
<div id="header"></div>
<div id="topnav"></div>
<div id="menu"></div>
<div id="content"></div>
<div id="clearit"></div>
</div>



</body>
</html>

...and the CSS..

body {
margin: 0;
padding: 0;
text-align: center;
}


html {
margin: 0;
padding: 0;
text-align: center;
}

#container {
margin: 0 auto;
border: 1px solid #999;
width: 792px;
}


#header {
height: 100px;
background-color: #CCC;
width: 790px;
}



#topnav {
width: 790px;
height: 20px;
background-color: #999;
}

#menu {
display: block;
float: left;
margin: 0;
padding: 0;
width: 160px;
height: 100px;
background-color: #DDD;
}

#content {
float: left;
margin: 0;
padding: 0;
height: 100px;
background-color: #EEE;
width: 630px;
}

#clearit { /* helps mozilla */
display: block;
clear: both;
}

Any help is much appreciated thanks!

insin
insin's picture
Offline
Enthusiast
Belfast, NI
Last seen: 16 years 10 weeks ago
Belfast, NI
Joined: 2003-05-07
Posts: 57
Points: 0

Perfect in IE 5+ but just 2px overhang in others

The XML prolog forces IE6 to use Quirks Mode (which uses a broken box model) -IE5 always uses the broken boxmodel, but try removing this line and tell us what happens to the page in IE6:

<?xml version="1.0" encoding="iso-8859-1"?>

If you want the final width of the container div to be 792px, change the width attribute to 790px:

#container {
margin: 0 auto;
border: 1px solid #999;
width: 790px;
} 

Remember that final width = margin + border + padding + width

If you want the width to be the same in IE5, you will have to use the "box model hack" - Google for it if you're not familiar with it.

A Pedant Writes...
Into the mountain,
I will fall.

modeman
Offline
newbie
Texas
Last seen: 15 years 45 weeks ago
Texas
Joined: 2003-09-10
Posts: 2
Points: 0

Pixel Overhang

insin is spot on...IE will add 1 extra pixel to viewbox...just in case you use right margin 0...

Thank You to insin, I didn't know about the DOC type issue...

Cheers,
modeman

Martagnan
Offline
Regular
uk
Last seen: 12 years 41 weeks ago
uk
Joined: 2003-08-27
Posts: 21
Points: 0

Thankyou - it works!

Thanks for your time... I removed the XML line and it now works just great!

Pob
Offline
Enthusiast
Hampshire UK
Last seen: 8 years 6 weeks ago
Hampshire UK
Timezone: GMT+1
Joined: 2003-08-16
Posts: 60
Points: 5

Perfect in IE 5+ but just 2px overhang in others

Hi,

Quote:

Thanks for your time... I removed the XML line and it now works just great!

It works great in IE6 but will be broken in IE5 if you don't account for the broken box model as mentioned above.

To avoid having to use the box model hack (or as an alternative) remember to avoid setting padding and borders at the same time as you specify heights and widths. By careful planning you can avoid the box model problems if you transfer your padding and borders to inner elements.

In your code above there isn't an inner element that you can use easily so you can just create another div to use to supply the border etc. As long as you don't specify a width or height the div will expand to fill the parent.

e.g.

body { 
margin: 0; 
padding: 0; 
text-align: center; 
} 

html { 
margin: 0; 
padding: 0; 
text-align: center; 
} 

#container { 
margin: 0 auto; 
width: 792px; 
} 
[b].border{border: 1px solid #999;}[/b]

#header { 
height: 100px; 
background-color: #CCC; 
width: 790px; 
} 

#topnav { 
width: 790px; 
height: 20px; 
background-color: #999; 
} 

#menu { 
display: block; 
float: left; 
margin: 0; 
padding: 0; 
width: 160px; 
height: 100px; 
background-color: #DDD; 
} 

#content { 
float: left; 
margin: 0; 
padding: 0; 
height: 100px; 
background-color: #EEE; 
width: 630px; 
} 

#clearit { /* helps mozilla */ 
display: block; 
clear: both; 
} 

html:

<div id="container"> 
<div class="border">
	<div id="header"></div> 
	<div id="topnav"></div> 
	<div id="menu"></div> 
	<div id="content"></div> 
	<div id="clearit"></div> 
</div>
</div> 

Some people prefer to use the voice family hack as it does not affect the html as there is no need to change the html to accomodate it. However I prefer to avoid using the voice family hack hack when existing valid markup can do the job.

If you had taken the broken box model into account then apologies for posting but it looked as though you had missed it in your last post.

Paul