[HTML/CSS] IE messing up tables.

[Pieman]

I'm currently coding a blog layout, and everything looks good in firefox, but when I open it in IE, it somehow makes 2 brakes between "Cuteness+" and "Blog" and theres a weird line between the first text table and the second. You can see for yourself here: Untitled Document

This is the HTML 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>
<link href="css.css" rel="stylesheet" type="text/css" />
<title>Untitled Document</title>
</head>

<body bgcolor="#dfdfdf">

<table border="0" cellspacing="0" cellpadding="0" align="center">

<td><div class="sitemap">

<img src="http://forum.ragezone.com/images/home.png" width="50" height="20" />
<br/>
<img src="http://forum.ragezone.com/images/cuteness.png" width="92" height="20" />
<br/>
<img src="http://forum.ragezone.com/images/blog.png" width="43" height="20" />
<br/>
<img src="http://forum.ragezone.com/images/pieweb.png" width="66" height="20" />
<br/>
<img src="http://forum.ragezone.com/images/forum.png" width="58" height="20" />
</div></td>
<td><div class="banner"><img src="http://forum.ragezone.com/images/banner.jpg" height="227" width="465" /></div></td>

</table>

<table class="main" border="0" cellspacing="0" cellpadding="0" align="center">

<td background="http://forum.ragezone.com/images/back2.gif">
<div class="headerext">
<div style="float:right;">Sat 09/02/08</div>
Author: <font color="#FF0000"><b>Pieman</b></font>
<br/>
Subject: Lorem ipsum dolor
</div>
</td>

<tr><td background="http://forum.ragezone.com/images/back2.gif">
<div align="center"><img src="http://forum.ragezone.com/images/line.jpg" height="4" width="397" /></div>
</td></tr>

<tr><td background="http://forum.ragezone.com/images/back2.gif">
<div class="headerext">
---
</div>
</td></tr>

<tr><td background="http://forum.ragezone.com/images/back2.gif">
<div align="center"><img src="http://forum.ragezone.com/images/line.jpg" height="4" width="397" /></div>
</td></tr>

<tr><td>
<img src="http://forum.ragezone.com/images/bottom.gif" width="465" height="30" />
</td></tr>
</table>

<table class="main" border="0" cellpadding="0" cellspacing="0" align="center">

<tr><td>
<img src="http://forum.ragezone.com/images/top.gif" width="465" height="18" />
</td></tr>

<td background="http://forum.ragezone.com/images/back2.gif">
<div class="headerext">
<div style="float:right;">Fri 08/02/08</div>
Author: <font color="#a5bfc5"><b>Regular guy</b></font>
<br/>
Subject: Lorem ipsum dolor
</div>
</td>

<tr><td background="http://forum.ragezone.com/images/back2.gif">
<div align="center"><img src="http://forum.ragezone.com/images/line.jpg" height="4" width="397" /></div>
</td></tr>

<tr><td background="http://forum.ragezone.com/images/back2.gif">
<div class="headerext">
---
</div>
</td></tr>

<tr><td background="http://forum.ragezone.com/images/back2.gif">
<div align="center"><img src="http://forum.ragezone.com/images/line.jpg" height="4" width="397" /></div>
</td></tr>

<tr><td>
<img src="http://forum.ragezone.com/images/bottom.gif" width="465" height="30" />
</td></tr>

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

And the .css:

body {
margin: 0;
padding: 0;
background-image:url(images/back.gif); 
background-repeat:repeat-x
}
.main {
background-color:#ececec;
width:465px;
height:auto;
}
.headerext {
margin-bottom: 5px;
margin-left: 34px;
margin-right: 34px;
color: #a0a0a0;
font-family:Arial, Helvetica, sans-serif;
font-size: 11pt;
}
.sitemap {
margin-top: 0px;
margin-bottom: 30px;
margin-left: 0px;
margin-right: 0px;
color: #FFFFFF;
font-family:Arial, Helvetica, sans-serif;
font-size: 15pt;
}
.banner {
width:auto;
height:auto;
margin-right: 97px;
}

Any suggestions?

 

[Daevius]

Looks fine, can you be more specific on the problem?

 

[Pieman]

http://pie-designs.net/blog/help.jpg

The circled areas show the problems, the extra break between cuteness+ and blog, and the white line between the two posts shouldn't be there. It could be it's only my browser though. :eh:

 

[Daevius]

Sorry, forgot to view it in IE =/

IE is always vague in displaying stuff. Perhaps you should use CSS instead of tables to draw the layout...?

So, use background-image instead of <img> and remove all tables...HTML and CSS Tutorials, References, and Articles | HTML Dog

 

[Kolliper]

dont blame me if i am wrong but i got the same problems with my website. the fix is to make 2 .css files 1 for IE and 1 for FF. then edit them both to the exact good things.(srry for my bad english)
to check if you use IE or FF use this:

put it in between the <head></head> tags

<!--[if IE]>
    <link href="ie.css" rel="stylesheet" type="text/css" />
<!--[else]>
    <link href="ff.css" rel="stylesheet" type="text/css" />
<![endif]-->

edit for the buttons:
replace

<img src="http://forum.ragezone.com/images/home.png" width="50" height="20" />
<br/>
<img src="http://forum.ragezone.com/images/cuteness.png" width="92" height="20" />
<br/>
<img src="http://forum.ragezone.com/images/blog.png" width="43" height="20" />
<br/>
<img src="http://forum.ragezone.com/images/pieweb.png" width="66" height="20" />
<br/>
<img src="http://forum.ragezone.com/images/forum.png" width="58" height="20" />
</div></td>
<td><div class="banner"><img src="http://forum.ragezone.com/images/banner.jpg" height="227" width="465" /></div></td>

with

<img src="http://forum.ragezone.com/images/home.png" width="50" height="20" /><br/>
<img src="http://forum.ragezone.com/images/cuteness.png" width="92" height="20" /><br/>
<img src="http://forum.ragezone.com/images/blog.png" width="43" height="20" /><br/>
<img src="http://forum.ragezone.com/images/pieweb.png" width="66" height="20" /><br/>
<img src="http://forum.ragezone.com/images/forum.png" width="58" height="20" />
</div></td>
<td><div class="banner"><img src="http://forum.ragezone.com/images/banner.jpg" height="227" width="465" /></div></td>

this did work for me.

and for your other problem you should use the 2 css files fix otherwise it won't work

edit: i will try to make it work for you tomorrow(its kinda late now) if someone else didn't fix it already. cya all

 

[Pieman]

Well, that would have little use if a simple <br/> already gets messed up... I have no idea why it's doing this. Fucking microsoft lol.

 

[Ytys Vynsan]

Try a table less design, use pure css, using div class's to place objects of text/links/images/etc

 

[Pieman]

Yeah, I did that, recoded everything and only used one table for the post information (Author, subject, date). The rest is all divs. You can see it here: http://pie-designs.net/blog
But now I have another problem, the sitemap is click able in Firefox, but not in IE... :eh:

 

[Ytys Vynsan]

^^, there an error on firefox now, try using ??px instead of ??%

 

[Pieman]

I'm not getting any errors. And I am using px... :eh:

 

[Cask]

They look good in both FF & IE to me

 

[Pieman]

I've figured it out guys, added position: relative; to .sitemap . Not sure why this works, but that's just IE I guess.

Thanks to Pandy for helping me.

 

[DarkKnightH20]

Not trying to bump a thread that's ended, but nice layout. It's simple and has a good color scheme.

 

[DaRcAntiX]

Light-grey text on white background?