471,881 Members | 1,547 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,881 software developers and data experts.

Gallery Problems with IE6

1
The code I wrote for a site I am working on makes the pictures in the gallery ovelapping the container



[code].....................



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Edo Nation</title>
<meta http-equiv="content-type"
content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="Edo.css" />




div id="container">

<div class="textblock">
<h1>Edo Cultural Pictures</h1>
<p class="intro">A selection of indoor sod options: reviewed and tested by <strong>CosmoFarmer.com</strong> in our state-of-the-art “Apartment Laboratory” on 5th Avenue. </p>
<div id="gallery">
<div class="figure">

<div class="photo">
<img src="carpet.jpg" alt="Carpet Grass" width="200" height="200" /> </div>

<p>Figure 1: Even the carpet-like <em>Carpetorium Pratensis</em> requires mowing. </p>
</div>
<div class="figure">
<div class="photo">

<img src="grass.jpg" alt="Bentgrass" width="200" height="200" /> </div>
<p>Figure 2: Creeping Bentgrass is best suited for outdoor use and should be avoided by the indoor farmer.</p>

</div>
<div class="figure">
<div class="photo">
<img src="bluegrass.jpg" alt="Bluegrass" width="200" height="200" /> </div>
<p>Figure 3: This indoor-hybrid of Kentucky Bluegrass has fallen out of fashion. </p>

</div>
<div class="figure">
<div class="photo">

<img src="leaves.jpg" alt="Leaves" width="200" height="200" /> </div>
<p>Figure 4: <em>Tinea Pedis Poaceae</em> threatens discomfort to bare feet. </p>
</div>

<div class="figure">
<div class="photo">
<img src="pattern.jpg" alt="Pattern Grass" width="200" height="200" /> </div>

<p>Figure 5: The difficult to maintain pattern of this indoor lawn is a sight to behold. </p></div>
<div class="figure">
<div class="photo">
<img src="dandelion.jpg" alt="Dandelion" width="200" height="200" /> </div>

<p>Figure 6: The dandelion: scourge of the apartment farmer.</p></div>


CSS..............................

.nav {
display : inline;
}
.figure {
float: left;
width: 210px;
margin: 0 10px 10px 10px;
}


.photo {
background: url(drop_shadow.gif) no-repeat right bottom;
}

.photo img {
border: 1px solid #666;
background-color: #FFF;
padding: 4px;
position: relative;
top: -5px;
left:-5px;

}

.figure p {
font: 1.1em/normal Arial, Helvetica, sans-serif;
text-align: center;
margin: 10px 0 0 0;
height: 5em;

}

/* IE 5/6 border erase bug */
* html #gallery {
width: 100%;
}

/* IE 5 placement bug */
* html #gallery img {
width: 100%;
}
Aug 10 '07 #1
0 949

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

10 posts views Thread by Captain Ranger McCoy | last post: by
5 posts views Thread by Fred | last post: by
54 posts views Thread by Max Quordlepleen | last post: by
1 post views Thread by Olw | last post: by
3 posts views Thread by bob garbados | last post: by
11 posts views Thread by ste | last post: by
11 posts views Thread by shror | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.