PDA

View Full Version : Finsihed site, works perfectly except for one error in IE!



lewis_
Jan 26th, 2010, 12:35 AM
I have spent the best part of 2 weeks working on this site for my friend, and now it's done ive cleaned up the code and checked for errors/fixed them. Ive fixed all the errors besides this one that is showing on the bottom of the site, Its best explained in an image.

http://www5.picturepush.com/photo/a/2830098/640/2830098.png (http://picturepush.com/public/2830098)

Maybe someone could have a look and tell me where they think the error lies? Heres my code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT=
"text/html; charset=utf-8">
<TITLE>
Homepage
</TITLE>
<STYLE TYPE="text/css">


m {
text-align:left;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
}


P {
text-align:center;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
}

k {
text-align:left;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
}

N {
text-align:center;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 12px;
}

.test {
font-family: monospace;
font-size:12pt;
}



div.Table_01 {
position:relative;
left:0px;
top:0px;
width:800px;
margin: auto;
height:auto;
}

div.home-01 {
position:absolute;
left:0px;
top:0px;
width:800px;
height:72px;
}

div.home-02 {
position:absolute;
left:0px;
top:72px;
width:50px;
height:655px;
}

div.home-03 {
position:absolute;
left:50px;
top:72px;
width:284px;
height:99px;
}

div.homex20rollover {
position:absolute;
left:334px;
top:72px;
width:105px;
height:99px;
}

div.home-05 {
position:absolute;
left:439px;
top:72px;
width:85px;
height:99px;
}

div.home-06 {
position:absolute;
left:524px;
top:72px;
width:44px;
height:99px;
}

div.home-07 {
position:absolute;
left:568px;
top:72px;
width:77px;
height:99px;
}

div.home-08 {
position:absolute;
left:645px;
top:72px;
width:104px;
height:99px;
}

div.home-09 {
position:absolute;
left:749px;
top:72px;
width:51px;
height:655px;
}

div.home-10 {
position:absolute;
left:50px;
top:171px;
width:699px;
height:142px;
}

div.home-11 {
position:absolute;
left:50px;
top:313px;
width:508px;
height:117px;
}

div.home-12 {
position:absolute;
left:558px;
top:313px;
width:200px;
height:50px;
}

div.home-13 {
position:absolute;
left:696px;
top:313px;
width:53px;
height:118px;
}

div.home-14 {
position:absolute;
left:558px;
top:363px;
width:138px;
height:68px;
}

div.home-15 {
position:absolute;
left:50px;
top:430px;
width:214px;
height:223px;
}

div.news {
position:absolute;
left:79px;
top:430px;
width:375px;
height:197px;
font-weight: bold;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 14px;
text-align: left;
}


div.home-16 {
position:absolute;
left:264px;
top:430px;
width:206px;
height:223px;
}

div.mem {
position:absolute;
left:264px;
top:430px;
width:206px;
height:223px;
text-align: center;
}

div.home-17 {
position:absolute;
left:470px;
top:430px;
width:88px;
height:1px;
}

div.home-18 {
position:absolute;
left:470px;
top:431px;
width:279px;
height:296px;
}


div.mems {
position:absolute;
left:483px;
top:431px;
width:248px;
height:296px;
}

div.reg {
position:absolute;
left:470px;
top:431px;
width:239px;
height:296px;
text-align: left;
font-size: 12px;
}

div.copyright {
position:absolute;
left:47px;
top:633px;
width:698px;
height:21px;
text-align: center;
font-size: 12px;
}

div.home-19 {
position:absolute;
left:50px;
top:653px;
width:420px;
height:74px;
}


.why {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
}


</STYLE><!-- End Save for Web Styles -->

<SCRIPT TYPE="text/javascript">

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

</SCRIPT>
<STYLE TYPE="text/css">
body.c1 {background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;}
body {
background-color: #FFF;
background-image: url(images/sitebg.png);
}
</STYLE>

</HEAD>
<BODY CLASS="c1" ONLOAD=
"MM_preloadImages('rol/rollover_05.png','rol/rollover_06.png','rol/rollover_07.png','rol/rollover_08.png','rol/playrol.png','Button_5r.png')">
<!-- Save for Web Slices (SSCut1.psd) -->
<DIV CLASS="Table_01">
<DIV CLASS="home-02">
<IMG SRC="images/home_02.png" WIDTH="50" HEIGHT="655" ALT=
"">
</DIV>
<DIV CLASS="home-03">
<IMG SRC="images/SSCut1_03.png" WIDTH="284" HEIGHT="99"
ALT="#########">

