PDA

View Full Version : Website doesn't view correctly in IE


srt9687
03-24-2010, 03:59 AM
Hello,
My website has borders around images and the alignment is off when I view it in Internet Explorer. It works fine in Google Chrome. Please help. The site is www.littleboxbigbox.com (http://www.littleboxbigbox.com) Here is my code for the most problematic page. Thanks!
<%@LANGUAGE="JAVASCRIPT" CODEPAGE="65001"%>
<!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"><!-- InstanceBegin template="/Templates/main.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
<style type="text/css">
<!--
#wrapper {
position:relative;
top:10px;
width:1000px;
height:900px;
z-index:1;
margin: auto;
}
#header {
position:absolute;
left:7px;
top:0px;
width:790px;
height:135px;
z-index:2;
}
#right {
position:absolute;
left:146px;
top:138px;
width:622px;
height:411px;
z-index:4;
text-align: justify;
}
#left {
position:absolute;
left:9px;
top:138px;
width:133px;
height:400px;
z-index:3;
}
#leftnav {
position:absolute;
left:6px;
top:7px;
width:102px;
height:286px;
z-index:1;
font-family: "Franklin Gothic Heavy";
font-size: 12pt;
color: #000;
text-decoration: none;
padding: 10px;
float: left;
text-align: right;
}
-->
</style>
<link href="jt-print.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrapper"><!-- InstanceBeginEditable name="header" --></a>
<div id="header"><a href="index.htm"><img src="images/starheaderredux.jpg" alt="starheader" width="713" height="130" hspace="30" /></a></div>
<!-- InstanceEndEditable --><!-- InstanceBeginEditable name="content" -->
<div id="right"><a href="b17.htm"><img src="images/Clips/B-17 clip.png" width="142" height="97" alt="b17" /></a><a href="babyface.htm"><img src="images/Clips/Babyface clip.png" alt="babyface" width="142" height="97" hspace="3" /></a><a href="blueyinyang.htm"><img src="images/Clips/blue YinYang clip.png" alt="blueyinyang" width="142" height="97" hspace="3" /></a><a href="icecream.htm"><img src="images/Clips/Ice Cream clip.png" name="icecream" width="142" height="97" id="icecream" /></a><a href="metropolis.htm"><img src="images/Clips/Metropolis clip.png" alt="metropolis" width="142" height="97" hspace="0" vspace="3" /></a><a href="newspaper.htm"><img src="images/Clips/Newspaper grid box clip.png" alt="newspaper" width="142" height="97" hspace="3" vspace="3" /></a><a href="reddemon.htm"><img src="images/Clips/Red Demon clip.png" alt="reddemon" width="142" height="97" hspace="3" vspace="3" /></a><a href="planetx.htm"><img src="images/Clips/planet clip.png" alt="planetx" width="142" height="97" vspace="3" /></a><a href="salamander.htm"><img src="images/Clips/salamander spotted clip.png" alt="salamander" width="142" height="97" hspace="0" vspace="3" /></a><a href="spikedbox.htm"><img src="images/Clips/Spike box w-head clip.png" alt="spikebox" width="142" height="97" hspace="3" vspace="3" /></a><a href="shooter.htm"><img src="images/Clips/shooter two clip.png" alt="shooter" width="142" height="97" hspace="3" vspace="3" /></a><a href="snake.htm"><img src="images/Clips/snake clip.png" alt="snake" width="142" height="97" vspace="3" /></a><a href="threegolfballs.htm"><img src="images/Clips/three golf balls clip.png" alt="threegolf" width="142" height="97" hspace="0" vspace="3" /></a><a href="treecolored.htm"><img src="images/Clips/tree colored clip.png" alt="treecolored" width="142" height="97" hspace="3" vspace="3" /></a><a href="voodo.htm"><img src="images/Clips/voodo clip.png" alt="voodo" width="142" height="97" hspace="3" vspace="3" /></a><a href="erectfunnel.htm"><img src="images/Clips/erect funnel clip.png" alt="erectfunnel" width="142" height="97" hspace="0" vspace="3" /></a></div>
<!-- InstanceEndEditable -->
<div id="left">
<div id="leftnav">
<p><a href="the-artist.htm">The artist</a></p>
<p><a href="bio.htm">Biography</a></p>
<p><a href="gallery.htm">Gallery</a></p>
<p><a href="works-in-progress.htm">In progress</a></p>
<p><a href="contact-info-sarah.htm">Contact</a></p>
</div>
</div>
</div>
</body>
<!-- InstanceEnd --></html>

Corrosive
03-24-2010, 07:12 AM
You need to lay off the absolute positioning. Use relative for page layout.

srt9687
03-24-2010, 04:44 PM
Oh my gosh it worked!!!!!!!!!! Thank you thank you thank you! I was in tears trying to fix this : )

Corrosive
03-24-2010, 04:46 PM
Oh my gosh it worked!!!!!!!!!! Thank you thank you thank you! I was in tears trying to fix this : )

Don't cry. There isn't anything that can't be sorted :)

d a v e
03-24-2010, 04:51 PM
you need to take this out
<%@LANGUAGE="JAVASCRIPT" CODEPAGE="65001"%>
from the very top of the code ;)