[thelist] Thought I'd try making a site with CSS... (>_<)

Brian Cummiskey Brian at hondaswap.com
Sun Feb 29 05:18:00 CST 2004


Christian Anderson wrote:
> How can a site look so different between 2
> browsers? 
<snip>
> http://d6204322.u40.tokios.com/index.html

Hi Christian

Welcome to css =)

I viewed your site in Ie6, and its centered and looks good.
In mozilla, it falls apart, and is left-aligned.

I assume you are seeing the same results.

Fact is, IE sucks at css =)

what you coded, shows, in mozilla.

some issues to clean up:

First, mozilla requires a padding and margin (set to 0 if you want none) 
to be set for each div or block level element, otherwise it will do 
wierd things.

to center the page, use this in your body:

body { margin: 0px auto; }

the auto tag will center it.

you also have some background issues in the body tag.

So, try this:

body {
	background: #DCDCDC url(back3.gif) bottom right fixed no-repeat;
	color: #696969;
	margin: 0px auto;
}


your centering here fails, and again, the above, should take care of it.
so change: <div class="white" align="center">
to: <div class="white">

and get rid of FLOAT: none;

"Let the construction begin" is floating over the content, and not 
flowing below...

put a breaker cell in between:

<div class="break"></div>
with:
.break { clear: both; padding:0; margin-bottom:5px; }


that should get you started

And honestly, when working with css, you really should use an xhtml 1 
transitional, or even better, strict, doctype.  it's 98% html 4.01 
transitional, but its cleaner, and better code.  w3schools.com has a 
nice quick tutorial on it.

When designing, i code/refresh with mozilla 1.6 (haven't liked firefox 
much yet to upgrade).  after it looks good there, i look at it in IE and 
see where its failing.  Sometimes, things just CAN'T be made perfect 
between the two browsers- especially in pixel-perfect designs.

hope this helps.



More information about the thelist mailing list