HAY GUYS

Grawl · 12:08 PM

My upcoming site.

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.

Same goes for the copyright bar. I just want it to be a small bar with the text, but when I change the height it doesn't listen to me. In FireFox the text is stuck to the bottom, in IE it floats in the middle. - Found it.

Jam it back in, in the dark.

Hello_Kitty · Local time: Jul 30, 2006, 07:52 PM

i usually specify commands twice for IE+FF love

Code:

.zob  {blablabla
}
html>body .zob  {blablabla
}

the first one is for IE, the second one is for FF

just tweak both parameters

There's nowhere I can't reach.

Render · Local time: Jul 30, 2006, 11:32 AM

Originally Posted by Hello_Kitty

i usually specify commands twice for IE+FF love

Code:

.zob  {blablabla
}
html>body .zob  {blablabla
}

the first one is for IE, the second one is for FF

just tweak both parameters

You really shouldn't have to do that. It's entirely possible to create an XHTML/CSS site with one set of parameters. The one exception I know of is a site that uses more than two columns.

Also Grawl, is that site supposed to have a left <div> column for news posts, and a right <div> for navigtation? If so, the way it's setup is a little wrong. The site is not XHTML, which really doesn't mean much.

I could help you out with the template if you gave me the site images to work with. Just gimme a PM.

This thing is sticky, and I don't like it. I don't appreciate it.

***Bigblah*** · Local time: Jul 31, 2006, 02:47 AM

It's solved. Just needed to set the padding for the banner div to 0px.

How ya doing, buddy?