HTML and Scripting Browser Compatibility Troubles

Discussion in 'Computers' started by Sebastien, Nov 28, 2004.

  1. Sebastien

    Sebastien Guest

    I just finished a layout, and for some reason it works fine in Firefox but not in Internet Explorer. I'm trying to figure out why, but I can't seem to. Here's the link.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" lang="en">
<head>
<title>Fanlistings [at] StabbedyNET</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
body {margin-top: 0; margin-left: 0; margin-bottom: 0; background-image: url("img/01.jpg");}
table.main {height: 100%; width: 748px; border: 0;}
table.sec {height: 100%; width: 748px; border: 0;}
td.banner {height: 72px; background-image: url("img/02.jpg"); background-position: center right; background-repeat: no-repeat;}
td.bottom {height: 87px; background-image: url("img/03.jpg"); background-align: top left; background-repeat: no-repeat; background-color: #E9DECC;;}
td.collective {height: 28px; width: 247px; background-image: url("img/04.jpg");}
td.fanlists {height: 18px; width: 247px; background-image: url("img/05.jpg");}
td.header {height: 11px; background-image: url("img/06.jpg"); background-position: center left; background-repeat: no-repeat; background-color: #E9DECC;}
td.left {width: 82px; background-color: transparent;}
td.middle {width: 12px; background-image: url("img/07.jpg"); background-repeat: no-repeat; background-position: top left; background-color: transparent;}
td.new {height: 121px; width: 247px; background-color: #E3C38A; background-image: url("img/08.gif"); background-position: center right; background-repeat: repeat-y;}
td.news {height: 14px; background-image: url("img/09.jpg");}
td.newsleft {height: 23px; width: 82px; background-color: #E9DECC; background-image: url("img/08.gif"); background-position: center right; background-repeat: repeat-y;}
td.newstext {height: 23px; width: 455px; background-color: #E4C692;}
td.newsright {height: 23px; width: 210px; background-image: url("img/10.jpg");}
td.newtwo {height: 157px; width: 247px; background-color: #E3C38A; background-image: url("img/08.gif"); background-position: center right; background-repeat: repeat-y;}
td.right {width: 41px; background-image: url("img/12.jpg");}
td.text {width: 365px; background-image: url("img/13.jpg"); background-position: top left; background-repeat: no-repeat; background-color: transparent; vertical-align: top;}
td.titles {height: 40px; width: 247px;}
</style>
</head>

<body>

<table class="main" cellpadding="0" cellspacing="0">

<tr>
<td class="header" colspan="3"></td>
</tr>

<tr>
<td class="banner" colspan="3"><div style="position: absolute; width: 514px; height: 72px; top: 11px; background-color: #E9DECC;"></div></td>
</tr>

<tr>
<td class="news" colspan="3"></td>
</tr>

<tr>
<td class="newsleft"></td>
<td class="newstext"></td>
<td class="newsright"></td>
</tr>

<tr>
<td colspan="3">
<!-- Main Content -->
<table class="sec" cellspacing="0" cellpadding="0">
<tr>
<td class="left" rowspan="9"></td>
<td class="text" rowspan="9"><div style="height: 100%; padding-top: 23px; padding-left: 5px; padding-right: 5px; text-align: left;">A</div></td>
<td class="middle" rowspan="9"></td>
<td class="fanlists"></td>
<td class="right" rowspan="8"></td>
</tr>
<tr>
<td class="new"></td>
</tr>
<tr>
<td class="titles"><img src="img/14.jpg" alt="" /></td>
</tr>

<tr>
<td class="newtwo"></td>
</tr>

<tr>
<td class="titles"><img src="img/11.jpg" alt="" /></td>
</tr>

<tr>
<td class="newtwo"></td>
</tr>

<tr>
<td class="collective"></td>
</tr>

<tr>
<td class="bottom" colspan="2"></td>
</tr>
</table>
<!-- // Main Content // -->
</td>
</tr>

</table>

</body>
</html>
     
    #1
    Sebastien, Nov 28, 2004
  2. Valant Rapitor

    Valant Rapitor A Hungry Weeble

    Joined:
    Jun 11, 2004
    Messages:
    266
    Likes Received:
    25
    From what I've experienced in making new image-oriented pages, you can only ask the makers of the browsers themselves. But I've stopped using complete images for my pages, since something like the dreadful 1-pixel shoveoff always happens.

    Firefox and IE are incompatible because of the competitiveness of their respective companies. This started ever since Netscape and IE competed. IE would make a new code, and Netscape would make a new code. And while they try to make their browsers compatible with that new code, their interpretation algorithms are never the same, thus those little changes. This is most evident in tables.

    If you took out that <tr> <td colspan="3"> right before your content table, it looks fine in both. I don't think it serves much purpose as a buffer, anyway. <_<

    Code:
    <tr>
<td class="newsleft"></td>
<td class="newstext"></td>
<td class="newsright"></td>
</tr>

<tr> <----- Die
<td colspan="3"> <-- You Too
<!-- Main Content -->
     
    #2
    Valant Rapitor, Nov 28, 2004
    1 person likes this.
  3. Sebastien

    Sebastien Guest

    It actually worked.. Wow. Thanks a lot, Valant!
     
    #3
    Sebastien, Nov 28, 2004

Share This Page