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.
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.