Log in

View Full Version : Ie6 hates cool nav bar I got from DD CSS library


Jazman
11-26-2008, 09:03 PM
I'm a newbie with webdesign. Saw this nice navbar from Dynamic Drive library Solid Block Menu (http://www.dynamicdrive.com/style/csslibrary/category/C1/P14/) It works wonderfully in latest Firefox but the black/grey background disappears in IE6. BUT the red mouse-over works in IE6. I did put the css in the external sheet for my site. Other than that I didn't change much.

Here's the HTML and CSS. Hope someone can help me here...I know very little about fixing Ie6 bugs but maybe its my code setup. Thanks

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/Strict.dtd">

<html>
<head>
<title>Fisher's Home Improvements</title>

<link rel="stylesheet" type="text/css" href="fisher.css" />

</head>
<body>
<div id="container">

<div id="header">
<img src="../images/test_logo_copy1.gif" width="145px" />
</div>
<div id="navbar">
<ul class="solidblockmenu">
<li><a href="http://www.dynamicdrive.com/">Home</a></li>
<li><a href="http://www.dynamicdrive.com/style/">About Us</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Gallery</a></li>
<li><a href="http://tools.dynamicdrive.com">Suppliers</a></li>
<li><a href="http://www.javascriptkit.com/">Subcontractors</a></li>
<li><a href="http://www.cssdrive.com" style="border: none">Contact</a></li>
</ul>
</div>

:eek::eek: CSS :eek::eek:

body { background-color: #ffffff;
margin: 0;
padding: 0;
}

#container {
padding: 0;
margin: auto;
width: 810px;
min-height: 1000px;
border: solid 1px #000000;
background: #ffffff url(../images/background_gradient.jpg) repeat-x;
}

#header {
padding: 0;
margin: auto;
width: 800px;
height: 100px;
margin-top: 5px;
margin-bottom: 5px;
}

#navbar {
padding: 0;
width: 809px;
height: 60px;
}

.solidblockmenu {
margin: 0;
padding: 0;
font: bold 14px Arial;
width: 100%;
overflow: hidden;
margin-bottom: 1em;
border: 1px solid #625e00;
background: black url(../images/navdefault.gif)center repeat-x;
}

.solidblockmenu li{
display: inline;
}

.solidblockmenu li a{
float: left;
color: white;
padding: 9px 20px;
text-decoration: none;
border-right: 1px solid white;
}

.solidblockmenu li a:visited{
color: white;
}

.solidblockmenu li a:hover, .solidblockmenu li .current{
color: white;
background: transparent url(../images/redactive.gif) center center repeat-x;
bluewalrus
11-28-2008, 06:10 PM
Link to actual page code is at:http://www.dynamicdrive.com/style/csslibrary/item/solid_block_menu/
Did you use the comment tag made at the bottom of the page?
If not try adding this in. I don't have IE, on a MAC so this is the best thing I can offer. A link to your page might help more so someone that has ie can just see problem and look at code there rather then looking at code here and trying to picturing how it looks.


<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.solidblockmenu li{
display: inline;
}

.solidblockmenu li a{
float: left;
color: white;
padding: 9px 11px;
text-decoration: none;
border-right: 1px solid white;
}

.solidblockmenu li a:visited{
color: white;
}

.solidblockmenu li a:hover, .solidblockmenu li .current{
color: white;
background: transparent url(media/blockactive.gif) center center repeat-x;
}

.solidblockmenu{
margin: 0;
padding: 0;
float: left;
font: bold 13px Arial;
width: 100%;
border: 1px solid #625e00;
border-width: 1px 0;
background: black url(media/blockdefault.gif) center center repeat-x;
list-style: none;
}

</style>

<!--[if IE]>
<style type="text/css">
p.iepara{ /*Conditional CSS- For IE (inc IE7), create 1em spacing between menu and paragraph that follows*/
padding-top: 1em;
}
</style>
<![endif]-->
Jazman
12-04-2008, 01:11 AM
I'll give it a try. Thanks for the suggestion.