PDA

View Full Version : Photo Album script v2.0



bassman
08-14-2008, 09:32 PM
1) Script Title: Photo Album script v2.0

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...photoalbum.htm

3) Describe problem: I'm almost set with the script, just one problem.

I set the optional description for each image to the left of the page. It looks fine in all browsers except Internet Explorer (of course). Its not reading the 20px of left padding i set up for it. I tried doing the "overflow: visible;" trick I read in another forum but it didn't work.

Attached is an image of screenshots for the page in Firefox (good) and IE (bad). I've also attached a copy of the code. I'm just learning about coding and web design, so I know my code will be a mess, but if anyone can help me with this, I would appreciate it.

Thank You.


.photogallery{ /*CSS for TABLE containing a photo album*/
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 1.6em;
color: #333333;
position: relative;
overflow: visible;
padding-left: 20px;
padding-top: 12px;
top: 0px;
}

.photogallery img{ /*CSS for images within an album*/
height: 260px;
width: 600px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
position: absolute;
overflow: visible;
left: 400px;
top: 0px;
}
#apDiv1 h2 a {
color: #692828;
text-decoration: none;
}
#apDiv1 a:hover {
text-decoration: underline;
}

.photonavlinks{ /*CSS for pagination DIV*/
font-family: Arial;
font-size: 3px;
font-weight: bold;
}

.photonavlinks a{ /*CSS for each navigational link*/
background-image: url(../images/button-wt.jpg);
background-repeat: no-repeat;
padding-top: 5px;
padding-left: 8px;
margin-right: 2px;
position: relative;
left: 270px;
top: 14px;
text-decoration: none;
}

.photonavlinks a:hover {
text-decoration: none;
background-image: url(../images/button-bk.jpg);
background-repeat: no-repeat;
}
.photonavlinks a.current{ /*CSS for currently selected navigational link*/
background-image: url(../images/button-bk.jpg);
background-repeat: no-repeat;
}