CSS Forum

**Grawl** · 07-30-2006, 02:14 PM

Firefox:

Internet Explorer:

CSS-file:

Code:

/* A fluid template for business or fun */
/* By Dave Reeder, www.davereederdesign.com */

body { margin: 0; padding: 0;  }

* {margin: 0; padding: 0; border: 0; font-family: "Trebuchet MS", Arial, sans-serif; }


/*------------Basic styles------------*/

p, h1, h2, h3, span#copyright, span#design { margin: 0 10px; color: #fff; font-weight: normal; text-decoration: none; 

background: transparent }

p { font-size: 0.8em; line-height: 1.4em; text-align: justify }
h1 { font-size: 1.3em; line-height: 1.4em; letter-spacing: 0.25em }    /* site heading */
h2 { font-size: 1.0em; line-height: 1.4em; color: #FFA000 }    /* site heading */
h3 { font-size: 0.8em; line-height: 1.4em; color: #FFA000  }                /* sub headings */
span#copyright { font-size: 13px; line-height: 35px }  /* sets the copyright styles */
span#design {  float: right; font-size: 13px; line-height: 35px }  /* floats the design link into position */
span.validation {  float: right; margin-right: 10px; } /* floats the validation buttons */
.validation img {  margin: 0; } /* floats the validation buttons */

div { padding: 10px 0;}

#hdrimg a {color: #06FF00; text-decoration: none; font-weight: normal;}
#hdrimg a strong {color: #fff; text-decoration: none; font-weight: normal;}
#hdrimg a:hover {color: #fff; text-decoration: none; font-weight: normal;}
#hdrimg a:hover strong {color: #06FF00; text-decoration: none; font-weight: normal;}

a {color: #06FF00; text-decoration: none}
a:hover {color: #fff; text-decoration: underline}


/*-------------Layout----------------*/

.rowcontainer {                        /* Used to keep the divs in a row.  you can use this for any size 

of divs */
    float: left;
    margin-bottom: 5px;
    width: 100%;
    overflow: hidden;
    background: #333;
}

.logo {
 float: left;
 width: 764px;
 margin-bottom: 0px;
 background: url('images/top.jpg');
 height: 133px; 
}

#bttmbar { float: left; width: 100%; height: 20px; background: #333;}    /* Bottom copyright bar */


/*------Columns: Note they dont add up to 100%, this is intentional to avoid problems!----------*/ 

.fullcolumn { float: left; width: 99%;}        /* Full width column for a one column site */
            
.halfcolumn { float: left; width: 49%;}        /* Half width column for a two column site. */

.onethirdcolumn { float: left; width: 33%; }        /* One third width column for a three column site */

.quartercolumn { float: left; width: 24.5%; }        /* One quarter width column for a four column site */

.threequartercolung { float: left; width: 65% }

HTML-file:

Code:

<!--DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"-->
<head>

<title>JessicaChobot.net - Your #1 Source for Jessica Chobot, next to Jessica Chobot</title>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="description" content="JessicaChobot.net - Your #1 source for Jessica Chobot next to Jessica Chobot">
<meta name="keywords" content="Jessica Chobot, model, IGN, Jessica Chobot fansite, fansite">
<meta name="robots" content="all">
<meta name="MSSmartTagsPreventParsing" content="true">
<meta http-equiv="Expires" content="Thu, 01 Jan 2070 00:00:00 GMT">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<link href='fluidity.css' rel=STYLESHEET TYPE=text/css>
</head>
<body background="http://www.gamingforce.com/forums/images/bg.png">

<Center><table><tr><td width="764">
<div id="hdrimg">
<span class="validation">
<a href="http://jigsaw.w3.org/css-validator/check/referer"><img src="http://www.gamingforce.com/forums/images/fluidcss.gif" alt="validate the css" /></a>
<a href="http://validator.w3.org/check?uri=referer"><img src="http://www.gamingforce.com/forums/images/fluidxhtml1.1.gif" alt="validate the css" /></a>
</span>
<h1>JessicaChobot.net</h1>

</div>    <!-- end of hdr img -->

<div class="logo">
</div>

<div class="rowcontainer">
<div class="threequartercolung">
<h2>Welcome to Fluidity.com</h2>
<p>Hello </p>
</div>

<div class="onethirdcolumn">
<h3>Example of four columns!</h3>
<p>Here will be some stuff.
<br> Stuff
<br> Stuff
<br> Stuff
<br> Stuff
<br> Stuff
<br> Stuff
<br> Stuff
<br> Stuff
</p>

</div>
</div>

<div id="bttmbar"> <span id="design">design: <a href="http://www.davereederdesign.com/">davereederdesign.com</a></span><span id="copyright">Copyright &copy; 2006 by JessicaChobot.net. All Rights Reserved</span>
</div><!-- end of bttmbar -->
</td></tr></table></center></html>
</body>
</html>

Who can tell me why the it doesn't work in FireFox, but does work in IE? The top image is 133 pixels high.

**Grawl** · 07-30-2006, 04:04 PM

Fixed it by creating a big container around the others and centering that.