Hey there<br />
<br />
I am creating a website using XHTML. I am creating the layout using divs with formatting defined by CSS. Now, I have defined a div to contain the whole page, and given it a background colour, black. Now when I create the divs to hold content within the page container div, everything displays fine in IE6. However, when I load the page in a Gecko browser (Mozilla, NS 7), between each of the content divs, a linespace is displayed, showing through the page container background colour, which is not what I want. I want the divs to join with no space between them. (IE6 does this, Gecko wont.) I have tried using margins and paddings of 0px for the divs, yet it makes no difference. Any ideas on what the problem might be?<br />
<br />
Cheers,<br />
<br />
Ben<!--content-->Let's see some code.<!--content-->I dont see any black or yellow background in the following example. Tested with IE5, IE6, NS7, Opera7.1 (all on Win2000). Adding "margin:0;" is optional and all the divs will all touch each other.<br />
<br />
The only thing I can think of is the 1px error in Moz. Also see<br />
<!-- m --><a class="postlink" href="http://www.positioniseverything.net/mozshift.html">http://www.positioniseverything.net/mozshift.html</a><!-- m --><br />
<!-- m --><a class="postlink" href="http://www.positioniseverything.net/round-error.html">http://www.positioniseverything.net/round-error.html</a><!-- m --><br />
<br />
--- My code, works fine with Moz, IE, Opera ---<br />
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"<br />
"http://www.w3.org/TR/html4/strict.dtd"><br />
<br />
<html><br />
<head><br />
<title>Lipsum</title><br />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><br />
</head><br />
<br />
<body style="background: black; color: white"><br />
<br />
<div style="background: yellow; color: red;"><br />
<div style="background: white; color: black; width: 500px; margin: 0; padding: 0">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec id tortor in nunc vestibulum dapibus. Mauris ultrices cursus lectus. Maecenas rhoncus aliquet ligula. In ac augue. Nulla dapibus tortor eget est.</div><br />
<div style="background: #ccc; color: black;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec id tortor in nunc vestibulum dapibus. Mauris ultrices cursus lectus. Maecenas rhoncus aliquet ligula. In ac augue. Nulla dapibus tortor eget est.</div><br />
<div style="background: white; color: black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec id tortor in nunc vestibulum dapibus. Mauris ultrices cursus lectus. Maecenas rhoncus aliquet ligula. In ac augue. Nulla dapibus tortor eget est.</div><br />
</div><br />
<br />
</body><!--content-->Thanks for replying, sorry I didn't get back sooner, but I am away at school all week and this site is filtered
<br />
<br />
Here's some code that reproduces the error on my machine, I've tried with and without the margin/padding set to 0, but that makes no difference (as it shouldn't).<br />
<br />
<?xml version="1.0" encoding="iso-8859-1"?><br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><br />
<head><br />
<title>div test</title><br />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><br />
</head><br />
<br />
<body><br />
<div id="pageContainer" style="width:700px; background-color:#000000;"><br />
<br />
<div id="div1" style="width:700px; height:50px; background-color:#ffffff; margin:0px;padding:0px"><br />
<p>This is Div1</p><br />
</div><br />
<div id="div2" style="width:700px; height:50px; background-color:#ff0000; margin:0px;padding:0px"><br />
<p>This is div2!</p><br />
</div><br />
<br />
</div><!--pageContainer--><br />
</body><br />
</html><br />
<br />
I created an image showing visually the problem I'm having. It's <br />
here (<!-- m --><a class="postlink" href="http://www.impact-webdesign.co.uk/mozilla.gif">http://www.impact-webdesign.co.uk/mozilla.gif</a><!-- m -->) . It's ~40KB.<br />
<br />
Thanks!<!--content-->Original<br />
<div id="div2"...> <br />
<p>This is div2!</p> <br />
</div><br />
<br />
Modified:<br />
<div id="div2"...> <br />
<p style="margin:0">This is div2!</p> <br />
</div><br />
or<br />
<p style="margin-top: 0">This is div2!</p><br />
or<br />
<div id="div2"...>This is div2!</div><!--content-->IMO, none of the browsers are wrong. Just a matter of how margin of <p> is implemented.<!--content-->
<br />
I am creating a website using XHTML. I am creating the layout using divs with formatting defined by CSS. Now, I have defined a div to contain the whole page, and given it a background colour, black. Now when I create the divs to hold content within the page container div, everything displays fine in IE6. However, when I load the page in a Gecko browser (Mozilla, NS 7), between each of the content divs, a linespace is displayed, showing through the page container background colour, which is not what I want. I want the divs to join with no space between them. (IE6 does this, Gecko wont.) I have tried using margins and paddings of 0px for the divs, yet it makes no difference. Any ideas on what the problem might be?<br />
<br />
Cheers,<br />
<br />
Ben<!--content-->Let's see some code.<!--content-->I dont see any black or yellow background in the following example. Tested with IE5, IE6, NS7, Opera7.1 (all on Win2000). Adding "margin:0;" is optional and all the divs will all touch each other.<br />
<br />
The only thing I can think of is the 1px error in Moz. Also see<br />
<!-- m --><a class="postlink" href="http://www.positioniseverything.net/mozshift.html">http://www.positioniseverything.net/mozshift.html</a><!-- m --><br />
<!-- m --><a class="postlink" href="http://www.positioniseverything.net/round-error.html">http://www.positioniseverything.net/round-error.html</a><!-- m --><br />
<br />
--- My code, works fine with Moz, IE, Opera ---<br />
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"<br />
"http://www.w3.org/TR/html4/strict.dtd"><br />
<br />
<html><br />
<head><br />
<title>Lipsum</title><br />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><br />
</head><br />
<br />
<body style="background: black; color: white"><br />
<br />
<div style="background: yellow; color: red;"><br />
<div style="background: white; color: black; width: 500px; margin: 0; padding: 0">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec id tortor in nunc vestibulum dapibus. Mauris ultrices cursus lectus. Maecenas rhoncus aliquet ligula. In ac augue. Nulla dapibus tortor eget est.</div><br />
<div style="background: #ccc; color: black;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec id tortor in nunc vestibulum dapibus. Mauris ultrices cursus lectus. Maecenas rhoncus aliquet ligula. In ac augue. Nulla dapibus tortor eget est.</div><br />
<div style="background: white; color: black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec id tortor in nunc vestibulum dapibus. Mauris ultrices cursus lectus. Maecenas rhoncus aliquet ligula. In ac augue. Nulla dapibus tortor eget est.</div><br />
</div><br />
<br />
</body><!--content-->Thanks for replying, sorry I didn't get back sooner, but I am away at school all week and this site is filtered
<br /><br />
Here's some code that reproduces the error on my machine, I've tried with and without the margin/padding set to 0, but that makes no difference (as it shouldn't).<br />
<br />
<?xml version="1.0" encoding="iso-8859-1"?><br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><br />
<head><br />
<title>div test</title><br />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><br />
</head><br />
<br />
<body><br />
<div id="pageContainer" style="width:700px; background-color:#000000;"><br />
<br />
<div id="div1" style="width:700px; height:50px; background-color:#ffffff; margin:0px;padding:0px"><br />
<p>This is Div1</p><br />
</div><br />
<div id="div2" style="width:700px; height:50px; background-color:#ff0000; margin:0px;padding:0px"><br />
<p>This is div2!</p><br />
</div><br />
<br />
</div><!--pageContainer--><br />
</body><br />
</html><br />
<br />
I created an image showing visually the problem I'm having. It's <br />
here (<!-- m --><a class="postlink" href="http://www.impact-webdesign.co.uk/mozilla.gif">http://www.impact-webdesign.co.uk/mozilla.gif</a><!-- m -->) . It's ~40KB.<br />
<br />
Thanks!<!--content-->Original<br />
<div id="div2"...> <br />
<p>This is div2!</p> <br />
</div><br />
<br />
Modified:<br />
<div id="div2"...> <br />
<p style="margin:0">This is div2!</p> <br />
</div><br />
or<br />
<p style="margin-top: 0">This is div2!</p><br />
or<br />
<div id="div2"...>This is div2!</div><!--content-->IMO, none of the browsers are wrong. Just a matter of how margin of <p> is implemented.<!--content-->