No replies
thumbslinger
Offline
Regular
Austin, TX
Last seen: 10 years 24 weeks ago
Austin, TX
Timezone: GMT-5
Joined: 2005-03-23
Posts: 42
Points: 14

After one hurdle, it's on to the next for IE6/7.

The site below looks great (so far) in all the browsers I care to support except IE.

1. The image and copy within the green area (Div id Thumbs) is flush with top margin. Padding on the actual image isn't been seen in IE.

2. The "Shop By Category" background doesn't extend to the full width of the containing div.

These two were working earlier and when I added the Unordered List for the thumbnails, I must have changed something or created something that is interfering.

link: http://www.leetilford.com/ghm/of/outdoorFurniture.html

Here's the css followed by the HTML:

body {
	font: .75em Helvetica, Arial, Verdana, sans-serif;
	background-color:#333333;
	margin:0;
	padding:0;
}
 
#container {
position:relative;
margin:0;
padding:0;
width:1000px;
height:700px;
background-color:#fff;
}
 
#branding {
position:absolute;
background:url(/images/headerDev.jpg);
top: 0;
left: 0;
width: 1000px;
height: 100px;
overflow:visible;
 
}
 
/* Root = Horizontal, Secondary = Vertical */
ul#navmenu-h {
	position:absolute;
	margin: 0px;
	padding: 0px;/*This padding chunks it to the right */
	top:35px;
	left:210px;
	width: 80%; /*For KHTML*/
	list-style: none;
	z-index:4;
	overflow: visible;
}
 
ul#navmenu-h li {
  margin: 0;
  padding: 5px;
  float: left; /*For Gecko*/
  display: inline;
  list-style: none;
  position: relative;
}
 
ul#navmenu-h ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: none;
  position: absolute;
  top: 24px;
  left: 0;
}
 
ul#navmenu-h ul:after /*From IE 7 lack of compliance*/{
  clear: both;
  display: block;
  font: 1px/0px serif;
  content: ".";
  height: 0;
  visibility: hidden;
}
/*below controls rollovers, trans and lines */
ul#navmenu-h ul li {
background-image:url(150x30.png);
border-bottom-width:2px;
border-bottom-style:solid;
border-bottom-color:white;
  width: 150px;
  float: left; /*For IE 7 lack of compliance*/
  display: block !important;
  display: inline; /*For IE*/
}
s/*below controls rollovers, trans and lines for greenhouse menu only */
  {
background-image:url(150x30.png);
border-bottom-width:2px;
border-bottom-style:solid;
border-bottom-color:white;
  width: 118px;
  float: left; /*For IE 7 lack of compliance*/
  display: block !important;
  display: inline; /*For IE*/
}
 
/* Root Menu */
ul#navmenu-h a {
	padding: 0 4px; /*spreads links out*/
	float: none !important; /*For Opera*/
	float: left; /*For IE*/
	display: block;
	background:transparent;
	font-family:Helvetica, Arial, Verdana, sans-serif;
	font-weight:bolder;
	color:#FFF;
	line-height: 1.75em;
	text-decoration: none;
	height: auto !important;
	height: 1%; /*For IE*/
}
 
ul#navmenu-h a.main {
  border-right-style: solid;
  border-right-width: 2px;
  border-right-color: #FFF;
}
 
ul#navmenu-h a.ghm {
  border-right-style: solid;
  border-right-width: 2px;
  border-right-color: #FFF;
}
 
 
 
/* Root Menu Hover Persistence */
ul#navmenu-h a:hover,
ul#navmenu-h li:hover a,
ul#navmenu-h li.iehover a {
  background:transparent;
 
  color:#000066;
}
 
/* 2nd Menu */
ul#navmenu-h li:hover li a,
ul#navmenu-h li.iehover li a {
  float: none;
  background:transparent;
  color:#000066;
 
}
 
/* 2nd Menu Hover Persistence */
ul#navmenu-h li:hover li a:hover,
ul#navmenu-h li:hover li:hover a,
ul#navmenu-h li.iehover li a:hover,
ul#navmenu-h li.iehover li.iehover a {
  background:#000066;
  line-height: 1.75em;
  color: #FFF;
}
 
#navmenu-h li a.last {
border: none;
}
 
#navmenu-h li a.current {
color:#000033;
}
 
 
/* Do Not Move - Must Come Before display:block for Gecko */
ul#navmenu-h li:hover ul ul,
ul#navmenu-h li:hover ul ul ul,
ul#navmenu-h li.iehover ul ul,
ul#navmenu-h li.iehover ul ul ul {
  display: none;
}
 
ul#navmenu-h li:hover ul,
ul#navmenu-h ul li:hover ul,
ul#navmenu-h ul ul li:hover ul,
ul#navmenu-h li.iehover ul,
ul#navmenu-h ul li.iehover ul,
ul#navmenu-h ul ul li.iehover ul {
  display: block;
}
 
 
 
#nav2container {
	position:absolute;
	left:0;
	top:100px;
	font-size: 1em;
	text-align: left;
	text-indent: 10px;
	margin-left:10px;
	padding:0;
	background-color:#FFF;
}
 
 
#nav2list
{
background-color:#fff;
	padding-left: 0;
	margin-left: 0;
	padding-right: 10px;
	border-right-width: thin;
	border-bottom-width: thin;
	border-right-style: solid;
	border-bottom-style: solid;
	border-right-color: #CCCCCC;
	border-bottom-color: #CCCCCC;
}
 
#nav2list li
{
	list-style: none;
	margin: 0;
}
 
#nav2list li a {
	text-decoration: none;
	color: #333333;
	line-height: 2em;
}
 
#nav2list .category {
color: #FFFFFF;
background-color:#578B55;
padding-top:10px;
height: 20px;
 
}
 
.last {
	border-bottom-color: #666666;
	padding-bottom: 1em;
}
 
#nav2List li hr {
	text-indent: -20px;
}
 
#brandBottom {
	color:#CCC;
	border-bottom-width: thin;
	border-bottom-style: solid;
	border-bottom-color: #CCCCCC;
	padding-bottom: 1.25em;
}
 
#brandBottom a{
	color: #333333;
	text-decoration: none;
}
 
 
 
#header{
	position:absolute;
	top: 0;
	left: 0;
	width:1000px;
	height:100px;
	background-image:url(images/headerDev.jpg);
	z-index: 5;
	overflow: visible;
			}
 
#mainContent {
	position:absolute;
	left: 200px;
	top: 100px;
	width:800px;
	height:442px;
	background-color:#fff;
	z-index: 1;
			}
 
#intro {
	position:absolute;
	left: 25px;
	top: 25px;
	width:650px;
	height:184px;
	font-family:Georgia, Times, serif;
	font-weight:bold;
	text-align:center;
	color:#fff;
	line-height:1.5em;
	background:#669966;
	padding: 0px;
		}
 
#intro img {
	float:left;
	padding-left: 15px;
	}
 
#intro h1 {
	font-size: 2em;
	color:#fff;
	}
 
 
#thumbs {
			position:absolute;
			left: 25px;
			top: 220px;
			width:700px;
			height:190px;
			font-size:11px;
			background:#FFF;
			margin:0;
			padding:0;
		}
 
#thumbs ul {	position:relative;
				list-style-type:none;
				margin:0 0 0 -10px;
				padding: 0;
				width:100%;
			}			
 
#thumbs li 		{
				float:left;
				margin:0;
				padding:0;
				width:115px;
				}	
 
#thumbs a:link 	{
				text-decoration: none;
				color:#000066;
				border:none;
				}		
 
#thumbs h4 		{
				margin: 0 10px;
				font-size:100%;
				}
 
#thumbs img {
		display: block;
		}
 
#footer			{
				position:absolute;
				left: 0;
				top: 542px;
				width:1000px;
				height:150px;
				background-repeat:no-repeat;
				background-image: url(/images/footerTemplate.jpg);
				z-index: 10;
				visibility: visible;
				padding-top:75px;
				padding-left:10px;
				}
#footer .tag {
	font-size:1em;
	color:#CCCCCC;
	}

HTML:

<!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">
<link href="ghmMain.css" rel="stylesheet" type="text/css" />
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>The Greenhouse Mall</title>
 
</head>
 
<body>
<div id="container">
 
<div id="header">
 
<div id="branding">
 
