2 replies [Last post]
kdmascot
Offline
newbie
Last seen: 12 years 26 weeks ago
Joined: 2008-05-29
Posts: 2
Points: 0

Hi,

I'm new to using CSS and self-taught. Originally I had a Flash photo gallery, hated it and changed it to a java script/css gallery, which worked in FF and Opera but not in IE. So, I scrapped it and came up with this, which works but has a glitch. The borders around the images look fine in IE but do not show up in FF and Opera. (In IE there is a white border around the thumbnails and a thin black border around the enlarged pictures that show up when you hover over the thumbnails, but neither of these borders will show up in FF or Opera.)

I stripped down the code, threw it up on a test page and still have the problem. Both the html and the css validate.

You can see it here: http://www.freewebs.com/testmycode/galtest2.html
If you follow the link and view source, I stuck the CSS code in a comment so you can see it all on the html document.

In case you don't want to go to the link, here is the html code:

CSS Photo Gallery - testing



And here is the css:

body { font-family: tahoma, helvetica, arial, sans-serif; font-size: 11px; text-align: center; background: #5D1F1F; }

img {
border: 0
}

#i11 {
position: absolute;
top: 200px;
left: 300px;
}

#i12 {
position: absolute;
top: 200px;
left: 405px;
}

#i13 {
position: absolute;
top: 200px;
left: 510px;
}

#i21 {
position: absolute;
top: 280px;
left: 300px;
}

#i22 {
position: absolute;
top: 280px;
left: 405px;
}

#i23 {
position: absolute;
top: 280px;
left: 510px;
}

#i31 {
position: absolute;
top: 360px;
left: 300px;
}

#i32 {
position: absolute;
top: 360px;
left: 405px;
}

#i33 {
position: absolute;
top: 360px;
left: 510px;
}

.enlarge a img {
width: 100px;
height: 75px;
border-width: 5px;
border-color: #ffffff;
z-index: 1;
}

.enlarge a:hover img {
width: 200px;
height: 150px;
border-width: 1px;
border-color: #000000;
z-index: 2;
}

Any help would be greatly appreciated! Thanks!

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 7 hours 47 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9774
Points: 3856

This,img { border: 0 }isn't

This,

img {
border: 0
}
isn't being overridden. Do this:
.enlarge a img {
  border: 5px solid white;
  height: 75px;
  width: 100px;
  z-index: 1;
  }

.enlarge a:hover img {
  border: 1px solid black;
  width: 200px;
  height: 150px;
  z-index: 2;
  }

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

kdmascot
Offline
newbie
Last seen: 12 years 26 weeks ago
Joined: 2008-05-29
Posts: 2
Points: 0

Thank you!

Beautiful! It works like a charm. Thank you so much for your help!