PDA

View Full Version : Website all messed up on IE6/7 but not on macs


Jazzinaz
08-09-2008, 12:30 AM
Hello Everyone.

I just launched my first website www.hippocketband.net (http://www.hippocketband.net) and came across a huge issue. I built the site using photoshop and dreamweaver on Mac OS X. While spending A CRAP LOAD of hours building my first website I noticed that when you are previewing my site on a PC windows Explorer my site gets all rearranged and messed up. But on a mac via safari, firefox and opera it looks perfect. I am pasting my index.html code below please help if you can.


<html>
<head>
<title>hip_pocket_home</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="home/site_home.css" rel="stylesheet" type="text/css">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (hip_pocket_home.psd) -->
<div id="site_home">
<div id="site_home">
<table width="900" height="676" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
<tr>
<td colspan="2" rowspan="3">
<img src="images/hip_pocket_home_01.jpg" width="242" height="183" alt=""></td>
<td colspan="2">
<a href="index.html"><img src="images/hip_pocket_home_02.jpg" width="51" height="71" border="0" alt=""></a></td>
<td>
<a href="about us/about_us.html"><img src="images/hip_pocket_home_03.jpg" width="74" height="71" border="0"alt=""></a></td>
<td>
<a href="the players/the_Players.html"><img src="images/hip_pocket_home_04.jpg" width="87" height="71" border="0" alt=""></a></td>
<td>
<a href="media/media.html"><img src="images/hip_pocket_home_05.jpg" width="58" height="71" border="0" alt=""></a></td>
<td>
<a href="reviews/review1.html"><img src="images/hip_pocket_home_06.jpg" width="66" height="71" border="0" alt=""></a></td>
<td>
<a href="contact us/contact_us.html"><img src="images/hip_pocket_home_07.jpg" width="87" height="71" border="0" alt=""></a></td>
<td colspan="3">
<img src="images/hip_pocket_home_08.jpg" width="235" height="71" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/hip_pocket_home_09.jpg" width="1" height="112" alt=""></td>
<td colspan="7"><img src="images/logo.jpg" width="423" height="108" alt=""></td>
<td colspan="2" rowspan="2">
<img src="images/hip_pocket_home_11.jpg" width="234" height="112" alt=""></td>
</tr>
<tr>
<td colspan="7">
<img src="images/hip_pocket_home_12.jpg" width="423" height="4" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/hip_pocket_home_13.jpg" width="172" height="492" alt=""></td>
<td colspan="10">
<img src="images/group pic.jpg" width="559" height="316" alt=""></td>
<td rowspan="2">
<img src="images/hip_pocket_home_15.jpg" width="169" height="492" alt=""></td>
</tr>
<tr>
<td colspan="10">
<img src="images/hip_pocket_home_16.jpg" width="559" height="176" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="172" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="70" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="50" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="74" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="87" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="58" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="66" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="87" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="65" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="169" height="1" alt=""></td>
</tr>
</table>
</div>
</div>
<!-- End ImageReady Slices -->
</body>
</html>

edbr
08-09-2008, 01:23 AM
on your index page
mistake 1
<div id="site_home">
<div id="site_home">
cant duplicate div id
you have body bgcolor="#FFFFFF" if you use #000000 it will eliminate the white at the footer
looking at your about page you are using 2 css sheets as well as absolute divs + styles in styles on your page. get all your stylings in one css file and link your pages to it. This will be easier to de bug as well as standardising your site as you just have a few pages

Cary
08-09-2008, 01:31 AM
You also need a doctype before your opening html tag. Without it, IE will render even more differently than other browsers as it will use IE5's broken box model.

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

Ricky55
08-09-2008, 12:38 PM
always preview in Internet explorer as you build as its notoriously crap

Jazzinaz
08-12-2008, 06:34 PM
Thanks everyone! I will work on the aforementioned! You guys rock!