Chrome problem

Reg Wharf · Dec 5, 2010

Hi guys,
Using the following code:

<!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" lang="en" xml:lang="en">
<head>
<title>66-2col</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css" />

body {margin:20px;padding:0;background:#888;}

#container {width:780px;margin:0 auto;border:10px solid green;}
#header {height:90px;background:url(toppblu.png);}
#nav {height:20px;background:url(toppred.png);}
#right {width:600px;float:right;height:400px;background:#ffa;}
#left {width:180px;float:left;height:400px;background:#fff;}
#footer {clear:both;width:100%;height:30px;background:url(toppblu.png);}

h1 {font: normal 26px georgia,arial,tahoma;color:#fff;}
#header h2 {font: normal 17px arial,tahoma;color:#ffff66;}
#right h2 {font: normal 19px arial,tahoma;color:#eb0000;}
h3 {font: normal 18px verdana,arial,tahoma;color:#777;margin:0 0 -1.7em 0;}

p {font: normal 11.5px verdana,arial,tahoma;color:#333;}

.tube {margin:10px;margin-top:0;}

#navlist
{
padding-left: 0;
margin-left: 0;
border-bottom: 0px dotted #aaa;
width: 160px;
}

#navlist li
{
list-style: none;
margin-left: 0px;
padding: 0.1em 0.5em;
border-bottom: 1px dotted #aaa;
}

#navlist li a {
text-decoration:none;
font:normal 12px arial,verdana,tahoma;color:#b22222; }
#navlist li a:hover {color:#ffcc00;}

</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>Website Title</h1>
<h2>Your website slogan goes here</h2>

</div>

<div id="nav">

</div>

<div id="right">
<div class="tube">

<h2>Website Title</h2>

<p>
Your website slogan goes here
Your website slogan goes here

Your website slogan goes here

Your website slogan goes here

Your website slogan goes here

Your website slogan goes here

Your website slogan goes here

Your website slogan goes here

Your website slogan goes here

Your website slogan goes here
</p>

</div>
</div>

<div id="left">
<div class="tube">

</br>
<center><h3>Categories</h3></center>
</br>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">I think that</a></li>
<li><a href="#">A written list</a></li>
<li><a href="#">Might look just</a></li>
<li><a href="#">A little better</a></li>
<li><a href="#">Dont you think</a></li>
</ul>
</div>

<center><h3>Categories</h3></center>
</br>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">I think that</a></li>
<li><a href="#">A written list</a></li>
<li><a href="#">Might look just</a></li>
<li><a href="#">A little better</a></li>
<li><a href="#">Dont you think</a></li>
</ul>
</div>

</div>
</div>

<div id="footer">

</div>
</div>

</body>
</html>

It works fine in IE but there is a big gap above the header in Chrome.
Any suggestions?

I've used the universal selector * to get rid of it but then I can't select
the background option.

Cheers,
Mark.

alex · Dec 5, 2010

Not entirely sure if this will work, but try putting this at the top of the CSS to remove all browser defaults:

HTML,BODY,TD,TR,TH,TABLE,DIV,P,FORM,H1,UL,LI,TEXTAREA,INPUT {margin:0;padding:0;}

you may also be able to do the following, but I heard some browsers don't interpret it correctly:

*{margin:0;padding:0;}

Tricky1 · Dec 5, 2010

This should help, haven't got Chrome on this laptop to check, but should work.

Change : body {margin:20px;padding:0;background:#888;}

To: body {margin:0px 20px 20px 20px; padding:0;background:#888;}

Richard