</DIV>
<DIV CLASS="homex20rollover">
<IMG SRC="rol/home-rollover.png" WIDTH="105" HEIGHT="99"
ALT="#########">
</DIV>
<DIV CLASS="home-05">
<A HREF="members.html" ONMOUSEOUT="MM_swapImgRestore()"
ONMOUSEOVER=
"MM_swapImage('Image18','','rol/rollover_05.png',1)"><IMG SRC="images/home_05.png"
NAME="Image18" WIDTH="85" HEIGHT="99" BORDER="0" ALT=
"#########" ID="Image18"></A>
</DIV>
<DIV CLASS="home-06">
<A HREF="play.html" ONMOUSEOUT="MM_swapImgRestore()"
ONMOUSEOVER=
"MM_swapImage('Image19','','rol/rollover_06.png',1)"><IMG SRC="images/home_06.png"
NAME="Image19" WIDTH="44" HEIGHT="99" BORDER="0" ALT=
"#########" ID="Image19"></A>

</DIV>
<DIV CLASS="home-07">
<A HREF="forumlink" ONMOUSEOUT="MM_swapImgRestore()"
ONMOUSEOVER=
"MM_swapImage('Image20','','rol/rollover_07.png',1)"><IMG SRC="images/home_07.png"
NAME="Image20" WIDTH="77" HEIGHT="99" BORDER="0" ALT=
"#########" ID="Image20"></A>
</DIV>
<DIV CLASS="home-08">
<A HREF="#" ONMOUSEOUT="MM_swapImgRestore()" ONMOUSEOVER=
"MM_swapImage('Image21','','rol/rollover_08.png',1)"><IMG SRC="images/home_08.png"
NAME="Image21" WIDTH="104" HEIGHT="99" BORDER="0" ALT=
"#########" ID="Image21"></A>
</DIV>
<DIV CLASS="home-09">
<IMG SRC="images/home_09.png" WIDTH="51" HEIGHT="655" ALT=
"">

</DIV>
<DIV CLASS="home-10">
<IMG SRC="images/home_10.png" WIDTH="699" HEIGHT="142" ALT=
"">
</DIV>
<DIV CLASS="home-11">
<IMG SRC="images/home_11.png" WIDTH="508" HEIGHT="117" ALT=
"">
</DIV>
<DIV CLASS="home-12">
<A HREF="#" ONMOUSEOUT="MM_swapImgRestore()" ONMOUSEOVER=
"MM_swapImage('Image22','','rol/playrol.png',1)"><IMG SRC=
"images/home_12.png" NAME="Image22" WIDTH="138" HEIGHT="50"
BORDER="0" ALT="#########" ID="Image22"></A>

</DIV>
<DIV CLASS="home-13">
<IMG SRC="images/home_13.png" WIDTH="53" HEIGHT="118" ALT=
"">
</DIV>
<DIV CLASS="home-14">
<IMG SRC="images/home_14.png" WIDTH="138" HEIGHT="68" ALT=
"">
</DIV>
<DIV CLASS="home-15">
<IMG SRC="copyright/nonews_11.png" WIDTH="214" HEIGHT="223"
ALT="#########">

</DIV>
<DIV CLASS="home-16">
<IMG SRC="copyright/copyrightimages_12.png" WIDTH="206"
HEIGHT="223" ALT="#########">
</DIV>
<DIV CLASS="home-17">
<IMG SRC="images/home_17.png" WIDTH="88" HEIGHT="1" ALT="">
</DIV>
<DIV CLASS="home-18">
<IMG SRC="copyright/copyrightimages_18.png" WIDTH="279"
HEIGHT="296" ALT="#########">

</DIV>
<DIV CLASS="mems">
<P>&nbsp;

</P>
<P>
Member details in here with link to members page with
more infomation in here. blaaa blaaa blaaa blaa for the
sake of what it will actually look like with text in.
</P>
<P>

<A HREF="#" ONMOUSEOUT="MM_swapImgRestore()" ONMOUSEOVER=
"MM_swapImage('Image23','','Button_5r.png',1)"><IMG SRC=
"memnoroll.png" NAME="Image23" WIDTH="200" HEIGHT="65"
BORDER="0" ID="Image23" ALT="#########"></A>
</P>
<P>&nbsp;

</P>
<P>&nbsp;

</P>
</DIV>

<DIV CLASS="news">
<P>
News date and header
</P>
<P>
News then goes in here
</P>
</DIV>
<DIV CLASS="copyright">
copy right in here
</DIV>

<DIV CLASS="home-19">
<IMG SRC="images/home_19.png" WIDTH="420" HEIGHT="74" ALT=
"">
</DIV>
</DIV>
</BODY>
</HTML>


Thanks, Lewis.

tomws
Jan 26th, 2010, 01:23 AM
Its best explained in an image.

