469,917 Members | 1,726 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,917 developers. It's quick & easy.

CSS Newbie: Firefox alignment problems

Gidday gang,

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
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>Untitled Document</title>
  6. <link href="1css.css" rel="stylesheet" type="text/css" />
  7. </head><body>
  8.  
  9.     <div id="mainbox">
  10.         <div id="header">
  11.             <img src="hiclonetitle.jpg" alt="HiClone Title" />
  12.                 <a href="order.html">Order Now</a>
  13.                 <a href="cow.html">Fuel Calculator</a>
  14.                 <a href="product.html">Product Info</a>
  15.                 <a href="index.html">Home</a>
  16.       </div>
  17.         <div id="blacktitle">
  18.         “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>
  19.             <div id="promobanner">            </div>
  20. </div>
  21.  
  22.  
  23.  
  24. </body></html>
  25.  
& the css:

Expand|Select|Wrap|Line Numbers
  1. /* CSS Document */
  2.  
  3. * {
  4.     margin:0px;
  5.     padding:0px;
  6. }
  7.  
  8. body {
  9.     background-image:url(background.jpg);
  10.     background-repeat:repeat-x;
  11. }
  12.  
  13. #mainbox {
  14.     background-color:#FFF;
  15.     width:765px;
  16.     height:1200px;
  17.     margin:10px auto 0px auto;
  18.     border:2px solid #666;
  19. }
  20.  
  21. #header {
  22.     background:url(topbg.jpg) repeat-x;
  23.     float:left;
  24.     width:759px;
  25.     height:80px;
  26.     margin:3px;
  27. }
  28.  
  29. #header a {
  30.     display:block;
  31.     width: 101px;
  32.     height: 25px;
  33.     float:right;
  34.     text-align:center;
  35.     font-family:Arial, Helvetica, sans-serif;
  36.     font-weight:bold;
  37.     font-size:10px;
  38.     line-height:14px;
  39.     color: #FFFFFF;
  40.     padding-top:55px;
  41.     background:url(topmenubackgroundtp.gif) top left no-repeat;
  42. }
  43.  
  44. #header a:link {
  45.     background-color: #059;
  46.     text-decoration: none;
  47. }
  48.  
  49. #header a:visited {
  50.     background-color: #059;
  51.     text-decoration: none;
  52. }
  53.  
  54. #header a:active {
  55.     background-color: #AAA;
  56. }
  57.  
  58. #header a:hover {
  59.     background-color: #27b;
  60.     text-decoration: underline;
  61. }
  62.  
  63. #header img {
  64.     border:0px;
  65.     width:305px;
  66.     height:47px;
  67.     float:left;
  68. }
  69.  
  70. #blacktitle {
  71.     position: relative;
  72.     top: 3px;
  73.     background-color: #000;
  74.     height: 15px;
  75.     width: 100%;
  76.     margin: 0px;
  77.     color: #CEF;
  78.     font-weight: bolder;
  79.     font-family: Arial, Helvetica, sans-serif;
  80.     text-transform: uppercase;
  81.     text-align: center;
  82.     font-size: 10px;
  83.     border-top: solid;
  84.     border-width: 2px;
  85.     border-color: #FFF;
  86.     padding-top: 5px;
  87.     }
  88.  
  89. #promobanner {
  90.     position: relative;
  91.     top: 10px;
  92.     background: url(bannerbackground.jpg) repeat-y;
  93.     width: 759px;
  94.     height: 156px;
  95.     border: 0px;
  96.     border-top: 2px;
  97.     border-color: #CCC;
  98.     border: solid;
  99.     }
  100.  
  101. --></style>
  102.  
Aug 31 '06 #1
1 2847
AricC
1,892 Expert 1GB
Try using z-index.

Aric
Feb 8 '07 #2

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

11 posts views Thread by Diane Wilson | last post: by
67 posts views Thread by S.Tobias | last post: by
33 posts views Thread by David Stone | last post: by
1 post views Thread by rahulthathoo | last post: by
reply views Thread by Salome Sato | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.