Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

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

    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

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    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.

  • #3
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    I'd suggest applying your image height via css rather than inline as a height attribute - that seems to do the trick in Firebug.

  • Users who have thanked SB65 for this post:

    jimEclare (08-12-2010)

  • #5
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by SB65 View Post
    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

  • #6
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jimEclare View Post
    Would you be so kind as to post the code you tryed out in firebug?

    Many thanks
    done it! thanks, you are a legend!

  • #7
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Red box

    .

    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}
    [/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

  • #8
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Try:

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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •