473,321 Members | 1,622 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,321 software developers and data experts.

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 3039
AricC
1,892 Expert 1GB
Try using z-index.

Aric
Feb 8 '07 #2

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

Similar topics

11
by: Diane Wilson | last post by:
I'm still working my way through the CSS box model to do tableless layout. Thanks to all here who have helped previously; I'm making progress but still running into issues. This site is *almost*...
67
by: S.Tobias | last post by:
I would like to check if I understand the following excerpt correctly: 6.2.5#26 (Types): All pointers to structure types shall have the same representation and alignment requirements as each...
2
by: Joey | last post by:
Hello all, I have been designing a site where the main content is enclosed in one table, and that table needs to be centered (the centering is done by using another container such as a div or...
33
by: David Stone | last post by:
Been trying to specify text alignment within specific columns in an html 4 strict page. According to the w3c specs, <TABLE border="1"> <COLGROUP> <COL> <COL align="char" char=".">...
20
by: ridergroov | last post by:
I had this message previously in another group and I was told to try here. Hopefully someone can help out. Site was created in Dreamwaver MX 04 and I cna't figure out why there are so many errors...
2
by: cbjewelz | last post by:
Hey all. So I'm having problems with cross browser alignments. I'm looking at Safari and Mozilla Firefox. I develop in Safari and so it looks perfect there however in Firefox my vertical...
1
by: rahulthathoo | last post by:
We are having some problem with out css- style on firefox. The same site displays fine in IE. But in Firefox, there are some hyperlinks which just dont appear as hyperlinks, rather appear as plan...
7
by: komosalab | last post by:
Hi folks, I'm new to CSS and kind of lazy when it comes to coding, but I've tried to do this page by the book and it has a weird problem. I've created a table with a particular background...
0
by: atarumorooka | last post by:
Hello, yes..it must be hard to try and help someone else coding but today is a full week of sadness and stress for IE CSS rendering and I need your help. Here you have a link that looks nice with...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.