Actually, it would be best explained with a link. That will get you the best and quickest help.

Excavator
Jan 26th, 2010, 03:10 AM
Hello lewis_,

now it's done ive cleaned up the code and checked for errors/fixed them
I'm sorry, I hate to be the one to tell you but your code is invalid. 207 errors :eek:

Have a look at the links about validation in my sig below.
Fix as many of those errors as you can and post back here.

jenius
Jan 26th, 2010, 08:24 AM
haha that's rough... 208...

abduraooft
Jan 26th, 2010, 08:55 AM
div.Table_01 {
position:relative;
left:0px;
top:0px;
width:800px;
margin: auto;
height:auto;
}

div.home-01 {
position:absolute;
left:0px;
top:0px;
width:800px;
height:72px;
}

div.home-02 {
position:absolute;
left:0px;
top:72px;
width:50px;
height:655px;
}

div.home-03 {
position:absolute;
left:50px;
top:72px;
width:284px;
height:99px;
}

div.homex20rollover {
position:absolute;
left:334px;
top:72px;
width:105px;
height:99px;
}

div.home-05 {
position:absolute;
left:439px;
top:72px;
width:85px;
height:99px;
}

div.home-06 {
position:absolute;
left:524px;
top:72px;
width:44px;
height:99px;
}

div.home-07 {
position:absolute;
left:568px;
top:72px;
width:77px;
height:99px;
}

div.home-08 {
position:absolute;
left:645px;
top:72px;
width:104px;
height:99px;
}

div.home-09 {
position:absolute;
left:749px;
top:72px;
width:51px;
height:655px;
}

div.home-10 {
position:absolute;
left:50px;
top:171px;
width:699px;
height:142px;
}

div.home-11 {
position:absolute;
left:50px;
top:313px;
width:508px;
height:117px;
}

div.home-12 {
position:absolute;
left:558px;
top:313px;
width:200px;
height:50px;
}

div.home-13 {
position:absolute;
left:696px;
top:313px;
width:53px;
height:118px;
}

div.home-14 {
position:absolute;
left:558px;
top:363px;
width:138px;
height:68px;
}

div.home-15 {
position:absolute;
left:50px;
top:430px;
width:214px;
height:223px;
}

div.news {
position:absolute;
left:79px;
top:430px;
width:375px;
height:197px;
font-weight: bold;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 14px;
text-align: left;
}


div.home-16 {
position:absolute;
left:264px;
top:430px;
width:206px;
height:223px;
}

div.mem {
position:absolute;
left:264px;
top:430px;
width:206px;
height:223px;
text-align: center;
}

div.home-17 {
position:absolute;
left:470px;
top:430px;
width:88px;
height:1px;
}

div.home-18 {
position:absolute;
left:470px;
top:431px;
width:279px;
height:296px;
}


div.mems {
position:absolute;
left:483px;
top:431px;
width:248px;
height:296px;
}

div.reg {
position:absolute;
left:470px;
top:431px;
width:239px;
height:296px;
text-align: left;
font-size: 12px;
}

div.copyright {
position:absolute;
left:47px;
top:633px;
width:698px;
height:21px;
text-align: center;
font-size: 12px;
}

div.home-19 {
position:absolute;
left:50px;
top:653px;
width:420px;
height:74px;
} It looks like you are not aware of the pitfalls using excessive absolute positions (http://www.tyssendesign.com.au/articles/css/absolute-positioning-pitfalls/).

And by looking the CSS selectors, I assume your document is far away from semantic (http://boagworld.com/technology/semantic-code-what-why-how).

mbaker
Jan 26th, 2010, 09:35 AM
First the errors in your code. The only error that I could find is that you have used the wrong DocType. You have an HTML 4.01 Transitional file with a XHTML 1.0 Transitional DocType. Change the DocType and your file will validate.

While there are better ways of implementing a design, you should be able to find the problem with this one quite simply.

Easiest way to see what is going on is to look at the result without the images. Either turn loading images off, or move your file to another directory (without the images).

Look at it in IE and something else like Chrome. In the area of the problem you will notice that the edges of the images don't quite line up in the problem area.

To see better what is going on use Ctrl-+ several times to see it at greater than 100%.

You need to check all of the dimensions in your stylesheet. For example div.news has top:430px; whereas div.mems has top:431px;

If it were me, and if I were to chose to continue with the absolute positioning and fix the dimensions, I'd take a sheet of paper, possibly a printout of the page without images, and note all of the dimensions (top, left, height & width) for each div and check that they match. Where they don't write corrected values on your sheet of paper, then when you have a consistent set of figures transfer the changes to your stylesheet. (You may also want to take into account your image sizes).