[RESOLVED] Spacing Issue IE/Firefox - HTML Forums

jfuji · 10-28-2009, 09:22 PM

Hi all,

So after a bit of research, I discovered that I have a spacing issue in IE, but not in Firefox. Here's what it looks like:

I have a container DIV, set to 840px with two DIV elements floating on the top row. The width of these two elements equals 840px.

In Firefox, there are no issues. Both elements fit fine. In IE7, The second element has been pushed down below the first element. When I increase the size of the container DIV, the second element moves up to where it should be. I thought I might leave it like that, but it makes the Firefox version look poorly spaced.

I understand that different browsers interpret certain things in different ways, but usually there is a way (without writing a script statement to differentiate between the browsers) to send both browsers the message and have them interpret it in the same way.

The HTML document itself is dirt simple, as it is a template that was create by someone else. All of the formatting takes place in the CSS, so I'm wondering which attributes I need to modify/add/subtract to get the correct interpretation from both browsers.

Here is the code:

Code:

/* structure */
.container {
	font-size: 1.2em;
	background: url(img/bgcontainer.gif) repeat-y;
	width: 840px;
	margin-right: auto;
	margin-left: auto;
	border: 12px solid #222;
}

/* header */
.header {
	float: left;
	width: 640px;
	background: url(img/header.jpg) no-repeat;
	font: normal 2.4em Verdana,sans-serif;
	line-height: 150px;
	text-align: center;	
}

.main_right {
	float: right;
	width: 200px;
	color: #CCC;
}

Thank you for any help you can provide. If you need more info, please let me know.

Excavator · 10-29-2009, 01:07 AM

Hello jfuji,
I made a quick demo and could not find any browser it doesn't work in. Even though your code is simple it could still have an error. Maybe your not using a DocType?

Here's my version that works -

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
	font: 14px "Comic Sans MS";
	background: #FC6;
}
* {
	margin: 0;
	padding: 0;
	border: none;
}
.container {
	font-size: 1.2em;
	background: url(img/bgcontainer.gif) repeat-y;
	width: 840px;
	margin: 0 auto;
	border: 12px solid #222;
	overflow: auto;
}
.header {
	float: left;
	width: 640px;
	height: 200px;
	background: #f00 url(img/header.jpg) no-repeat;
	font: normal 2.4em Verdana,sans-serif;
	line-height: 150px;
	text-align: center;	
}
.main_right {
	float: right;
	width: 200px;
	height: 200px;
	color: #CCC;
	background: #00f;
}
</style>
</head>
<body>
    <div class="container">
    	<div class="header">
        <!--end header--></div>
        	<div class="main_right">
            <!--end main_right--></div>
    <!--end container--></div>
</body>
</html>

jfuji · 10-29-2009, 12:12 PM

Quote:

Originally Posted by Excavator

Hello jfuji,
I made a quick demo and could not find any browser it doesn't work in. Even though your code is simple it could still have an error. Maybe your not using a DocType?

Thank you, Excavator! It was the DocType. I ended up figuring it out late last night. It seems that IE's "width" handling is the width plus any border/padding, and Firefox includes that in the width. Adding the DocType tag resolved the issue completely. I totally missed it because the rest of the code was so simple, and I moved on to the CSS.

Thanks again!