...

View Full Version : CSS page disforming in Oper/Firefox etc..



Pougee
05-17-2005, 11:47 AM
Hi All,

I have to admit this side of designing is very foreign to me using CSS. I tried to recreate my site using Cascading style sheets. It looks great in IE. But in any navigator type browsers such as Oper and Firefox .... It really distorts.

As I'm new to it i can't debug what i wrote and fix it. If someone could have a quick look at it and point me in the right direction it would be much appreciated.
http://www.mddesigns.com.au/private

Pougee

coothead
05-17-2005, 04:54 PM
Hi there Pougee,

and a warm welcome to these forums. :)

I have made some changes to your html and consequently some
modifications to your CSS. Basically I removed the table and
replaced it with a containing div. Note also that 'id' is unique and
the multiple applications have therefore been replaced with 'class'.

HTML file

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>MD Designs - Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="layout.css" rel="stylesheet" type="text/css">

</head>
<body>

<div id="container">

<div id="layout">
<div class="button"><img src="images/home.gif" width="92" height="56" alt="You're Already Here"></div>
<div class="spacer-button"><img src="images/homespacer.gif" width="78" height="56" alt="spacer"></div>
<div class="button"><img src="images/portfolio.gif" width="92" height="41" alt="Portfolio"></div>
<div class="spacer-button"><img src="images/portspacer.gif" width="78" height="41" alt="spacer"></div>
<div class="button"><img src="images/pricelist.gif" width="92" height="44" alt="Price List"></div>
<div class="spacer-button"><img src="images/pricespacer.gif" width="78" height="44" alt="spacer"></div>
<div class="button"><img src="images/contact.gif" width="92" height="41" alt="Contact"></div>
<div class="spacer-button"><img src="images/contactspacer.gif" width="78" height="41" alt="spacer"></div>
<div id="toolspace"></div>
<div id="toolspacer"></div>
<div class="space"></div>
<div class="space"></div>

</div>

<div id="content">
<h4 id="one">Welcome to MD Designs</h4>
<h4>Where your pages are made with quality</h4>
</div>

</div>

</body>
</html>
CSS file

body {
background-color: #000;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color: #ccc;
text-align:center;
margin-top:30px;
}

#container {
width:600px;
margin:auto;
}

#layout {
width:170px;
height:600px;
float:left;
text-align:left;
}

.button {
width:92px;
float:left;
background-color:#000;
}

.spacer-button {
width:78px;
float:left;
background-color:#000;
}

#content {
width:430px;
height:600px;
float:left;
background-image:url(images/bg.jpg);
}


#toolspace {
width:92px;
height:121px;
padding:0px;
float:left;
background-image:url(images/toolspace.gif);
}

#toolspacer {
width:78px;
height:121px;
float:left;
background-image:url(images/toolspacer.gif);
}
.space {
width:85px;
height:297px;
float:left;
background-color:#858874;
}


h4 {
color: #ccc;
text-align:center;
}

h4#one {
margin-top:250px;
}

coothead

Pougee
05-18-2005, 03:37 AM
Thankyou for the warm welcome.

Not only did you completely fixed my site. You got rid of the table. That was my next question.

Thanks for your time
Cheers
Pougee

coothead
05-18-2005, 04:33 AM
No problem, you're welcome. :D

Pougee
05-24-2005, 02:25 AM
Ok got it all to validate and have done the change over. Thanks again

www.mddesigns.com.au

Bill Posters
05-24-2005, 09:01 AM
HTML file

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Fwiw/imho/caveat/caveat/… ;)

When giving examples, it's always worth using a full DTD as it encourages those viewing the example to use them also. A full (preferably even 'Strict') DTD places a browser into 'standards-compliant' (read: best behaviour) mode (as opposed to 'quirks' mode) and this helps to ensure the best level of cross-browser consistency in layouts.

So, fwiw, the full version of the above DTD is as follows…

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

hth :)

Pougee
05-24-2005, 02:50 PM
What does that acheive?

Bill Posters
05-24-2005, 03:17 PM
What does that acheive?
A full and valid DTD puts browsers on their best behaviour by triggering 'standards-compliant' mode. This means they interpret things like markup and css as closely to how the W3C prescribe as they are able.
Partial and other invalid DTDs trigger 'quirks' mode, which means that browser are free to interpret the markup and css according to any peculiarities they have.
Some browsers will stick fairly closely to the W3C prescription even in quirks mode (as web standards have been a constant consideration during their development), but in the case of MSIE6/Win, quirks mode causes it to (mis)understand the box model (http://www.w3.org/TR/REC-CSS2/box.html) incorrectly, just as MSIE5/Win does. This can cause layouts to become inconsistent from one browser and may require the use of alternative markup techniques or hacks (http://tantek.com/CSS/Examples/boxmodelhack.html) (alt (http://www.info.com.ph/~etan/w3pantheon/style/modifiedsbmh.html)) to work around the mistakes that MSIE5/Win and MSIE6/Win(q) will make.

Incidentally, using the xml prologue with a full and valid XHTML DTD will still trigger quirks mode in MSIE6/Win, so you should avoid using the xml prologue for now (unless you really know what you're doing).



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum