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:
http://johnbayne.com/hiclone1/2.html
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:
Expand|Select|Wrap|Line Numbers
- <!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>
Expand|Select|Wrap|Line Numbers
- /* 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>