Can you please help with this- problems with firefox and ie

jimEclare · 08-12-2010, 03:13 PM

Hi I'm looking for some help with a site I'm making, first site so go easy.

basically everything is 100% fine in safari, but the sizing goes out the window
in other browsers

you can see a the site here

http://www.jamesclare.com/yale/fashion.html

this is the HTML

[CODE] <head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>YALE FACHER _ FASHION</title>
<style type="text/css">

</style>
<link href="../_css/thumbnail.css" rel="stylesheet" type="text/css" />
<style type="text/css">

;
margin-top: 20px;
margin-right: 20px;
margin-bottom: 20px;
height: 22px;

</style>
<script type="text/javascript">

</script>

</head>

<body>
<body style="overflow: hidden">

<div id="back">
<div id="content">

<div id="apDiv2">

<div id="apDiv3"><a href="fashion/_pages/aine/fashion_aine.html"><img src="fashion/aine/thumb/1.jpg" width="151" height="229" alt="1" /></a></div>

<div id="apDiv4"><a href="fashion/_pages/ali forbes/fashion_ali_forbes.html"><img src="fashion/aine/thumb/2" width="151" height="229" alt="2" /></a></div>

<div id="apDiv5"><a href="fashion/_pages/ams/fashion_ams.html"><img src="fashion/aine/thumb/3.jpg" width="151" height="229" alt="3" /></a></div>

<div id="apDiv6"><a href="fashion/_pages/canary_wharf/fashion_canry_wharf.html"><img src="fashion/aine/thumb/4.jpg" width="151" height="229" alt="4" /></a></div>

<div id="apDiv7"><a href="fashion/_pages/LUIRE/fashion_luire.html"><img src="fashion/aine/thumb/5.jpg" width="151" height="229" alt="5" /></a></div>

<div id="apDiv8"><a href="fashion/_pages/margarita/fashion_margarita.html"><img src="fashion/_pages/margarita/_Thumb/1.jpg" width="153" height="229" alt="1" /></a></div>

<div id="apDiv9"><a href="fashion/_pages/marta/fashion_marta.html"><img src="fashion/_pages/marta/_Thumb/5.jpg" width="153" height="229" alt="6" /></a></div>

<div id="apDiv10"><a href="fashion/_pages/neurotica/fashion_nerurotica.html"><img src="fashion/_pages/neurotica/_Thumb/1.jpg" width="153" height="229" alt="1" /></a></div>

<div id="apDiv11"><a href="fashion/_pages/robotic/fashion_robotic.html"><img src="fashion/_pages/robotic/_Thumb/1.jpg" width="153" height="229" alt="1" /></a></div>

<div id="apDiv12"><a href="fashion/_pages/sense/fashion_sence.html"><img src="fashion/_pages/sense/_Thumb/1.jpg" width="153" height="229" alt="1" /></a></div>

</div>
<div id="navigation">

<div id="name"><a href="index.html"><img src="../images/navigation/name.png" width="153" height="97" alt="name" /></a> </div>

<div id="beauity"><a href="beautiy.html"><img src="../images/navigation/Beauty_gray.png" width="45" height="15" alt="b" /></a></div>

<div id="portraits"><a href="portraits.html"><img src="../images/navigation/portrats_gray.png" width="65" height="15" alt="ports" /></a></div>
<div id="fashion"><a href="fashion.html"><img src="../images/navigation/fashion.png" width="49" height="15" alt="fash" /></a></div>
<div id="personal"><a href="personal.html"><img src="../images/navigation/personal_gray.png" width="60" height="15" alt="per" /></a></div>
<div id="contact"><a href="contact.html"><img src="../images/navigation/contact_gray.png" width="53" height="15" alt="con" /></a></div>
<div id="blog"><a href="blog.html"><img src="../images/navigation/blog_gray.png" width="29" height="15" alt="blo" /></a></div>
<div id="photo"><a href="index.html"><img src="../images/navigation/photography.png" width="146" height="96" alt="photp" /></a></div>
<div id="next"><a href="fashion_2.html"><img src="portraits/navigation/next2.png" width="29" height="22" alt="next" /></a> </div>

</div>

</div>
</div>

</body>
</html>

[CODE]

and this is the css

[CODE]

@charset "UTF-8";
/* CSS Document */

#content {
width: 1024px;

