Body center FireFox different from IE 6 - HTML forum at WebmasterWorld - WebmasterWorld

Forum Moderators: open

Message Too Old, No Replies

Body center FireFox different from IE 6

Body center FireFox different from IE 6

myalom

6:08 am on Oct 22, 2006 (gmt 0)

10+ Year Member

I am trying to center the whole html page.
I added text-align: center to the body. It works on text for IE 6, and Firefox, but does not work for FireFox tables.
What is problem?
Here is the code

<html>
<head>
<title>Compare Center and Tables FF IE</title>
<style type="text/css">
<!--
body {
margin: 0;
padding: 0;
font-family: Verdana, Arial, sans-serif;
font-size: 0.8em;
text-align: center;
color: #000000;
background-color: ; /* #FDD800 for design only */
}

#LeftMenu table {background-color:#FEFEF0;border-color: #0000CC;border-width:1px;border-collapse:collapse;margin-top:3em;}
#LeftMenu td {
border-style: none none dotted none; border-bottom-color: Gray; border-collapse: separate; border-bottom: 1px dashed;
}
#LeftMenu td {font-family:verdana;}
#LeftMenu A:link {text-decoration:none;color:#5463C7;font-size:10px;margin-left: 4px;}
#LeftMenu A:visited {text-decoration:none;color:#5463C7;font-size:10px;}
#LeftMenu A:active {text-decoration:none;color:#5463C7;font-size:10px;}
#LeftMenu A:hover {text-decoration:underline;color:#5463C7;font-size:10px;}
-->
</style>
</head>

<body>

From U726
<table width="500" border="0" cellspacing="0" cellpadding="0" style="background-color: #DCDCDC;">

<tr>
<td valign="top" width="150">
<div id="leftmenu">
<table>

<tr>
<td ><a href='#'>UJ Viewbook</a>
</td>
</tr>

<tr>
<td><a href='#'>Welcome to the UJ</a>
</td>
</tr>

<tr>
<td><a href='#'>Admissions</a>
</td>
</tr>

</div>
</td>
</tr>
</table>
</body>
</html>

Robin_reala

8:27 am on Oct 22, 2006 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Your first problem is that you’ve commented out your DOCTYPE. This puts IE into ‘quirks’ mode; it starts behaving like an older version. Old versions of IE didn't understand centring properly and thought that text-align: center should also centre block level elements (like <div>s). So, the fix? Remove the comments around the DOCTYPE and apply auto margins to the left and right of your container, which in this case is a table:

table { margin: 0 auto; }

Of course you’d probably want to id or class that table so that all tables weren’t affected. Oh, and you also only need the text-align:center if you want backwards compatibility with IE5.

myalom

3:19 pm on Oct 22, 2006 (gmt 0)

10+ Year Member

I did try your fix.
As I am using IE 6 and still want to get to the bottom of the issue, I took out text-align: center from the body. Now it does show as I want in Foxfire but it in IE 6 it is now on the left. What is going on?
Thanks
The code now is:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Compare Center and Tables FF IE</title>
<style type="text/css">

</style>
</head>

<body>

From U726
<table id="container" width="500" border="0" cellspacing="0" cellpadding="0" style="background-color: #DCDCDC;">

<tr>
<td valign="top" width="150">
<div id="leftmenu">
<table>

<tr>
<td ><a href='#'>UJ Viewbook</a>
</td>
</tr>

<tr>
<td><a href='#'>Welcome to the UJ</a>
</td>
</tr>

<tr>
<td><a href='#'>Admissions</a>
</td>
</tr>

</div>
</td>
</tr>
</table>
</body>
</html>

Robin_reala

8:58 pm on Oct 22, 2006 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

You changed the DOCTYPE to an incomplete one (missing system parameter). If you replace it with the one in the original post - uncommented - then you’ll get the rendering you want. Alternatively, I’d suggest using the following. It’ll help you produce better code when you validate the site.

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

myalom

1:17 am on Oct 23, 2006 (gmt 0)

10+ Year Member

Thanks again.
This worked. But then I am loosing the dashed bottom border of the cells. Do you have a suggestion how to do that?
The effect I am looking for is like this

some text
--------------
some more text
--------------

without any table border
Thanks
Moshe