CSS woes

CSS woes
by kelly johnson (Thumbslinger) on Jun 12, 2008 at 9:33:12 pm

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

The site below looks great (so far) in Dreamweaver and 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:

[code]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;
}[/code]

HTML:

[code]

The Greenhouse Mall

Outdoor Furniture

SHOP BY CATEGORY

Wrought Iron

Cast Aluminum

Exotic Woods

Contemporary Aluminum

Woven/Wicker

Umbrellas/Shade Equipment

Mosaic Tables

SHOP BY BRAND

Outdoor Furniture

We specialize in the finest outdoor furniture

that will provide years of enjoyment.

Whether you choose traditional or modern

styles, you can expect high quality

and lasting beauty.

Wrought Iron

Cast Aluminum

Exotic Woods

Contemporary
Aluminum

Woven/Wicker

Mosaic Tables

[/code]

Respond to this post • Return to posts index

Re: CSS woes
by Abraham Chaffin on Jun 12, 2008 at 9:52:55 pm

[kelly johnson] "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."

1) Add padding: 15px; to #intro and remove the padding from #intro img. This should get you close but might give you other padding issues with the text. Try it and see how close it gets you...

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

2) Add width: 100%; to #nav2list .category

Abraham

Respond to this post • Return to posts index

Re: CSS woes
by kelly johnson on Jun 12, 2008 at 10:17:41 pm

Thanks-
The padding is getting close, but it somehow affects the thumbs below (in an entirely different div!) as they are now not 'justified'.

The Width:100% did increase the green but not all the way as before. Could it be related to the width given the UL element?

I'll keep playing, but thanks for the input.

Respond to this post • Return to posts index

CSS woes

Outdoor Furniture

Outdoor Furniture

Wrought Iron

Cast Aluminum

Exotic Woods

Contemporary Aluminum

Woven/Wicker

Mosaic Tables

Contemporary
Aluminum