CSS Image Gallery help. Image and text overlay.

**sha** · 12-20-2008, 05:25 AM

1) Script Title: CSS Image Gallery

2) Script URL (on DD): http://www.dynamicdrive.com/style/cs...image-gallery/

3) Describe problem:
No problem with firefox but having problem with IE6 and IE7 (tried only both IE 6 and & 7)

There are texts on the right side of the small thumbnail images.When mouse over the thumbnail image, the enlarge image will appears on the right side. Since i have text on the right side, I can see the text when the enlarge image appears in IE browser. Meaning the text is on top of the image, so i can see the text and image as well. If using firefox, those text will be cover when the enlarge image appear.

I have attach pictures as well.
text and image.JPG is from IE browser
image.jpg is from firefox browser
box layout.jpg shows how i create the image and text layout.

**Snookerman** · 12-20-2008, 09:05 AM

Could you please post a link to your site or attach the code you are using?

**sha** · 12-20-2008, 12:50 PM

i have upload the file here:
http://www.freedrive.com/folder/191159

but i think copy and pass the code will be faster. All the html, css and jpg are under the same directory or same level. HAve also attach here. the testpage.txt is actually testpage.html

or here is the html code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title></title>
<link rel="stylesheet" href="testpage.css" type="text/css" />
<SCRIPT src="javascript.js" language="JavaScript"></SCRIPT>
</head>
<body>
<div id="container">

<div id="outerboxsp">
<div id="outerbox">
<div id="box3">
<div class="spacebs"> </div>
<table>
<tr>
<td width="100%">
<div class="gallerycontainer">

<a class="thumbnail" href="#thumb"><img src="horses.jpg" width="100" height="66" border="0" /><span><img src="horses.jpg" /></span></a>

<a class="thumbnail" href="#thumb"><img src="horses.jpg" width="100" height="66" border="0" /><span><img src="horses.jpg" /></span></a>

<br />

<a class="thumbnail" href="#thumb"><img src="horses.jpg" width="100" height="66" border="0" /><span><img src="horses.jpg" /></span></a>

<a class="thumbnail" href="#thumb"><img src="horses.jpg" width="100" height="66" border="0" /><span><img src="horses.jpg" /></span></a>

<br />

<a class="thumbnail" href="#thumb"><img src="horses.jpg" width="100" height="66" border="0" /><span><img src="horses.jpg" /></span></a>

<a class="thumbnail" href="#thumb"><img src="horses.jpg" width="100" height="66" border="0" /><span><img src="horses.jpg" /></span></a>

<br />

<a class="thumbnail" href="#thumb"><img src="horses.jpg" width="100" height="66" border="0" /><span><img src="horses.jpg" /></span></a>

<a class="thumbnail" href="#thumb"><img src="horses.jpg" width="100" height="66" border="0" /><span><img src="horses.jpg" /></span></a>

<br />
</div> </td>
</tr>
</table>
</div>
<div id="box4">
<div class="spacebs"> </div>
<table>
<tr>
<th colspan="3"></th>
</tr>
<tr>
<td width="33%">Left1</td>
<td width="33%">Good</td>
<td width="33%">Good</td>
</tr>
<tr>
<td width="33%">Left2</td>
<td width="33%">Good</td>
<td width="33%">Excellent</td>
</tr>
<tr>
<td width="33%">Left3</td>
<td width="33%">Excellent</td>
<td width="33%">Excellent</td>
</tr>
<tr>
<td width="33%">1</td>
<td width="33%"></td>
<td width="33%"></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

here is the css code

body
{
background-color:#FFFFFF;
background-image:none;
padding:0;
margin:0;
}
#container
{
position:relative;
clear:both;
width:1000px;
background-color:transparent;
font-size:10px;
}
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}

.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}

.thumbnail:hover{
background-color: transparent;
}

.thumbnail:hover img{
border: 1px;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 0;
left: 215px; /*position where enlarged image should offset horizontally */
z-index: 50;
}

#outerboxsp
{
position:relative;
float:left;
clear:both;
width:1000px;
background:transparent;
font-size:1px;
}
#outerboxbot
{
position:relative;
float:left;
clear:both;
width:1000px;
height:200px;
background:transparent;
font-size:1px;
}
#outerbox
{
position:relative;
float:left;
clear:both;
width:1000px;
background-color:transparent;
font-size:10px;
}
#box3
{
position:relative;
float:left;
width:240px;
background-color:transparent;
font-size:10px;
}
#box3 .spacebs
{
font-size:0;
margin:0;
padding:0;
}
#box3 table
{
position:relative;
width:235px;
left:5px;
border-collapse:collapse;
border:0 none #000000;
font-family:arial,sans-serif;
font-size:12px;
color:#000000;
margin:0;
padding:0;
}
#box3 tr
{
vertical-align:middle;
}
#box3 th
{
background:#FFFFFF;
border:0 none #000000;
text-align:left;
margin:0;
padding:0;
color:#000000;
}
#box3 td
{
border:0 none #000000;
text-align:left;
margin:0;
padding:0 0 2px 5px;
color:#000000;
}
#box4
{
position:relative;
float:left;
width:760px;
background-color:transparent;
font-size:10px;
}
#box4 .spacebs
{
font-size:0;
margin:0;
padding:0;
}
#box4 table
{
position:relative;
width:755px;
left:5px;
border-collapse:collapse;
border:0 none #000000;
font-family:arial,sans-serif;
font-size:12px;
color:#000000;
margin:0;
padding:0;
}
#box4 tr
{
vertical-align:middle;
}
#box4 th
{
background:#FFFFFF;
border:0 none #000000;
text-align:left;
margin:0;
padding:0;
color:#000000;
}
#box4 td
{
border:0 none #000000;
text-align:left;
margin:0;
padding:0 0 2px 5px;
color:#000000;
}

**sha** · 12-23-2008, 03:45 AM

Anybody can help please.

Thread: CSS Image Gallery help. Image and text overlay.

Thread Tools

Search Thread

CSS Image Gallery help. Image and text overlay.

Bookmarks

Bookmarks

Posting Permissions