No replies
Ryyo
Offline
Regular
East Lansing MI
Last seen: 18 years 41 weeks ago
East Lansing MI
Joined: 2003-04-16
Posts: 13
Points: 0

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.

This is my page

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!

Smile