Sun, 2004-07-25 18:41
Howdy fellow CSS addicts!
I'm whipping up an XHTML 1.0 transitional page, and I'm having trouble getting IE 6.0.2 to display the page the same way as Firefox.
Firefox gives me: this.
While IE6 gives me: this.
So basically I'm trying to figure out why there is a difference in the margin of my UL item, and why the background won't show up in IE6.
Here is the XHTML:
<!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>
<title>Welcome</title>
<link rel="stylesheet" href="personal.css" type="text/css" media="all" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
</head>
<body>
<table id="maintable" summary="maintable" width="700" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" height="56">
<img src="images/header_final.gif" width="700" height="56" alt="Ryan Mears - Freelance webdesign" />
</td>
</tr>
<tr>
<td id="main_content" width="550" height="400">
<p class="main_content">This is main content</p>
<ul class="main_content">
<li>this is a list in a paragraph</li>
</ul>
</td>
<td id="navbar" width="150" height="400">
<p class="navbar">This is portfolio space</p>
</td>
</tr>
<tr>
<td colspan="2" height="12">
<img src="images/footer.gif" width="700" height="12" alt="footer" />
</td>
</tr>
</table>
</body>
</html>
Now my CSS:
body
{
font-family: tahoma;
font-size: 11px;
color: #000;
background: #666666;
margin: 25px 0;
padding: 0;
}
#maintable
{
background:#ffffff;
}
td#main_content
{
background: transparent url(images/main_content_background.gif)center
no-repeat;
border: 1;
vertical-align: top;
}
p.main_content
{
margin-top: 20px;
margin-left: 20px;
}
ul.main_content
{
margin-left:20px;
}
/* Navigation bar */
td#navbar
{
vertical-align: top;
border-left: 1px dashed #666666;
}
p.navbar
{
margin-top:20px;
margin-left: 5px;
}
Any suggestions you could provide would be much obliged!
