Forum Moderators: not2easy
Here is my workaround: Make an image of the same width of the menu and a height of 1px. Put your menu color on it and add one black pixel on the right side of it. Then in your css do this:
body {
background-image: url(imagename.gif);
background-repeat: repeat-y;
background-color: #FFF; /*the color of the right side content*/
}
Set your menu div to the right width, and you're done. No need to worry about the menu or the content divs extending all the way down anymore.
If there is an easier way to do this (with the border on the right) please post it here... i've tested it with ie, netscape, and opera and it seems to have no problems.
#main {
margin-right: 120px;
border-right: 1px solid #DCF4F4;
}#nav {
position: absolute;
top: 40px; /* I have a header */
right: 0px;
bottom: 100%;
width: 120px;
}
<body><div id="main">content</div><div id="nav">nifty-cool CSS :hover pop-out menus</div></body>
I still have some tweaks to do to get it looking decent in IE6 (but I don't really care about broken browsers).
[edit]Er yeah, add the border[/edit]
[edited by: drbrain at 10:25 pm (utc) on May 8, 2003]
if there is an easier way to do this (with the border on the right) please post it here... i've tested it with ie, netscape, and opera and it seems to have no problems.
Not sure if it's an easier way, but the other way you describe using page background colours..
Instead of trying to put the border on the menu, put it on the left side of your content div ;)
Suzy
