CSS Newbie: Firefox alignment problems

SuperGrover1981 · #1 (**permalink**) Aug 31st, 2006, 04:13

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:

Code: Select all

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

& the css:

Code: Select all

/* 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>

ukgeoff · #2 (**permalink**) Aug 31st, 2006, 10:28

Your problem is being caused by the css code indicated below:

#header {
...
float: left;
...
}

Firefox et al are doing what should be done. When you float an element, you take it out of the normal flow of elements on the page.

Remove it and see what happens.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
tricky floating problems for div alignment	escaflowne11	Web Page Design	4	Dec 10th, 2006 08:03
Alignment problem in Firefox	guvna	Web Page Design	11	Nov 14th, 2006 17:40
DIV alignment in Firefox and Netscape	johnmr	Web Page Design	1	Sep 11th, 2006 17:15
alignment problems	joojoo	Web Page Design	7	Aug 15th, 2006 08:55

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
CSS Newbie: Firefox alignment problems