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