height: 768px;
margin-right: auto;
margin-left: auto;

left: 99px;
top: 0px;
}
#apDiv2 {
left:0px;
top:147px;
width:815px;
height:476px;
margin-right: auto;
margin-left: auto
z-index:3;
position: relative;
}

#navigation {
position: relative;
top:-262px;
width:153px;
height:343px;
z-index:4;
left: 844px;
}

#apDiv1 {
position:absolute;
width:152px;
z-index:2;
height: 98px;
top: -140px;
left: 344px;

}

#beauity {
position:relative;
left:2px;
top:105px;
width:45px;
height:15px;
z-index:3;
padding-left: 0px;

}

#portraits {
position:relative;
left:2px;
top:110px;
width:65px;
height:15px;
z-index:2;

}

#fashion {
position:relative;
left:2px;
top:114px;
width:49px;
height:15px;
z-index:2;

}

#personal {
position:relative;
left:2px;
top:118px;
width:59px;
height:15px;
z-index:2;

}

#contact {
position:relative;
left:2px;
top:122px;
width:54px;
height:15px;
z-index:2;

}

#blog {
position:relative;
left:2px;
top:127px;
width:30px;
height:15px;
z-index:2;

}

#photo {
position:relative;
left:0px;
width:152px;
height:96px;
z-index:3;
top: 132px;

}
#name {
position:absolute;
left:0px;
top:0px;
width:152px;
height:100px;
z-index:3;

}
#back {
position:fixed;
left:0px;
top:0px;
width:100%;
height:100%;
z-index:5;
background-color: #000;
}
#apDiv3 {
position:absolute;
left:-1px;
top:0px;
width:155px;
height:232px;
z-index:6;
}
#apDiv4 {
position:absolute;
left:165px;
top:1px;
width:155px;
height:232px;
z-index:7;
}
#apDiv5 {
position:absolute;
left:330px;
top:0px;
width:155px;
height:232px;
z-index:8;
}
#apDiv6 {
position:absolute;
left:495px;
top:0px;
width:153px;
height:232px;
z-index:9;
}
#apDiv7 {
position:absolute;
left:660px;
top:1px;
width:154px;
height:232px;
z-index:10;
}
#apDiv8 {
position:absolute;
left:-1px;
top:242px;
width:155px;
height:232px;
z-index:6;
padding-left: 0px;
}
#apDiv9 {
position:absolute;
left:165px;
top:242px;
width:155px;
height:232px;
z-index:6;
}
#apDiv10 {
position:absolute;
left:330px;
top:242px;
width:155px;
height:232px;
z-index:8;
}
#apDiv11 {
position:absolute;
left:495px;
top:242px;
width:152px;
height:232px;
z-index:9;
}
#apDiv12 {
position:absolute;
left:660px;
top:242px;
width:151px;
height:232px;
z-index:10;
}

[CODE]

If you can help me out id be very grateful, Thanks

SB65 · 08-12-2010, 04:29 PM

Well, it looks the same in Safari/Chrome as it does in Firefox, pretty much. I suspect the only difference is because Safari and Chrome, usually, but depending on how you've got them set up, have a slightly bigger viewport than FF, so in Safari/Chrome you can see the whole page, whereas in FF you can't, on 1280 by 800 at least.

This is caused by having both this:

Code:

<body style="overflow: hidden">

and this:

Code:

#back {
position:fixed;
left:0px;
top:0px;
width:100%;
height:100%;
z-index:5;
background-color: #000;
}

Remove both of these and you then get vertical scrollbars in FF, but at least you can see the page. I'm assuming that was your problem.

All your links also have a blue border in FF, coming from the default style - sort this specifically via:

Code:

a img{border:none}

or better, reset everything via:

Code:

*{margin:0;padding:0;border:none}

Please wrap your code using the code tags - the hash keys - then the post won't be so long.

jimEclare · 08-12-2010, 04:53 PM

thanks for the response

Sorry if i want to clear, i wasn't to sure where to start.

the main problem is that despite the image being set to 100% the don't resize

for example in safari both these pages come up the same, but not in ff

http://www.jamesclare.com/yale/portraits/2.html

http://www.jamesclare.com/yale/fashi...ion_page3.html

the small files are displayed to small (their original size )
and the large ones to big

basically engorging the code

thanks again