...
PDA

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">
<!--
#next {
position:relative;
left:0px;
width:30px;
z-index:5;
top: 132px;
-->
;
margin-top: 20px;
margin-right: 20px;
margin-bottom: 20px;
height: 22px;



</style>
<script type="text/javascript">
<!--
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];}}

//-->
</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:

<body style="overflow: hidden">

and this:

#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:

a img{border:none}

or better, reset everything via:

*{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/fashion/neurotica/Fashion_page3.html


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

basically engorging the code


thanks again
SB65
08-12-2010, 05:53 PM
I'd suggest applying your image height via css rather than inline as a height attribute - that seems to do the trick in Firebug.
jimEclare
08-12-2010, 06:27 PM
I'd suggest applying your image height via css rather than inline as a height attribute - that seems to do the trick in Firebug.

Would you be so kind as to post the code you tryed out in firebug?

Many thanks:thumbsup:
jimEclare
08-12-2010, 06:34 PM
Would you be so kind as to post the code you tryed out in firebug?

Many thanks:thumbsup:

done it! thanks, you are a legend!:D
jimEclare
08-12-2010, 07:47 PM
.

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

a img{border:none}

or better, reset everything via:

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

[/QUOTE]

I put in the code as suggested and I got rid of the blue and purple but on mouse down i get red doted box? any ideas
SB65
08-13-2010, 08:05 AM
Try:

a:active, a:focus{outline:none}

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum