Log in

View Full Version : Inverted Shift Down Menu Problems


juliemiller
10-15-2007, 04:27 PM
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>
juliemiller
10-16-2007, 12:21 PM
Anyone? Please!!!
dog
10-16-2007, 06:18 PM
yo JulieMiller,

I just copied and pasted the code you posted.
I included a DOCTYPE and TITLE and opened the HTML, HEAD and STYLE tags that were missing from what you posted.
From where I'm sat it works fine in FF2, IE6 and IE7.
Let us know if you're still having problems. What exactly are you seeing in IE?

Peace,
dog

Code I'm previewing:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
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>
juliemiller
10-16-2007, 07:23 PM
Thank you very much for your response.:)

I took the code that you pasted in and opened in IE7. In FF there are menu tabs with rounded corners and my background image shows through. In IE7 it is like there is no menu at all. I have uploaded the page to my site so that you can see it.

http://www.nursingnotions.com/test.html (images are not uploaded)
dog
10-17-2007, 09:10 PM
Check this out!


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
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>
<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 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>

It's almost exactly the same code. Only the div id="topsection" is closed before the "invertedshiftdown" div. Rather than the "invertedshiftdown" div being inside the "topsection".

Or in other words:
Before:
<div id="topsection">
<img src="logodw.gif" class="logo" />
<div class="invertedshiftdown">
<ul>
<!-- list content -->
</ul>
</div>
</div>
After:
<div id="topsection">
<img src="logodw.gif" class="logo" />
</div>
<div class="invertedshiftdown">
<ul>
<!-- list content -->
</ul>
</div>
Hope that's sorted it for you.

Any problems let us know.

Peace,
dog
savage_mike
06-01-2008, 12:48 AM
I am also having problems getting this menu to work properly in IE 7. Although I can see the menu, for some reason the "current" tab is not displaying correctly. Instead of displaying the text in black as I've specified, the text displays in yellow. This is a problem because the "tabs" that are created by the menu are yellow. This makes the text invisible. Now it works fine when I hover over the other menu items, and it works fine in Firefox. I've double checked my CSS and HTML and I can't find the source of the problem.
I'm attempting to update my website using this menu, but functionality as well as clean design are major concerns. Any help is appreciated.
Here's my code:

<html>

<head>
<meta name="author" content="Michael Gibson">
<meta name="keywords" content="web design, web development, graphic artist, freelance">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<SCRIPT LANGUAGE="JavaScript">
<!-- Idea by: Nic Wolfe -->
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
function popUp(URL) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=0,width=600,height=550');");
}
// End -->
</script>
<title>A Savage By Design</title>
<link rel="stylesheet" type="text/css" href="stylesheets/savage.css">
<style type="text/css">
<!--
body
{
background:url(images/weapon-black.jpg) top left fixed;
font-family:arial,sans-serif;
font-size:1.0em;
text-align:center;
scrollbar-track-color:#000000;
scrollbar-highlight-color:#666666;
scrollbar-3dlight-color:#666666;
scrollbar-darkshadow-color:#000000;
scrollbar-shadow-color:#666666;
scrollbar-arrow-color:#000000;
scrollbar-face-color:#FFD700

}

a:link
{
color:#FFD700;
}
a:visited
{
color:#FFD700; text-decoration:none;
}
a:hover
{
color:#FF0000; text-decoration:none;
}
a:active
{
color:#FF0000; text-decoration:none;
}
a img
{
border:none;
}

//-->

</style>
</head>
<body align="center">

<H1 class="bigtext" align="center">
A Savage By Design
</H1>

<div class="invertedshiftdown" style="position:relative; top:-22px;">
<ul>
<li class="current"><a href="index.htm" title="Home">Home</a></li>
<li><a href="javascript:popUp('news.htm')" title="News">News</a></li>
<li><a href="page2.htm" title="Philosophy">Philosophy</a></li>
<li><a href="page3.htm" title="Samples">Samples</a></li>
<li><a href="page4.htm" title="Links">Links</a></li>
<li><a href="javascript:popup('resume.htm')" title="Resume">Resume</a></li>
</ul>

<form id="myform">
<input type="text" class="textinput" /> <input class="submit" type="submit" value="Find" />
</form>
</div>

<br style="clear: both;" />

<br>
<div class="title" align="center">
Welcome!</div>
<div class="main" align="center">
<p class="body">
My name is Michael Gibson, and I am an aspiring web designer/developer. In this site, you will find samples of my work as well as
links to sites I visit frequently. I also have my resume available in both HTML format and as a Word document.</p>
<p class="body">

Thanks for visiting!</p>
</div>


</body>
</html>
savage_mike
06-01-2008, 12:51 AM
Nevermind I figured it out. Sorry for the premature post!