Forum Moderators: not2easy

Message Too Old, No Replies

Why is FireFox aligning this to the left?

         

midi25

9:44 pm on Mar 1, 2005 (gmt 0)

10+ Year Member



Hi more probs. Having played with padding and semi got the concept. I came across another problem.

Here is my html :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<title>_2Col</title>
<LINK rel="stylesheet" type="text/css" href="http:example.css">
</head>
<body>

<div id="container">

<div id="head">
</div>

<div id="nav">
</div>

<div id="content">
</div>

<div id="footer">
</div>

</div>

</body>
</html>

Here is my CSS :

body
{

text-align:center;
background-color:#000
}

#container
{
margin:10 auto;
width:800px;

max-width:800px;
height:530px;
background-color:#fff;
}

#head
{
width:800px;
max-width:800px;
height:60px;
background-color:Gray
}

#nav
{
margin:0px;
max-width:170px;
width:150px;
height:440px;
float:left;
background-color:Blue;
padding-left:10px;
padding-right:10px

}

#content
{
margin-left:0px;
height:440px;
max-width:700px;
width:630px;
float:left;
background-color:Maroon
}

#footer
{
max-width:800px;
width:800px;
height:30px;
background-color:Teal
}

In IE6 this is actually showing as I would like. But in FireFox it is all shifted to the left of the screen. What have i done wrong?

Thanks

createErrorMsg

1:35 pm on Mar 2, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



margin:10 auto;

This property from your #container styles is to blame. The only value that FF will let you get away with not specifying a unit for is 0. If you give any other numerical value, it needs to have a unit with it or FF ignores the rule. In this case, changing to...

margin: 10px auto;

...does the trick.

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

Also note that this isn't a full and valid doctype. Using the full thing will give a little more certainty about how the two browsers will behave. Check the W3 Doctype Page [w3.org] for full DTDs.

cEM

midi25

2:34 pm on Mar 2, 2005 (gmt 0)

10+ Year Member



Ahhh many thanks. I am beginning to see that CSS is very strict. Problem with my coding is that I am sloppy sometimes are rely on auto correction in some IDE,s.

I use Visual Basic.net and it is forgiving unlike C# which is more like Java and CSS.

-----------------------------------------------

Here is an extract from MS article. Enhancements in IE6 for CSS about DOC Types

!DOCTYPE Examples
The examples in this section show how to use the!DOCTYPE declaration to specify the DTD to which a document conforms and how to switch on standards-compliant mode.

Both of the declarations in the following example specify conformance to the Transitional HTML4.0 DTD. The second declaration specifies the URL of the DTD. The first declaration does not. The second declaration switches on standards-compliant mode with Internet Explorer 6 or later. The first declaration does not.

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

Both of the declarations in the following example specify conformance to the HTML 4.0 DTD. The first declaration does not specify a Definition. The second declaration specifies the Strict Definition of this DTD. Neither declaration specifies the URL. Both of these declarations switch on standards-compliant mode.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">

Accoring to them that doc type is valid for standard compliancy.

I may start using the XHTML1.1 doc type soon as the next version of .net is starting to use this for some reason. Maybe it helps code conformity to W3C standards.