Webpage renders differently on different browsers

webnewman · Joined: 05 Apr 2008 Posts: 1

Hi all,
I have a webpage that renders drastically different in different browsers. I understand that there will usually be differences in how different browsers render a webpage. However, I don't think that it should be as drastic as what I am seeing. I have validated my html tags and they have passed, so that led me to believe that the discrepancy is not due to bad coding. Below are my tags for the webpage, I have removed all the nonessentials such as images and replaced them with colors. Please take a look to see if you could find the reason for the problem. I apologize for the lengthy tags, please bear with me. Any suggestions will be greatly appreciated, thanks in advance for your help.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<title>
Welcome2
</title>
<style>
body {margin:0px 10px 0px 10px; padding:0px;}
a:link {color:#df7618;text-decoration:none}
a:active {color: Red}
a:visited {color:orange;font-family:arial, verdana, sans-serif; /* ADDED */}
a:hover {background:#7A5DC7;color:yellow;}
</style>

</head>
<body>

<table border="0" cellpadding="0" cellspacing="0" style="z-index: 100; left: 0px;
width: 1024px; position: absolute; top: 0px; height: 101px">
<tr>
<td style="width: 109px;background-color:brown;"></td>
<td style="width: 806px; font-style:italic; font-size:56px;background-color:blue; color: orange; text-align:center;">Welcome</td>
<td style="width: 109px; background-color:brown; "></td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" style="z-index: 101;left:0px;width:1024px;position: absolute; top: 101px; height: 140px">
<tr>
<td style="width: 109px; background-color:purple; ">&nbsp</td>
<td style="width: 806px; background-color:black">
<table border="1" cellpadding="0" cellspacing="0" style="z-index: 101;width:790px; text-align:top; left: 117px; font-size:16px; position:absolute;height:101px;top: 101px;">

<tr >
<td style="width: 147px;height:34px;color:white; height:34px; text-align:center ">
<A href="Home.html">Home</A></td>
<td style="width: 147px;color:white; height:34px; text-align:center">
<A href="AboutUs.html">About Us</A></td>
<td style="width: 202px;color:Yellow; text-align:center">
<A href="Ifoundation.html">Stuff </A></td>
<td style="width: 147px;color:white; height:34px; text-align:center">
<A href="Contact.html">Contact Us</A></td>
<td style="width: 147px;color:white; height:34px; text-align:center ">
<A href="Cams.html"> More Stuff</A></td>
</tr >
<tr>
<td style="width: 147px;color:white; height:34px; text-align:center ">
<A href="Subscribe.html">Subscriptions</A></td>
<td style="width: 147px;color:white; height:33px; text-align:center ">
<A href="Current.html">Current Issue</A></td>
<td style="width: 202px;color:white; height:33px; text-align:center ">
<A href="Previous.html">Previous Issues</A></td>
<td style="width: 147px;color:white; height:33px; text-align:center ">
<A href="Advertising.html">Advertising</A></td>
<td style="width: 147px;color:white; height:33px; text-align:center ">
<A href="Links.html">Related Links</A></td>
</tr>

<tr>
<td style="width: 147px;color:white; height:34px; text-align:center ">
<A href="Locations.html">Pick Up Locations</A></td>
<td style="width: 147px;color:white; height:34px; text-align:center ">
<A href=".html"></A></td>
<td style="width: 202px;color:white; height:34px; text-align:center ">
<A href="Lookin4.html">Whatcha Lookin For</A></td>
<td style="width: 147px;color:white; height:34px; text-align:center ">
<A href=".html"></A></td>
<td style="width: 147px;color:white; height:34px; text-align:center ">
<A href="Special.html">Special Editions</A></td>
</tr>
</table>
</td>
<td style="width: 109px; background-color:purple;">&nbsp</td>
</tr>
</table>

</body>
</html>

rangana

Hi Webnewman,

and a warm Welcome to the forums Wink

I see in your code that you had a lot of absolute positioning. For me, it's not that good because you'll have difficulty changing a layout without changing the whole. As what Dan said in one of the forums, it provides a brittle layout. Smile

Just a quick fix, change this part of your code: