468,170 Members | 2,008 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,170 developers. It's quick & easy.

My page works fine in IE but css div is not recognised in firefox

Im very new to the who css lark so am struggling quite a bit.

ive managed to build a basic div centred box with css embedded in my html. It looks fine in IE but loses all size in firefox.

Any sugestions guys.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<style type="text/css">
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #fff;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
}
ul {
list-style-type: none; /* suppression of useless elements */
width: 100%; /* precision for Opera */
}
li { float: left;} /* lists aligned to the left */

.menu a {
margin: 0 1px;
width: 80px;
height: 14px;
float: left;
display: inline;
text-align: center;
border: 0px solid gray;
color: #000;
background: #fff;
font-size: 10px;
}

.menu a:hover {
background: #ccc;
border: 0px solid gray;
}

.menu a:active {
background: gray;
border: 0px solid gray;
color: #fff;
}
.thrColFixHdr #container {
position:absolute;
left: 50%;
top: 50%;
width: 650px;
height: 400px;
margin-top: -200px; /* half of the height */
margin-left: -325px; /* half of the width */
}
.thrColFixHdr #header {
position:fixed;
background: #fff; /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
height: 0px;
width:650px;
}
.thrColFixHdr #mainContent {
position: fixed;
margin: 0; /* the right and left margins on this div element creates the two outer columns on the sides of the page. No matter how much content the sidebar divs contain, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the sidebar spaces when the content in each sidebar ends. */
padding: 0; /* remember that padding is the space inside the div box and margin is the space outside the div box */
height: 330px;
width: 650px;
overflow: auto;
}
.thrColFixHdr #footer {
position:fixed;
width: 700px;
height: 30px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
.style1 {color: #DDDDDD}
.style2 {color: #000000}
.style3 {
font-size: 85%
}
-->
</style><!--[if IE 5]>
<style type="text/css">
/* place css box model fixes for IE 5* in this conditional comment */
.thrColFixHdr #sidebar1 { width: 180px; }
.thrColFixHdr #sidebar2 { width: 190px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.thrColFixHdr #sidebar2, .thrColFixHdr #sidebar1 { padding-top: 30px; }
.thrColFixHdr #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]--></head>

<body class="thrColFixHdr">

<div id="container">
<div id="header">
<ul class="menu"><li><a href="/home.html">Home</a></li> <li><a href="/about.html">About</a></li> <li><a href="/portfolio.html">Portfolio</a></li> <li><a href="/crafts.html">Crafts</a></li> <li><a href="/photography.html">Photography</a></li> <li><a href="/classes.html">Classes</a></li> <li><a href="/contact.html">Contact</a></li></ul>
<h1 class="style3"></h1>
<!-- end #header -->
</div>
<div id="mainContent">

<h1> Main Content </h1>
<p>&nbsp;</p>
</div>
<div id="footer"><span class="style2"><strong>Miriana D'ambrosio</strong></span> Artist Designer Tutor
<!-- end #footer -->
</div>
<!-- end #container --></div>
</body>
</html>
Jun 13 '07 #1
11 2297
drhowarddrfine
7,435 Expert 4TB
I'm editing this as I go through your page:

1) Your doctype is incorrect. Should be:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

2) You declare HTML but then you use this Xhtml tag:
<html xmlns="http://www.w3.org/1999/xhtml">
Change that all to just <html>

3) You are also using Xhtml end tag, />. Remove the slash.
Jun 13 '07 #2
drhowarddrfine
7,435 Expert 4TB
4) You are using 'position:fixed' which does not work in IE6 but has been fixed for IE7. If you viewed this in IE7, you will see that it appears the same as Firefox.

With 4) in mind, you might want to re-think what you are trying to do.
Jun 13 '07 #3
I'm editing this as I go through your page:

1) Your doctype is incorrect. Should be:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

2) You declare HTML but then you use this Xhtml tag:
<html xmlns="http://www.w3.org/1999/xhtml">
Change that all to just <html>

3) You are also using Xhtml end tag, />. Remove the slash.
Thanks for the help!

Rite ive chaged my doc type.

ive got rid of the <html xmlns="http://www.w3.org/1999/xhtml"> tag and the /. But im unsure what should be in its place.

it seems that now it neither is displaying the div in either ie or firefox?!?!
Jun 13 '07 #4
4) You are using 'position:fixed' which does not work in IE6 but has been fixed for IE7. If you viewed this in IE7, you will see that it appears the same as Firefox.

With 4) in mind, you might want to re-think what you are trying to do.

ok im slowly getting there
Jun 13 '07 #5
can seem to get this right!

now its working in firefox its blank in ie...
Whats going on! cant work it out.
any help please?!?!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<style type="text/css">
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #fff;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #CCCCCC;
}
.thrColFixHdr #container {
left: 50%;
top: 50%;
width: 650px;
height: 400px;
margin-top: -200px; /* half of the height */
margin-left: -325px; /* half of the width */
position: absolute;
}
.thrColFixHdr #main {
width:650px;
height:340px;
}
.thrColFixHdr #top {
width:650px;
height:20px;
}
.thrColFixHdr #bottom {
width:650px;
height:40px;
}
ul {
list-style-type: none; /* suppression of useless elements */
width: 100%; /* precision for Opera */
}
li { float: left;} /* lists aligned to the left */

.menu a {
margin: 0 1px;
width: 80px;
height: 14px;
float: left;
display: inline;
text-align: center;
border: 0px solid gray;
color: #000;
background: #fff;
font-size: 10px;
}

.menu a:hover {
background: #ccc;
border: 0px solid gray;
}

.menu a:active {
background: gray;
border: 0px solid gray;
color: #fff;
}

</style>
<!--[if IE 5]>
<style type="text/css">
.thrColFixHdr #sidebar1 { width: 180px; }
.thrColFixHdr #sidebar2 { width: 190px; }
</style>
<![endif]-->
</head>

<body class="thrColFixHdr">

<div id="container">
<div id="top">
<ul class="menu"><li><a href="/home.html">Home</a></li> <li><a href="/about.html">About</a></li> <li><a href="/portfolio.html">Portfolio</a></li> <li><a href="/crafts.html">Crafts</a></li> <li><a href="/photography.html">Photography</a></li> <li><a href="/classes.html">Classes</a></li> <li><a href="/contact.html">Contact</a></li></ul>
</div>
<div id="main">MAINCRAP</div>
<div id="bottom">Miriana D'ambrosio Artist Designer Tutor</div>
<!-- end #container -->
</div>
</body>
</html>
Jun 13 '07 #6
drhowarddrfine
7,435 Expert 4TB
Merged threads. Let's keep this all under one roof.
Jun 13 '07 #7
drhowarddrfine
7,435 Expert 4TB
I didn't say to remove all of the <html> line. Just leave <html> there like that. It's not the fix, though.
Jun 13 '07 #8
drhowarddrfine
7,435 Expert 4TB
The closing style tag is missing from the first one. You closed the conditional comment one but not the top one.
Jun 13 '07 #9
I think the following code will solve your problem

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background-color: #ffffff;
margin: 0px;
padding: 0px;
text-align: center;
color: #CCCCCC;
}

#container {
padding-top:20%;
text-align: center;
margin: 0 auto;
width: 650px;
height:400px;
}
.thrColFixHdr #main {
width:650px;
height:340px;
}
.thrColFixHdr #top {
width:650px;
height:20px;
}
.thrColFixHdr #bottom {
width:650px;
height:40px;
}
ul {
list-style-type: none;
width: 100%;
}
li { float: left;}

.menu a {
margin: 0 1px;
width: 80px;
height: 14px;
float: left;
display: inline;
text-align: center;
border: 0px solid gray;
color: #000;
background: #fff;
font-size: 10px;
}

.menu a:hover {
background: #ccc;
border: 0px solid gray;
}

.menu a:active {
background: gray;
border: 0px solid gray;
color: #fff;
}

</style>

</head>

<body>

<div id="container"><div id="top">
<ul class="menu"><li><a href="/home.html">Home</a></li> <li><a href="/about.html">About</a></li> <li><a href="/portfolio.html">Portfolio</a></li> <li><a href="/crafts.html">Crafts</a></li> <li><a href="/photography.html">Photography</a></li> <li><a href="/classes.html">Classes</a></li> <li><a href="/contact.html">Contact</a></li></ul>
</div>
<div id="main">MAINCRAP</div>
<div id="bottom">Miriana D'ambrosio Artist Designer Tutor</div>
</div>
</body>
</html>
Jun 14 '07 #10
Thanks guys but ive been trying to create a centered css <div> container.

asmanand- Thanks for the code but its not quite what i wanted as i need a set sized centrally located div box to standardize the page with overflow:auto

Hmm its not easy
Jun 14 '07 #11
drhowarddrfine
7,435 Expert 4TB
Well, I'm confused as to whether you got the initial problem fixed. Here is the markup that works for me:
[HTML]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<style type="text/css">
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #fff;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #CCCCCC;
}
.thrColFixHdr #container {
left: 50%;
top: 50%;
width: 650px;
height: 400px;
margin-top: -200px; /* half of the height */
margin-left: -325px; /* half of the width */
position: absolute;
}
.thrColFixHdr #main {
width:650px;
height:340px;
}
.thrColFixHdr #top {
width:650px;
height:20px;
}
.thrColFixHdr #bottom {
width:650px;
height:40px;
}
ul {
list-style-type: none; /* suppression of useless elements */
width: 100%; /* precision for Opera */
}
li { float: left;} /* lists aligned to the left */

.menu a {
margin: 0 1px;
width: 80px;
height: 14px;
float: left;
display: inline;
text-align: center;
border: 0px solid gray;
color: #000;
background: #fff;
font-size: 10px;
}

.menu a:hover {
background: #ccc;
border: 0px solid gray;
}

.menu a:active {
background: gray;
border: 0px solid gray;
color: #fff;
}
-->
</style>

<!--[if IE 5]>
<style type="text/css">
.thrColFixHdr #sidebar1 { width: 180px; }
.thrColFixHdr #sidebar2 { width: 190px; }
</style>
<![endif]-->
</head>

<body class="thrColFixHdr">

<div id="container">
<div id="top">
<ul class="menu"><li><a href="/home.html">Home</a></li> <li><a href="/about.html">About</a></li> <li><a href="/portfolio.html">Portfolio</a></li> <li><a href="/crafts.html">Crafts</a></li> <li><a href="/photography.html">Photography</a></li> <li><a href="/classes.html">Classes</a></li> <li><a href="/contact.html">Contact</a></li></ul>
</div>
<div id="main">MAINCRAP</div>
<div id="bottom">Miriana D'ambrosio Artist Designer Tutor</div>
<!-- end #container -->
</div>
</body>
</html>[/HTML]
Does anybody really use IE5 anymore?
Jun 14 '07 #12

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

8 posts views Thread by Dave Thomas | last post: by
3 posts views Thread by Rhino | last post: by
9 posts views Thread by =?Utf-8?B?Sm9obiBCYWlsZXk=?= | last post: by
4 posts views Thread by iamaporkaholic | last post: by
8 posts views Thread by Harvey Schmidlapp | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.