...

View Full Version : photos overlapping in IE6



Sun
08-09-2007, 06:08 PM
Please I am having trouble with IE6.The Gallery I code I wrote works well with Opera,Firefox but the picture overlaps in IE6.Please can someone outhere help.Here is my code below:


<!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" />



</style>



<script type="text/javascript"><!--//--><![CDATA[//><!--
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;

//--><!]]></script>

</head>
<body>
<ul id="nav">
<li>Articles+links
<ul>
<li><a href="links.html">Links</a></li>
<li><a href="Edo-Okpamakhin.html">Edo-Okpamakhin</a></li>
<li><a href="#">Great Speeches</a></li>
<li><a href="#">ENA</a></li>

</ul>
</li>

<li>Edo
<ul>
<li><a href="Itan-Edo.html">Edo History</a></li>
<li><a href="#">Tradition</a></li>
<li><a href="#">Language</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Guestbook</a></li>
</ul>
</li>

<li><a href="Index.html">Home</a>
<ul>
<li><a href="#">Mission</a></li>
<li><a href="#">Edo Associations</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact</a></li>

</ul>
</li>

</ul>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<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>
<br /><br /><br />
</div>
</div>
<p class="footer">Mountain of The Moon Technologies Inc All rights reserved </p>
</div>
</body>
</html>





body {
font-family: arial, helvetica, serif;
}

ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
}

li { /* all list items */
float: left;
position: relative;
width: 10em;
}

li ul { /* second-level lists */
display: none;
position: absolute;
top: 1em;
left: 0;
}
h1 {
font: 14px verdana, Geneva, Arial, Helvetica, sans-serif;
padding : 2px;
border-bottom : 1px solid #aaaaaa;



}


#nav li {
top : auto;
left : auto;
float: right;
border: 1px solid #B0C4DE;
background-color : #E7EDF5;
color : #2D486C;
position : relative;
width : 10em;
font : 11px verdana, Geneva, Arial, Helvetica, sans-serif;
margin-right : 1em;

}


#nav ul li {

float : none;
border : 0 none transparent;
border-bottom : 1px solid #E7EDF5;
background-color : #F1F5F9;
font-size : 100%;
margin : 0;
margin-bottom : 0.5em;
padding : 0;
font: 11px verdana,Georgia,sans-serif;



}



#nav li:hover ul {
display: block;

}


#nav a:link, #nav a:visited {
display :block;
text-decoration :none;
padding-left : 1em;
color :#2D486C;


}


#nav ul {
padding-top: 0.5em;


}

li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
top: auto;
left: auto;
}

li:hover ul, li.over ul { /* lists nested under hovered list items */
display: block;
}

#content {
clear: left;

}
.stream {
position: relative;
width: 220px;
height: 236px;
border-top: 1px solid #999;
border-bottom: 1px solid #999;
padding: 0 5px 5px 0;
line-height:130%;
background-color:#FFF;
overflow: auto;
}


#container {
position: absolute;
top: 150px;
left: 20px;
width: 400px;
height: 300px;
background: url(limes.jpg) no-repeat;
}
#container .textblock {
filter: alpha(opacity=60);
opacity: 0.6;
margin-top: 50px;
margin-left: 50px;
width: 800px;
height: 500px;
background: #ffffff;
border: 1px solid #007101;
padding: 0.5em;
font: 80%/1.6 Arial, Helvetica, sans-serif;
overflow : auto;

}



a {
color: #FF0000;
text-decoration: none;



/* styles for links */
}


p a{ /* style for links */
font-weight: thin;
color: #FF0000;

}

.hilite{
background-color: Gray;
color: ButtonHighlight;

}

h3 {

font : 13px verdana, Geneva, Arial, Helvetica, sans-serif;
padding : 2px;
margin-bottom : -12px;
margin-top : 0;
}

.circle {
list-style-type: circle;
}

.sidebar {
width: 200px;
float: right;
margin: 10px;
border: solid 1px black;
border-top-width: 5px;
padding: 10px;
background-color: Gray;
}

.sidebar h3 {
margin : 0;
text-align : center;
background-color : #FF0000;
font : 11px verdana, Geneva, Arial, Helvectica, sans-serif;
padding : 2px;
color :silver;
}

.sidebar ul {
padding : 0;
margin : 10px 0 0 0;
}

.sidebar li {
margin-left : 1.5em;
}

* htnl h2{
zoom :1;

}
*html .sidebar {
display : inline;
width : 222px;
w\idth : 200px;
}
h3{



background-color : #FF0000;
font : 11px verdana, Geneva, Arial, Helvectica, sans-serif;
padding : 2px;
color :silver;


}

.footer {
font: 9px verdana, Geneva, Arial, Helvectica, sans-serif;
color: ButtonShadow;
float: right;
margin-left: 0px;
padding-left: 8px;
}
#navlist li
{
display: inline;
/* for IE5 and IE6 */
}

#navlist
{
width: 7em;
/* to display the list horizontaly */
font-family: 11px verdana, Georgia,sans-serif;
margin: 0 0 0 3em;
padding: 0;

}

#navlist a
{
width: 99.99%;
/* extend the sensible area to the maximum with IE5 */
display: block;
background-color: translucent;

text-align: left;
text-decoration: none;
color: #000;
}

#navlist a:hover { background-color: brown; }
#navlist a:visited { color: #000; }

.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%;
}

rmedek
08-09-2007, 09:37 PM
Hi Sun,

Next time please use
tags when entering such a huge amount of code. Also, please read the Posting Guidelines and try to use a better title next time…"Trouble with IE 6" doesn't really describe much.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum