Grow your CSS skills. Land your dream job.

Error with my gallery in certain browsers

  • Wes
    # June 22, 2009 at 1:58 am

    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:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">






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; }

# June 22, 2009 at 3:03 am

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.

Wes
# June 22, 2009 at 4:27 am

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)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".