I have used tables for years and am now starting to learn CSS. I am re-designing (with cc s/w) one of my sites using CSS and in IE7 the page is centered and in FF2 it is fixed to the left of the page. I have searched and searched to see what I can do but have drawn a blank.
The test page is http://www.motormadness.net/test/fun.htm Can anyone advise where I am going wrong or the extra code required for FF2.
(The page width is 775px so users with 800x600 can view it OK without scrolling to the right).
Regards
Thierry
Thierry Seal
Registered User
32 posts
Cliff Main
Registered User
2,138 posts
First chance you get, remove the . from the end of your link so it works please....I will let you know if I find anything in your code that can be fixed for FF to work propery.
E-Learning Specialist
www.mainsites.ca is my website, and yes, some of it is crappy.
www.mainsites.ca is my website, and yes, some of it is crappy.
Cliff Main
Registered User
2,138 posts
Thierry,
One of the advantages of .css positioning is that you can use it to get rid of your tables. You are using a combination of css and tables to position your content in the centre (Canadian spelling) of your page. From what I see of the code(s), FF is displaying the page properly, and I.E. has entered into "Quirks Mode" and is guessing that you want the page in the middle.
Your main table on the web page in html coding does not say where to position it:
Your code in the .css does not say where to position your main table or content:
You will need to tell one or the other where you want the page, otherwise it will show up wherever the browser thinks it should go.
I would suggest making a #container for css that you can wrap your entire page in a <div="container"> tag. Don't forget to close the </div> at the end of your html code. The css will look something like this:
Change the width to whatever you want for your page. The margin:0 auto; will help to tell FF that you want no margin and the position for left and right space is equal, which will center your page.
Keep in mind that in FF, when you have a page that needs the scroll bar, it will move your content to the left a few pixels to accomodate for the width of the scroll bar.
Hope that helps explain how to and why for.
Happy holidays.
One of the advantages of .css positioning is that you can use it to get rid of your tables. You are using a combination of css and tables to position your content in the centre (Canadian spelling) of your page. From what I see of the code(s), FF is displaying the page properly, and I.E. has entered into "Quirks Mode" and is guessing that you want the page in the middle.
Your main table on the web page in html coding does not say where to position it:
<div id="main_page">
<!-- Header Table -->
<table width="775" height="150" border="0" cellspacing="0" cellpadding="0">
<!-- Header Table -->
<table width="775" height="150" border="0" cellspacing="0" cellpadding="0">
Your code in the .css does not say where to position your main table or content:
#main_page {
width: 775px;
background: white;
height: 100%;
border: 1px solid #666666;
/*position:relative;left:5px;top:5px;*/
}
width: 775px;
background: white;
height: 100%;
border: 1px solid #666666;
/*position:relative;left:5px;top:5px;*/
}
You will need to tell one or the other where you want the page, otherwise it will show up wherever the browser thinks it should go.
I would suggest making a #container for css that you can wrap your entire page in a <div="container"> tag. Don't forget to close the </div> at the end of your html code. The css will look something like this:
div#container{width:775px;margin:0 auto;}
Change the width to whatever you want for your page. The margin:0 auto; will help to tell FF that you want no margin and the position for left and right space is equal, which will center your page.
Keep in mind that in FF, when you have a page that needs the scroll bar, it will move your content to the left a few pixels to accomodate for the width of the scroll bar.
Hope that helps explain how to and why for.
Happy holidays.
E-Learning Specialist
www.mainsites.ca is my website, and yes, some of it is crappy.
www.mainsites.ca is my website, and yes, some of it is crappy.
sstovert@satx.rr.com
Guest
5,410 posts
This will center your container in all browsers. Another way to code it along with what Cliff posted.
#container {
width: 750px;
margin-left: auto;
margin-right: auto;
}
I like the clean look of your page. Merry Christmas.
#container {
width: 750px;
margin-left: auto;
margin-right: auto;
}
I like the clean look of your page. Merry Christmas.
CoffeeCup... Yeah, they are the best!
Thierry Seal
Registered User
32 posts
Thank you to both Cliff Main and Tom for your assistance. I have made the change and it has worked. I am so pleased as I spent hours and hours trying to get this to work before hand and failed. CSS book requested for Christmas 
Thank you again and have a Great Christmas.
Thank you again and have a Great Christmas.
Mehmet Yuce
Registered User
6 posts
Why doesn't this work on my page? I copied and pasted the code in the style sheet;
#content {
width: 750px;
margin-left: auto;
margin-right: auto;
}
Then I inserted this in to the page;
<body>
<div="content">
...There is a table in this section...
</div>
</body>
I want the table to be centered, but it doesn't... By the way I'm using IE7.
#content {
width: 750px;
margin-left: auto;
margin-right: auto;
}
Then I inserted this in to the page;
<body>
<div="content">
...There is a table in this section...
</div>
</body>
I want the table to be centered, but it doesn't... By the way I'm using IE7.
sstovert@satx.rr.com
Guest
5,410 posts
That will center the div, not the content in the div. To center the table use this:
<table align="center">
<table align="center">
CoffeeCup... Yeah, they are the best!
Mehmet Yuce
Registered User
6 posts
Thanks Tom,
But I think I'm missing something here. I thought that div meant division, and whatever the rule I have on the style sheet could be applied to a certain region on the web page if I enclose that region with <div> </div> tags. So I don't know what you mean when you say it will center the div but not the contents of the div. Also after I use the code from your post my page is still not centered nor it is 750 pixels wide. Sorry if my questions sound confusing, but it's probably because I'm confused...
But I think I'm missing something here. I thought that div meant division, and whatever the rule I have on the style sheet could be applied to a certain region on the web page if I enclose that region with <div> </div> tags. So I don't know what you mean when you say it will center the div but not the contents of the div. Also after I use the code from your post my page is still not centered nor it is 750 pixels wide. Sorry if my questions sound confusing, but it's probably because I'm confused...
David Sellers
Ambassador
426 posts
mehmetyuce@optonline.net wrote:
#content {
width: 750px;
margin-left: auto;
margin-right: auto;
}
Then I inserted this in to the page;
<body>
<div="content">
...There is a table in this section...
</div>
</body>
#content {
width: 750px;
margin-left: auto;
margin-right: auto;
}
Then I inserted this in to the page;
<body>
<div="content">
...There is a table in this section...
</div>
</body>
Your div tag should look like this <div id="content">
Let's not get all hurt.
sstovert@satx.rr.com
Guest
5,410 posts
That would help, wouldn't it? Sorry for the code error.
CoffeeCup... Yeah, they are the best!
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.
