- This topic is empty.
-
AuthorPosts
-
June 22, 2009 at 1:58 am #25229WesParticipant
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 correctlyso I went to http://browsershots.org
and got these
http://i14.photobucket.com/albums/a309/ … ws-xp-.png
for Safari on Windows XPand
http://i14.photobucket.com/albums/a309/ … dows-x.pngfor Firefox on Windows XP
http://i14.photobucket.com/albums/a309/ … -os-x-.png
Firefox on a Macand
http://i14.photobucket.com/albums/a309/ … -os-x-.png
Safari for MacI haven’t put up IE pics because thats a whole different matter that I can actually see
here is my html
Code: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 #59498TheDocMemberIt’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.
June 22, 2009 at 4:27 am #59501WesParticipantWell 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
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.