Website not aligning correctly in Internet Explorer

gordon · #1 (**permalink**) 07-02-2009, 12:43 PM

Hello everyone

I just uploaded my website template to see what it looks like. You can see the template here The website looks good in Firefox but not so good in Internet Explorer. I would like the website to be center aligned in both browsers. Firefox center aligns the website, but Internet Explorer doesn't. Can someone please look at my code and tell me what I have to change to make this happen.

Here is the code:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>Creating An Online Business 101</title>
</head>
<body style="color: rgb(0, 0, 0); background-color: rgb(233, 233, 233);"
 alink="#000099" link="#000099" vlink="#990099">
<table
 style="width: 714px; text-align: left; margin-left: auto; margin-right: auto;"
 border="0" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td style="text-align: center;"><a href="index.html"><img
 style="border: 0px solid ; width: 714px; height: 224px;" alt="Header"
 src="../images/header.jpg"></a><br>
      </td>
    </tr>
  </tbody>
</table>
<table
 style="width: 714px; text-align: left; margin-left: auto; margin-right: auto;"
 background="../images/background.jpg" border="0" cellpadding="0"
 cellspacing="0">
  <tbody>
    <tr>
      <td style="width: 20px; text-align: center;"></td>
      <td style="vertical-align: top; text-align: center;"></td>
      <td style="width: 20px; text-align: center;"><br>
      </td>
    </tr>
  </tbody>
</table>
<table
 style="width: 714px; text-align: left; margin-left: auto; margin-right: auto;"
 border="0" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td style="text-align: center;"><img
 style="width: 714px; height: 115px;" alt="Footer"
 src="../images/footer.jpg"></td>
    </tr>
  </tbody>
</table>
</body>
</html>

Thanks in advance,
Gordon

gordon · #2 (**permalink**) 07-03-2009, 11:19 AM

Have I posted in the wrong forum? I am still unable to resolve this issue, please help.

**htmlbasictutor** · #3 (**permalink**) 07-03-2009, 11:48 AM

Ok, first of all, you would benefit from moving all that inline styling to an external stylesheet. Why? Because in the future when you want to make changes you will have make changes in one spot instead of opening every single page and editing them.

You have set the text-align of your tables to left.
a) this is the default so it isn't necessary to spec this.
b) this would be one reason why the content appears to not be centered.

If you are going to have empty cells in your table, then put a non-breaking space in the cell. Some browsers have issues with empty cells.

Try those fixes and come back if you still have issues.

gordon · #4 (**permalink**) 07-03-2009, 06:52 PM

Quote:

Originally Posted by htmlbasictutor

Ok, first of all, you would benefit from moving all that inline styling to an external stylesheet. Why? Because in the future when you want to make changes you will have make changes in one spot instead of opening every single page and editing them.

You have set the text-align of your tables to left.
a) this is the default so it isn't necessary to spec this.
b) this would be one reason why the content appears to not be centered.

If you are going to have empty cells in your table, then put a non-breaking space in the cell. Some browsers have issues with empty cells.

Try those fixes and come back if you still have issues.

Hello htmlbasictutor

Thanks for the reply. I will work on the CSS once I get this alignment issue fixed. I have set the text align of my tables to center and have also added a non breaking space to the empty cells. Unfortunately the tables are still only centered aligned in Firefox and not in Internet Explorer.

Here is the new code:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>Creating An Online
Business 101</title>
</head>
<body style="color: rgb(0, 0, 0); background-color: rgb(233, 233, 233);"
 alink="#000099" link="#000099" vlink="#990099">
<table
 style="width: 714px; text-align: center; margin-left: auto; margin-right: auto;"
 border="0" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td style="text-align: center;"><a href="index.html"><img
 style="border: 0px solid ; width: 714px; height: 224px;" alt="Header"
 src="../images/header.jpg"></a><br>

      </td>
    </tr>
  </tbody>