<ul id="navmenu-h" name="navmenu-h">
    <li><a href="#" class="main">Outdoor Furniture</a>
       <ul>
		  <li><a href="#">Wrought Iron</a></li>
          <li><a href="#">Cast Aluminum</a></li>
		  <li><a href="#">Exotic Woods</a></li>
		  <li><a href="#">Contemporary Aluminum</a></li>
		  <li><a href="#">Woven/Wicker</a></li>
		  <li><a href="#">Moasic Tables</a></li>
		  <li><a href="#">Shop by Brand</a></li>
      </ul>
</li>
    <li><a href="#" class="main">Greenhouses</a>
      <ul id="specialjack">
        <li><a href="#">Glass</a></li>
        <li><a href="#">Polycarbonate</a></li>
        <li><a href="#">Fiberglass</a></li>
      </ul>
    </li>
 
    <li><a href="accessories.html" class="main">Accessories</a>
      <ul>
        <li><a href="#">Umbrellas</a></li>
        <li><a href="#">Artifical Plants</a></li>
        <li><a href="#">Throw Pillows</a></li>
        <li><a href="#">Coolers</a></li>
        <li><a href="#">Benches/Gliders</a></li>
        <li><a href="#">Swings</a></li>
        <li><a href="#">Wall Art</a></li>
        <li><a href="#">Protective Covers</a></li>
        <li><a href="#">Miscellaneous</a></li>
      </ul>
    </li>    
 
 
    <li><a href="#" class="main">FAQs</a></li>
    <li><a href="#" class="last">Contact Us</a></li>
  </ul>
</div>
</div>
 
 
 
 
 
<div id="nav2container">
  <h3>Outdoor Furniture</h3>
  <ul id="nav2list">
<li class="category">SHOP BY CATEGORY</li>
<li><a href="wroughtIron.html">Wrought Iron</a></li>
<li><a href="castAluminum.html">Cast Aluminum</a></li>
<li><a href="exoticWoods.html">Exotic Woods</a></li>
<li><a href="contemporaryAluminum.html">Contemporary Aluminum</a></li>
<li><a href="wovenWicker.html">Woven/Wicker</a></li>
<li><a href="umbrellas.html">Umbrellas/Shade Equipment</a></li>
<li class="last"><a href="mosaicTables.html">Mosaic Tables</a></li>
</ul>
<div id="brandBottom"><a href="brand.html">SHOP BY BRAND</a></div>
</div>
 
 
 
 
<div id="mainContent">
  <div id="intro">
	  <h1><img src="images/outdoorFurniture/ofMainPic.jpg" width="314" height="150" />Outdoor Furniture</h1>
	  <p>We specialize in the finest outdoor furniture <br />
	    that will provide years of enjoyment. <br />
	    Whether you choose traditional or modern <br />
	    styles, you can expect high quality <br />
	    and lasting beauty. </p>
	</div>
 
 
 
 
    <div id="thumbs">
<ul>
<li>
<h4><a href="#" title="WroughtIron">Wrought Iron<img src="images/outdoorFurniture/withumb.jpg" border=0 alt=""/></a></h4>
</li>
 
<li>
<h4><a href="#" title="Cast Aluminum">Cast Aluminum<img src="images/outdoorFurniture/castathumb.jpg" border=0 alt=""/></a></h4>
</li>
 
<li>
<h4><a href="#" title="Exotic Woods">Exotic Woods<img src="images/outdoorFurniture/ewthumb.jpg" border=0 alt=""/></a></h4>
</li>
 
<li>
<h4><a href="#" title="Contemporary Aluminum">Contemporary <br />Aluminum<img src="images/outdoorFurniture/cathumb.jpg" border=0 alt=""/></a></h4>
</li>
 
<li>
<h4><a href="#" title="WovenWicker">Woven/Wicker<img src="images/outdoorFurniture/wwthumb.jpg" border=0 alt=""/></a></h4>
</li>
 
<li>
<h4><a href="#" title="Mosiac Tables">Mosaic Tables<img src="images/outdoorFurniture/mtthumb.jpg" border=0 alt=""/></a></h4>
</li>
</ul>   
    </div>
</div>
 
<div id="footer"></div>
</div>
</body>
</html>