Inverted Shift Down Menu Problems
I'm using this code and it looks fantastic in FF, but when I move to IE7 it is completely gone. Like it wasn't ever there. I'm note sure what is going on....I listed the entire code below. This is not a working site yet, just something I'm designing before launching. Any suggestions?
body{
margin:0;
padding:0;
line-height: 1.5em;
background-image: url(gradient.jpg);
background-repeat: repeat-x;
}
b{font-size: 110%;}
em{color: red;}
#maincontainer{
width: 840px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/
}
#topsection{
background: #003333;
height: 90px; /*Height of top section*/
-moz-border-radius-topleft: 5px;
border-top-left-radius: 5px;
-moz-border-radius-topright: 5px;
border-top-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
border-bottom-right-radius: 5px;
}
#topsection h1{
margin: 0;
padding-top: 15px;
}
#contentwrapper{
float: left;
width: 100%;
}
#contentcolumn{
margin-left: 200px; /*Set left margin to LeftColumnWidth*/
background: white;
border: solid 1px #003333;
-moz-border-radius-topright: 5px;
border-top-right-radius: 5px;
}
#leftcolumn{
float: left;
width: 200px; /*Width of left column*/
margin-left: -840px; /*Set left margin to -(MainContainerWidth)*/
background: #003333;
border: solid 1px #003333;
-moz-border-radius-topleft: 5px;
border-top-left-radius: 5px;
}
#footer{
clear: left;
width: 100%;
background: #003333;
color: #FFF;
text-align: center;
padding: 4px 0;
-moz-border-radius-bottomleft: 5px;
border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
border-bottom-right-radius: 5px;
}
#footer a{
color: white;
}
.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}
.invertedshiftdown{
float: right;
padding: 0;
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
}
.invertedshiftdown ul{
margin:0;
padding: 0;
list-style: none;
}
.invertedshiftdown li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
text-transform:uppercase;
}
.invertedshiftdown a{
float: left;
display: block;
font: bold 12px Arial;
color: white;
text-decoration: none;
margin: 0 5px 0 0; /*Margin between each menu item*/
padding: 5px 10px 9px 10px; /*Padding within each menu item*/
background-color: #003333; /*Default menu color*/
/*BELOW 4 LINES add rounded bottom corners to each menu item.
ONLY WORKS IN FIREFOX AND FUTURE CSS3 CAPABLE BROWSERS
REMOVE IF DESIRED*/
-moz-border-radius-bottomleft: 5px;
border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
border-bottom-right-radius: 5px;
}
.invertedshiftdown a:hover{
background-color: #003333; /*Red color theme*/
padding-top: 9px; /*Flip default padding-top value with padding-bottom */
padding-bottom: 5px; /*Flip default padding-bottom value with padding-top*/
color: white;
}
.logo{
margin: 1px;
}
#ddblueblockmenu{
border-bottom-width: 0;
width: 185px;
}
#ddblueblockmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
font: normal 90% Arial, 'Trebuchet MS', 'Lucida Grande', sans-serif;
}
#ddblueblockmenu li a{
display: block;
padding: 3px 0;
padding-left: 9px;
width: 169px; /*185px minus all left/right paddings and margins*/
text-decoration: none;
color: white;
background-color: #003333;
border-left: 7px solid #003333;
}
#ddblueblockmenu li a:hover {
background-color: #afffaf;
border-left-color: #027d00;
color: black;
}
#ddblueblockmenu div.menutitle{
color: black;
padding: 1px 0;
padding-left: 5px;
background-color: #ccffcc;
font: bold 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
border: solid 2px #003333
}
</style>
</head>
<body>
<div id="maincontainer">
<div id="topsection"><img src="logodw.gif" class="logo" />
<div class="invertedshiftdown">
<ul>
<li><a href="http://www.dynamicdrive.com" title="Home">Home</a></li>
<li><a href="http://www.dynamicdrive.com/new.htm" title="New">New</a></li>
<li><a href="http://tools.dynamicdrive.com" title="Tools">Tools</a></li>
<li><a href="http://www.dynamicdrive.com/style/" title="CSS">CSS</a></li>
<li><a href="http://www.dynamicdrive.com/forums/" title="DHTML Forums">Forums</a></li>
</ul>
</div>
<br style="clear: both;" />
</div>
<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube"><b>Content Column: <em>Fixed</em></b> </div>
</div>
</div>
<div id="leftcolumn">
<div class="innertube">
<div id="ddblueblockmenu">
<div class="menutitle">Dynamic Drive</div>
<ul>
<li><a href="http://www.dynamicdrive.com">Home</a></li>
<li><a href="http://www.dynamicdrive.com/new.htm">What's New</a></li>
<li><a href="http://www.dynamicdrive.com/revised.htm">What's Revised</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Help Forums</a></li>
</ul>
<div class="menutitle">CSS Library</div>
<ul>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C1/">Horizontal CSS Menus</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Vertical CSS Menus</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Image Effects</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C6/">Form Effects</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C5/">Boxes & containers</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C7/" style="border-bottom-color: black">Links & Buttons</a></li>
</ul>
</div> </div>
</div>
<div id="footer"><a href="http://www.dynamicdrive.com/style/">Dynamic Drive CSS Library</a></div>
</div>
</body>
</html>
CSS Codes
Reply With Quote
opUp('news.htm')" title="News">News</a></li>
Bookmarks