</table>
<table
 style="width: 714px; text-align: center; margin-left: auto; margin-right: auto;"
 background="../images/background.jpg" border="0" cellpadding="0"
 cellspacing="0">
  <tbody>
    <tr>
      <td style="width: 20px; text-align: center;"></td>
      <td style="vertical-align: top; text-align: center;">&nbsp;</td>
      <td style="width: 20px; text-align: center;"><br>

      </td>
    </tr>
  </tbody>
</table>
<table
 style="width: 714px; text-align: center; margin-left: auto; margin-right: auto;"
 border="0" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td style="text-align: center;"><img
 style="width: 714px; height: 115px;" alt="Footer"
 src="../images/footer.jpg"></td>
    </tr>
  </tbody>

</table>
</body>
</html>

Did I miss something?

Thanks
Gordon

Costin Trifan · #5 (**permalink**) 07-03-2009, 07:10 PM

try to add the align: center attribute to body; see what happens

**htmlbasictutor** · #6 (**permalink**) 07-03-2009, 08:30 PM

References:
Document Type Declaration
Declaring Character Encoding
The HTML Document Structure

"This document was successfully checked as HTML 4.01 Transitional!"
This works in IE and FF.

It's not pretty. Instead of using a table for your content in the middle, I'd use divs.

Move the CSS to an external stylesheet and don't forget to add the link to it in the head. How to link the stylesheet is in the HTML Document Structure article referenced above.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Creating An Online Business 101</title>
<style type="text/css">
body {
	margin: 0px;
	padding: 0px;
	color: rgb(0, 0, 0); 
	background-color: rgb(233, 233, 233);
}
A:link {
	color: #000099;
}
A:visited {
	color: #990099;
}
img {
	border: none;
}
#header {
	width: 714px;
	margin-left: auto;
	margin-right: auto;
}
#wrapper {
	width: 714px;
	margin-left: auto;
	margin-right: auto;
	background: url(.../images.background.jpg);
}
#footer {
	width: 714px;
	margin-left: auto;
	margin-right: auto;
}
.leftcolumn {
	width: 20px;
}
.centercolumn {
	width: 674px;
}
.righttcolumn {
	width: 20px;
}

</style>
</head>
<body>
<div id="header"> 
  <p><a href="http://www.yourdomainname.com/"><img src="../images/header.jpg" width="714" height="224" alt=""></a></p>
</div>
<div id="wrapper"> 
  <table border="0" cellpadding="0" cellspacing="0" summary="Content">
    <tr valign="top"> 
      <td class="leftcolumn">This is your left column</td>
      <td class="centercolumn">This is your center column</td>
      <td class="rightcolumna">This is your right column</td>
    </tr>
  </table>
</div>
<div id="footer"> 
  <p><img src="../images/footer.jpg" width="714" height="115" alt="Footer"></p>
</div>
</body>
</html>

webopius · #7 (**permalink**) 07-04-2009, 01:50 AM

...and here's a version without tables using divs. As said before, get those styles into an external stylesheet.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Creating An Online Business 101</title>

