Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Error with my gallery in certain browsers

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #25229
    Wes
    Participant

    Alright so my gallery is at this link http://www.wesascolese.com/portfolio.php
    I was not aware that it had any errors (except in IE)
    but apparently others are not being able to view it correctly

    so I went to http://browsershots.org

    and got these
    http://i14.photobucket.com/albums/a309/ … ws-xp-.png
    for Safari on Windows XP

    and
    http://i14.photobucket.com/albums/a309/ … dows-x.png

    for Firefox on Windows XP

    http://i14.photobucket.com/albums/a309/ … -os-x-.png
    Firefox on a Mac

    and
    http://i14.photobucket.com/albums/a309/ … -os-x-.png
    Safari for Mac

    I haven’t put up IE pics because thats a whole different matter that I can actually see

    here is my html

    Code:




    Wes Ascolese- Portfolio




    and here is my CSS

    Code:
    body
    {
    background:url(images/bg.jpg);
    font-family:Verdana, Geneva, sans-serif;
    font-size:68.5%;
    }

    h2
    {
    font-size:1.6em);
    color:#827857;
    text-transform:uppercase;
    }

    h3
    {
    font-size:1.4em);
    color:#827857;
    text-transform:uppercase;
    }

    h4
    {
    font-size:1.2em);
    color:#827857;
    text-transform:uppercase;
    }
    #page-wrap
    {

    width:800px;
    margin: 0 auto;
    background:url(images/main-bg.jpg) repeat-y;
    }

    #header
    {
    margin:0 auto;
    background:url(images/banner.jpg);
    width:800px;
    height:155px;

    }

    #header ul
    {
    margin:0 auto;
    list-style:none;
    font-family:Arial, Helvetica, sans-serif;
    font-size:2.0em;
    font-weight:bold;
    margin-left:195px;

    }

    #header ul li a
    {
    display:block;
    width:100px;
    float:left;
    color:#fff;
    margin:100px 0 5px 0;
    text-decoration:none;
    text-align:center;
    }

    #header ul li a:hover
    {
    color:#e8e4d8;
    }

    #main
    {
    padding: 5px 170px 30px 170px;
    }

    #main p
    {
    color:#827857;
    }

    #footer
    {
    margin:0 auto;
    background:url(images/footer.jpg);
    width:800px;
    height:191px;
    }
    #footer p
    {
    text-align:center;
    padding-top:30px;
    color:#FFF;
    font-size:0.8em;
    text-transform:uppercase;
    }

    /* general styling for this example */
    * { margin: 0; padding: 0; }
    /* begin gallery styling */
    #jgal { list-style: none; width: 200px; }
    #jgal li { opacity: .5; float: left; display: block; width: 60px; height: 60px; background-position: 50% 50%; cursor: pointer; border: 3px solid #fff; outline: 1px solid #ddd; margin-right: 14px; margin-bottom: 14px; }
    #jgal li img { position:fixed; top: 160px; left: 720px; display: none;}
    #jgal li.active img { display: block; }
    #jgal li.active, #jgal li:hover { outline-color: #bbb; opacity: .99 /* safari bug */ }

    /* styling without javascript */
    #gallery { list-style: none; display: block; }
    #gallery li { float: left; margin: 0 10px 10px 0; }

    #59498
    TheDoc
    Member

    It’s because of this line:

    Code:
    #jgal li img { position:fixed; top: 160px; left: 720px; display: none;}

    1. It should not be in a "fixed" position, I think you’re looking for "absolute".

    2. Why is there even a set position at all? This should be coded differently, preferably simply floating the image to the right.

    #59501
    Wes
    Participant

    Well I changed the line to

    Code:
    #jgal li img { float:right; display: none;}

    this is just a gallery that I picked up from the web that is becoming a tad ridiculous and I am getting way to frustrated

    now there is an error that I can see

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.