Forum Moderators: not2easy
I've been teaching myself CSS over the past 2 days and for the most part I thought I had it all working. All the problems I've had have been in IE...until now. If anyone could offer any suggestions, I'd be most appreciative.
Site can be viewed here:
[johnbayne.com...]
The problem I have is this: in the (usually abominable) IE 6, the page aligns pretty much how I want it. There's three different <div> elements and they align beneath each other, like HTML tables would, & as I want them to.
In Firefox & the standard-CSS browsers, however, the 3 <div> areas overlap each other, creating one big muddle up the top.
I'm guessing this is probably a fairly simple problem; I have tried looking for a solution but my noobie mind found no success. Any help most appreciated.
Cheers,
- JB
HTML:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="1css.css" rel="stylesheet" type="text/css" />
</head><body> <div id="mainbox">
<div id="header">
<img src="hiclonetitle.jpg" alt="HiClone Title" />
<a href="order.html">Order Now</a>
<a href="cow.html">Fuel Calculator</a>
<a href="product.html">Product Info</a>
<a href="index.html">Home</a>
</div>
<div id="blacktitle">
“HiClone is the best thing ever invented ever. No seriously, it is. I’m not kidding. It’s better than sex” - Albert Einstein, 1939</div>
<div id="promobanner"> </div>
</div>
</body></html>
/* CSS Document */* {
margin:0px;
padding:0px;
}
body {
background-image:url(background.jpg);
background-repeat:repeat-x;
}
#mainbox {
background-color:#FFF;
width:765px;
height:1200px;
margin:10px auto 0px auto;
border:2px solid #666;
}
#header {
background:url(topbg.jpg) repeat-x;
float:left;
width:759px;
height:80px;
margin:3px;
}
#header a {
display:block;
width: 101px;
height: 25px;
float:right;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:10px;
line-height:14px;
color: #FFFFFF;
padding-top:55px;
background:url(topmenubackgroundtp.gif) top left no-repeat;
}
#header a:link {
background-color: #059;
text-decoration: none;
}
#header a:visited {
background-color: #059;
text-decoration: none;
}
#header a:active {
background-color: #AAA;
}
#header a:hover {
background-color: #27b;
text-decoration: underline;
}
#header img {
border:0px;
width:305px;
height:47px;
float:left;
}
#blacktitle {
position: relative;
top: 3px;
background-color: #000;
height: 15px;
width: 100%;
margin: 0px;
color: #CEF;
font-weight: bolder;
font-family: Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-align: center;
font-size: 10px;
border-top: solid;
border-width: 2px;
border-color: #FFF;
padding-top: 5px;
}
#promobanner {
position: relative;
top: 10px;
background: url(bannerbackground.jpg) repeat-y;
width: 759px;
height: 156px;
border: 0px;
border-top: 2px;
border-color: #CCC;
border: solid;
}
--></style>