<style type="text/css">
* {
  margin: 0px;
  padding: 0px;
  border: 0px;
}
body {
width: 714px;
margin: auto;
color: rgb(0, 0, 0); background-color: rgb(233, 233, 233);
}
.header {
width: 100%;
text-align: center;
height: 224px; 
}
.footer {
width: 100%;
text-align: center;
}
.pagecontent {
width: 100%;
background: url(http://createanonlinebiz.com/images/background.jpg) repeat-y;
}
</style>
</head>
<body>
<div class="header">
<a href="index.html">
<img alt="Header" src="http://createanonlinebiz.com/images/header.jpg"/>
</a>
</div>

<div class="pagecontent">
&nbsp;
</div>
<div class="footer">
<img alt="Footer" src="http://createanonlinebiz.com/images/footer.jpg">
</div>
</body>
</html>

gordon · #8 (**permalink**) 07-04-2009, 04:33 PM

This is what I have now:

stylesheet.css

Code:

body {
	margin: 0px;
	padding: 0px;
	color: rgb(0, 0, 0); 
	background-color: rgb(233, 233, 233);
}
.header {
	width: 100%;
	height: 224px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}
A:link {
	color: #000099;
}
A:visited {
	color: #990099;
}
img {
	border: none;
}

.wrapper {
	width: 714px;
	margin-left: auto;
	margin-right: auto;
	background: url(http://createanonlinebiz.com/images/background.jpg) repeat-y;
}
.footer {
	width: 100%;
	height: 115px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}
.leftcolumn {
	width: 20px;
}
.centercolumn {
	width: 674px;
	text-align: center;
}
.righttcolumn {
	width: 20px;

index.html

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>Creating An Online
Business 101</title>
  <link rel="stylesheet" type="text/css" href="styles/stylesheet.css">
</head>
<body>
<div align="center">
<div class="header"><a href="index.html"><img alt="Header"
 src="../images/header.jpg"></a></div>
<div class="wrapper">
<table summary="Content" border="0" cellpadding="0" cellspacing="0">
  <tbody>

    <tr valign="top">
      <td class="leftcolumn"></td>
      <td class="centercolumn">This
is your center column</td>
      <td class="rightcolumna"></td>
    </tr>
  </tbody>
</table>
</div>
<div class="footer">
<img alt="Footer" src="../images/footer.jpg"></div>

</div>
</body>
</html>

I finally got the website to be center aligned in both Firefox and Internet Explorer. I accomplished this by placing <div align="center"> after the <body> tag. The website looks pretty much identical in both browsers.

I would like to replace the table with divs. Can someone please help me accomplish this. I have already tried using divs instead of tables and have failed miserably.

Thanks in advance
Gordon

Costin Trifan · #9 (**permalink**) 07-04-2009, 07:16 PM

I only tested this in FF 3.5 and IE8.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">

body {
	margin: 0;
	padding: 0;
	color: #000; 
	background-color: rgb(233, 233, 233);
}

#layout {
	width: 714px; margin: 0 auto;
}

.header {
	width: 100%;
	height: 224px;
	text-align: center;
	margin: 0 auto;
}
A:link {
	color: #000099;
}
A:visited {
	color: #990099;
}
img {
	border: none;
}

.wrapper {
	width: 714px;
	margin: 0 auto;
	background: url("http://createanonlinebiz.com/images/background.jpg") repeat-y;
	overflow: hidden; min-height: 1px;
}
.footer {
	width: 100%;
	height: 115px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}
.leftcolumn {
	width: 20px;
	float: left; display: block; margin: 0 0; padding: 0 0;
	/* delete the following declarations; they're here just for debug */
	height: 200px; background: #ebebeb;
}
.centercolumn {
	width: 674px;
	text-align: center;
	float: left; display: block; margin: 0 0; padding: 0 0;
	/* delete the following declarations; they're here just for debug */
	height: 200px; background: #ccc;
}
.righttcolumn {
	width: 20px;
	float: left; display: block; margin: 0 0; padding: 0 0;
	/* delete the following declarations; they're here just for debug */
	height: 200px; background: #ddd;
}


</style>

</head>

<body>
<div id="layout">

	<div class="header">
    	<a href="index.html"><img alt="Header" src="../images/header.jpg"></a>
    </div>

	<div class="wrapper">
    
    	<div class="leftcolumn">
        	<span>LEFT</span>
        </div>

    	<div class="centercolumn">
        	<span>CENTER</span>
        </div>

    	<div class="righttcolumn">
        	<span>RIGHT</span>
        </div>
    
    </div>

</div>
</body>
</html>

webopius · #10 (**permalink**) 07-05-2009, 01:22 AM

Hi Gordon,
See my response above. This is a solution without using any tables. It also uses a fewer number of divs making the source code cleaner to follow.

gordon · #11 (**permalink**) 07-05-2009, 08:31 PM

Hello everyone

I was unable to get the website to display correctly (completely my fault). So I decided to keep the original coding. You can view the full website createanonlinebiz.com/ The next site that I make will use external CSS and hopefully no tables. I am still having issues with the site not being center aligned in Internet Explorer. So if you could find a fix for me it would be greatly appreciated. I don't wish to change the coding too much.

Thanks so much
Gordon