Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Sun
    Sun is offline
    New to the CF scene
    Join Date
    Aug 2007
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    photos overlapping in IE6

    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:

    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" />
    
    
    
    </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%;
    }
    Last edited by rmedek; 08-09-2007 at 10:38 PM.

  • #2
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Hi Sun,

    Next time please use [code][/code] 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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •