I have been working on building a site for my father's company and I decided to try out CSS. This is my first real attempt at creating a website and using CSS so it has been a learning experience!
I have the site setup here to test: <!-- m --><a class="postlink" href="http://www.lifeatspeed.com/pax/">http://www.lifeatspeed.com/pax/</a><!-- m --> . The CSS file is at <!-- m --><a class="postlink" href="http://www.lifeatspeed.com/pax/Main.css">http://www.lifeatspeed.com/pax/Main.css</a><!-- m --> .
The page loads the same in both IE6 and Firefox (haven't tested others), but in Firefox the site is aligned to the left instead of in the center like in IE6. I have verifed all the pages as valid XHTML transitional on W3C and the CSS is valid as well. Can someone point me in the right direction on this one? It has to be something simple, but I'm at a loss.Put div tags around the whole page and give it an id - say "container" or "wrapper" and then do this : #container {
position:relative;
margin:auto;
width:850px;
}
(or maybe 848px - I'm not really sure why you've set different widths for IE and Firefox - IE should work kind of OK as you have a good DTD).
Anyway, that should do it.Thanks for the info, I will try adding the wrapper when I get back home today. I have different widths because it was the only way I could have everything line up pixel for pixel in both FF and IE. Is there a way to have everything line up without having different widths?
I thought it was necessary because FF takes the border into consideration when displaying widths so the 848px for FF looks the same as the 850px for IE because there is a 1 pixel border on each side. If I left it 850 for both or 848 for both, one would look ok and the other would be slightly off.
It was so frustrating trying to get it all to linup because I didn't have much prior experience with CSS that I almost went back to tables for layout
.This is the basic centering of contents. To ensure the widths are the same across browsers use the correct DTD (<!-- m --><a class="postlink" href="http://www.w3.org/International/articles/serving-xhtml/#quirks">http://www.w3.org/International/article ... ml/#quirks</a><!-- m -->).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>center contents</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
body {text-align:center;}
#container {margin:0 auto; width:850px; text-align:left; border:1px solid red;}
-->
</style>
</head>
<body>
<div id="container">
<div id="contents">contents</div>
</div>
</body>
</html>After reviewing your DTD link, the fact that I have an XML declaration above the DTD could be the problem.
<?xml version="1.0" encoding="iso-8859-1"?>
I use Dreamweaver MX and this code is automatically input, so I'll read more to see if this is the problem and how to fix it. From what I read it appears IE has issues when anything comes before the DTD.Yes!!! Don't trust Dreamweaver. That XML declaration throws it into quirks mode. I actually Download ed your page so that so that I could work on it, but I didn't see the XML declaration. I guess it got lost somewhere in the translation. Without that, I think you should be fine.
By the way - in case you'd considered it - never use any of DW's javascript - it's a bit on the crap side...Thanks for all the help, I got it to work now by using the container DIV. Funny thing is I already had a container coded in the html files called ParentDiv, but when I looked in my style sheet it wasn't there! I must have taken it out.
I have the site setup here to test: <!-- m --><a class="postlink" href="http://www.lifeatspeed.com/pax/">http://www.lifeatspeed.com/pax/</a><!-- m --> . The CSS file is at <!-- m --><a class="postlink" href="http://www.lifeatspeed.com/pax/Main.css">http://www.lifeatspeed.com/pax/Main.css</a><!-- m --> .
The page loads the same in both IE6 and Firefox (haven't tested others), but in Firefox the site is aligned to the left instead of in the center like in IE6. I have verifed all the pages as valid XHTML transitional on W3C and the CSS is valid as well. Can someone point me in the right direction on this one? It has to be something simple, but I'm at a loss.Put div tags around the whole page and give it an id - say "container" or "wrapper" and then do this : #container {
position:relative;
margin:auto;
width:850px;
}
(or maybe 848px - I'm not really sure why you've set different widths for IE and Firefox - IE should work kind of OK as you have a good DTD).
Anyway, that should do it.Thanks for the info, I will try adding the wrapper when I get back home today. I have different widths because it was the only way I could have everything line up pixel for pixel in both FF and IE. Is there a way to have everything line up without having different widths?
I thought it was necessary because FF takes the border into consideration when displaying widths so the 848px for FF looks the same as the 850px for IE because there is a 1 pixel border on each side. If I left it 850 for both or 848 for both, one would look ok and the other would be slightly off.
It was so frustrating trying to get it all to linup because I didn't have much prior experience with CSS that I almost went back to tables for layout
.This is the basic centering of contents. To ensure the widths are the same across browsers use the correct DTD (<!-- m --><a class="postlink" href="http://www.w3.org/International/articles/serving-xhtml/#quirks">http://www.w3.org/International/article ... ml/#quirks</a><!-- m -->).<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>center contents</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
body {text-align:center;}
#container {margin:0 auto; width:850px; text-align:left; border:1px solid red;}
-->
</style>
</head>
<body>
<div id="container">
<div id="contents">contents</div>
</div>
</body>
</html>After reviewing your DTD link, the fact that I have an XML declaration above the DTD could be the problem.
<?xml version="1.0" encoding="iso-8859-1"?>
I use Dreamweaver MX and this code is automatically input, so I'll read more to see if this is the problem and how to fix it. From what I read it appears IE has issues when anything comes before the DTD.Yes!!! Don't trust Dreamweaver. That XML declaration throws it into quirks mode. I actually Download ed your page so that so that I could work on it, but I didn't see the XML declaration. I guess it got lost somewhere in the translation. Without that, I think you should be fine.
By the way - in case you'd considered it - never use any of DW's javascript - it's a bit on the crap side...Thanks for all the help, I got it to work now by using the container DIV. Funny thing is I already had a container coded in the html files called ParentDiv, but when I looked in my style sheet it wasn't there! I must have taken it out.