|
CSS - Menu Highlight Problems In Ie
Hi folks. Long time lurker, first time poster.
I've got some navigational menus that look great and work well in Firefox and Opera, but there are some odd issues in Internet Explorer. (I'm currently testing with IE7, but am fairly certain the same problems occur on IE6.) Interesting. The system won't let me put the URL in my post as I'm a new user, but this works... The URL for my test page is at a machine named www in the domain bobramstad.com and has the filename menu.html Just run that all together and you'll find the page OK. I'd cut and paste it here but I use a lot of whitespace and the file is kind of long, easier to hit the URL and view source it. For some unknown reason, under IE7, when I highlight any of the entries on the left which have submenus, the formatting of the main entry jumps around. It's odd. I have my own theories as to why this is happening, but frankly, none of them have panned out, or at least, I'm not sophisticated enough to hit on the right solution. FWIW, the current version of our home page uses an older mix of javascript and CSS which is not compatible with Safari or Opera and is also a bit clunky. Strangely, however, it looks fine in Firefox and IE, which might provide some clues as to what I'm doing wrong. I've been looking at this literally for three weeks, on and off, and have made some strides... the last problem is main menu jumping around when hover occurs... Any and all help gratefully received! -- Bob Similar TutorialsI'm a CSS newbie, so forgive me if I'm going about this the wrong way entirely. I'm trying to build a website with a menu that changes the source of an iFrame. So I have: Code: <html> <body> <div>**MENU**</div> <div><iframe id="contentFrame" src="home.htm"></iframe></div> </body> </html> Clicking a menu item, say "Contact Us", changes the src of the iFrame using: Code: <a href="javascript:document.getElementById('contentFrame').src='ContactUs.htm'">Contact Us</a>
The menu is pure CSS, with each item underlining as it's rolled over, and some submenus that show up when hovering. What I'm looking to do is have the selected menu item have a different text color. So when you click "Contact Us", that item will change color and stay that other color while navigating the ContactUs.htm page in the iFrame. Is that even remotely do-able? I saw some examples where you use body classes and id's to match the id of the menu item to the body class of the related page. However, I think that would require loading completely separate pages (with the same menu, header, and footer code). I want to avoid the entire page flickering when changing content. I don't seem to be able to access the body class value of the page being loaded in the iFrame. Is that possible to do? Thanks for any guidance you all could offer. Hello, I can't seem to figure out how to make my CSS drop down menu work the way I want it to. I am using an id in the body tag and a class in the navigatin links so the style sheet will mark what section of the site you are in by making the background change color. This works. The problem is, now that I have the sections being marked, the highlight no longer works. How can I get the highlight to work in the section you are in? I have been experimenting for hours but I can't make it work. http://www.tpxdesign.com/test/Valliant/alpha/index7.php My nav menu code and nav style sheet: Code: <!--[if !IE]><!-- start nav --><![endif]-->
<div id="side_nav_bar" class="floater">
<div id="nav_menu">
<ul id="nav">
<li><a href="demoreel.php" class="port">Portfolio</a>
<ul>
<li><a href="demoreel.php" class="port">Demo Reel/s</a></li>
<li><a href="shorts.php" class="port">Shorts</a></li>
<li><a href="musicvid.php" class="port">Music Video</a></li>
<li><a href="comvid.php" class="port">Commercial</a></li>
<li><a href="miscvid.php" class="port">Misc. Video/Film</a></li>
<li><a href="gallery.php" class="port">Photo. Gallery</a></li>
</ul>
</li>
<li><a href="services.php" class="serv">Services</a>
</li>
<li><a href="newupdate.php" class="newe">News & Events</a>
<ul>
<li><a href="newupdate.php" class="newe">News/Updates</a></li>
<li><a href="eventblog.php" class="newe">Event Calendar</a></li>
</ul>
</li>
<li><a href="bio.php" class="about">About Valliant</a>
<ul>
<li><a href="resume.php" class="about">Resume</a></li>
<li><a href="bio.php" class="about">Biography</a></li>
<li><a href="contact.php" class="about">Contact</a></li>
</ul>
</li>
<li><a href="links.php" class="link">Links</a></li>
<li><a href="index7.php" class="home">Home</a></li>
</ul>
</div>
</div>
<!--[if !IE]><!-- end nav --><![endif]-->
Code: ul {
margin: 0;
padding: 0;
list-style: none;
width: 199px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}
ul li {
position: relative;
}
li ul {
position: absolute;
left: 198px; /* Set 1px less than menu width */
top: 0;
display: none;
}
/* Styles for Menu Items */
ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff; /* IE6 Bug */
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */
ul li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */
li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
li:hover ul, li.over ul { display: block; } /* The magic */
#home .home, #about .about, #link .link, #newe .newe, #serv .serv, #port .port
{
color: #000;
background-color: #eee;
}
I am a photographer for a website and I know very little about anything other than basic html. With the website lady gone on a trip around the world for a year, I ended up being the person to attempt to modify our side menu to show an additional column of subcategories. I tinkered around with the code we had and I managed to get this to work in Firefox, however in IE7 the contents of the menu shift down a few pixels when you hover over a category. To view my problem, go to scannerparts.biz I've messed around with this for a few days and everything has become a big confusing mess so I have no choice but give in and ask for help. I thank anyone in advance for any assistance you can offer. -Emerson Here is the code: hover.css Code:
<!--
body {
behavior: url(/images/csshover2.htc);
}
div#categorynav ul {margin: 0px; padding: 0px;}
.submenu {
position: relative;
margin: 0px;
padding: 2px 0px;
width: 178px;
}
div#categorynav ul.level1 li a {
position: relative;
display: block;
text-decoration: none;
margin: 0px;
padding: 0px;
}
div#categorynav ul.level2 li {
position: relative;
display: block;
text-decoration: none;
margin: 0px;
padding: 0px;
}
div#categorynav ul.level3 li {
position: relative;
display: block;
text-decoration: none;
margin: 0px;
padding: 0px;
}
div#categorynav ul.level1 ul.level2 a {
background-color: #000000;
color: #fff;
width: 178px;
font-weight:normal;
padding: 4px 4px 4px 14px;
}
div#categorynav ul.level2 ul.level3 a {
background-color: #000000;
color: #fff;
width: 178px;
font-weight:normal;
padding: 4px 4px 4px 14px;
}
html>body div#categorynav ul.level1 ul.level2 a {
width: auto;
padding: 0px;
margin: 0px;
}
html>body div#categorynav ul.level2 ul.level3 a {
width: auto;
padding: 0px;
margin: 0px;
}
div#categorynav>ul a {width:auto; padding: 0px; margin: 0px;}
div#categorynav ul ul {position: absolute; display: none; width: 100px; z-index:900; padding: 0px; margin: 0px;}
div#categorynav ul ul li {padding: 0px; margin: 0px;}
div#categorynav ul.level1 li.submenu:hover ul.level2 {
display: block;
list-style-image: none;
list-style-type: none;
}
div#categorynav ul.level2 li.submenu:hover ul.level3 {
display: block;
list-style-image: none;
list-style-type: none;
}
div#categorynav ul.level2 {
top: 0px;
left: 178px;
margin: 0px;
padding: 0px;
width:160px;
}
div#categorynav ul.level2 li a:hover {
background-color: #000000;
color: red;
}
div#categorynav ul.level3 {
top: 0px;
left: 178px;
margin: 0px;
padding: 0px;
width:160px;
}
div#categorynav ul.level3 li a:hover {
background-color: #000000;
color: red;
}
Abbreviated Header Source (abbreviated for max character requirement, I think I left all the vital stuff there) Code:
<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<ss:comment><link href="hover.css" type="text/css" rel="stylesheet" media="screen"/></ss:comment>
<link href="$store.images['hover.css']" type="text/css" rel="stylesheet" media="screen"/>
<style type="text/css">
<!--
/* Style Sheet */
body {
margin-top: 10px;
margin-right: 0px;
margin-bottom: 30px;
margin-left: 1px;
background-image: url(/images/backgroundgray.jpg);
background-repeat: repeat-x;
background-position: center bottom;
}
html { height: 100%; margin-bottom: 1px; }
#outline{
border :0px solid #ffffff;
width :760px;
}
#categories{
background-color:#000000;
color:#ffffff;
text-decoration:none;
text-align : left;
display: block;
padding : 5px 5px 1px 0px;
font-weight :bold;
font-size:9pt;
font-family:<ss:value source=$font.paragraph.face/>;
width :178px;
padding: 0px;
}
#cat1{
background-color:#000000;
color: #ffffff;
text-decoration:none;
text-align: left;
display: block;
font-weight :normal;
font-size: 9pt;
font-family:<ss:value source=$font.paragraph.face/>;
width: 178px;
padding: 0px;
}
#cat1 a{
background-color:#000000;
color: #ffffff;
text-decoration:none;
text-align: left;
display: block;
font-weight: normal;
font-size:9pt;
font-family:<ss:value source=$font.paragraph.face/>;
width :178px;
padding: 0px;
}
#cat1 a:hover{
background-color:#000000;
color:#ff0000;
text-decoration:none;
text-align : left;
display: block;
font-weight: normal;
font-size:9pt;
font-family:<ss:value source=$font.paragraph.face/>;
width :178px;
padding: 0px;
}
.leftnav {
background-color:#000000;
color:#ffffff;
text-decoration:none;
font-weight :bold;
font-size:9pt;
font-family:<ss:value source=$font.paragraph.face/>;
padding : 2px 5px 1px 0px;
}
.leftnav A:link {
background-color:#000000;
border-bottom : 1px solid #666666;
color:#ffffff;
text-decoration:none;
text-align : left;
display: block;
padding : 2px 5px 1px 0px;
font-weight :bold;
}
.leftnav A:visited {
background-color:#000000;
border-bottom : 1px solid #666666;
color:#ffffff;
text-decoration:none;
text-align : left;
display: block;
padding : 2px 5px 1px 0px;
font-weight :bold;
}
.leftnav A:hover {
background-color:#000000;
border-bottom : 1px solid #666666;
color:#ff0000;
text-decoration:none;
text-align : left;
display: block;
padding : 2px 5px 1px 0px;
font-weight :bold;
}
.leftnav A:active {
background-color:#000000;
border-bottom : 1px solid #666666;
color:#ffffff;
text-decoration:none;
text-align : left;
display: block;
padding : 2px 5px 1px 0px;
font-weight :bold;
}
A:link {text-decoration:underline;color:<ss:value source=$font.paragraph.color/>;}
A:visited {text-decoration:underline;color:<ss:value source=$font.paragraph.color/>;}
A:hover {text-decoration:none;color:<ss:value source=$font.paragraph.color/>;}
A:active {text-decoration:underline;color:<ss:value source=$font.paragraph.color/>;}
.content {font-family:<ss:value source=$font.paragraph.face/>
;color:<ss:value source=$font.paragraph.color/>;}
.title {font-size:10pt;font-weight:bold;font-family:<ss:value source=$font.paragraph.face/>
;color:#ffffff;}
.footer {font-size:9pt;font-family:<ss:value source=$font.paragraph.face/>
;color:<ss:value source=$font.paragraph.color/>;}
-->
</style>
</head>
<body>
<center>
<div id="outline">
<table width="760" border="0" cellspacing="0" cellpadding="0">
<!-- banner image -->
<tr valign="top"><td colspan="4"><a href="(URL address blocked: See forum rules)"><ss:image source="$templateSet.images['header.jpg']" border="0"/></a></td></tr>
<tr valign="top">
<!-- left nav -->
<td bgcolor="#000000"> </td>
<td width="175" bgcolor="#000000">
<div class="leftnav">
<!-- store logo -->
</div>
<div class="leftnav">
<div style="border-bottom : 0px solid #666666;"> </div>
<!-- home -->
</div>
<!-- categories -->
<p><font face="Arial,Helvetica,sans-serif" size="2" color="white"><b>Parts and Products:</b></font></p>
<div id="categorynav">
<div id="categories">
<ul class="level1">
<ss:foreach item="category" within="$catalog.categoryList()">
<ss:sortby item="categorypriority" direction="asc"/>
<ss:if test="$category.treeLevel == '1'">
<ss:set name="hasSub" value="0"/>
<ss:foreach item="subcategory" within="$category.childrenToDepth(1)">
<ss:set name="hasSub" value="1"/>
</ss:foreach>
<li class="submenu">
<div id="cat1"><ss:link source="$category"/></div>
<ss:if test="$hasSub == '1'">
<ul class="level2">
<ss:foreach item="subcategory" within="$category.childrenToDepth(1)">
<ss:sortby item="categorypriority" direction="asc"/>
<ss:if test="$category.treeLevel == '2'">
<ss:set name="hasSub" value="1"/>
<ss:foreach item="subcategory" within="$category.childrenToDepth(1)">
<ss:set name="hasSub" value="1"/></ss:foreach></ss:if>
</li>
<li class="submenu">
<div id="cat1"><ss:link source="$subcategory"/></div>
<ss:if test="$hasSub == '1'">
<ul class="level3">
<ss:foreach item="subcategory" within="$subcategory.childrenToDepth(1)">
<li><ss:link source="$subcategory" title="$subcategory.name"/></li>
</ss:foreach>
</ul>
</ss:if>
</ss:foreach>
</ul>
</ss:if></ss:foreach>
</li>
</ss:if></ss:if></ss:foreach>
<br>
</ul>
</div>
</div>
I want to make it so that when you go to type something into the textbox(lastname or firstname) the menu stays open. right now if you try and type something into the textbox the menu closes but you still keep right on writing and then go back into the menu and click the submit button. I also want it so that you can press the <enter> key on your keyboard and it will submit the search query that you are working on. if there is a better way of doing this all please let me know this is menu.php PHP Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>BHI and Roth's Website menu</title> <?php <link rel="stylesheet" type="text/css" href="menu_css.css" /> </head> <BODY STYLE="background-color:transparent"> <ul class="pureCssMenu pureCssMenum"> <li class="pureCssMenui"><a class="pureCssMenui" href="home.php" target="showframe">Home</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Fill-in a form</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="pureCssMenum"> <li class="pureCssMenui"><a class="pureCssMenui" href="form_bhi_hoac.php" target="showframe">102HOAC</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="form_for_adding_email_addresses.php" target="showframe">Email database</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="form_support_application.php" target="showframe">Support Application</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>View the form data</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="pureCssMenum"> <li class="pureCssMenui"><a class="pureCssMenui" href="view_102hoac.php" target="showframe">102HOAC</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Search Addressbook by:</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="pureCssMenum"> <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Last Name:</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="pureCssMenum"> <li class="pureCssMenui"><form class="pureCssMenui" action="lastname_search.php" method="post" target="showframe"><input type="text" name="lastname" size="30" /><input type="submit" align="right" value="Search" /></form></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>First Name:</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="pureCssMenum"> <li class="pureCssMenui"><form class="pureCssMenui" action="firstname_search.php" method="post" target="showframe"><input type="text" name="firstname" size="30" /><input type="submit" align="right" value="Search" /></form></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> </ul> <li class="pureCssMenui"><a class="pureCssMenui" href="sa.php" target="showframe">Support Application</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Resources</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="pureCssMenui"> <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>View BHI Brochure -></span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="pureCssMenum"> <li class="pureCssMenui"><a class="pureCssMenui" href="bhi_brochure_feb_08.pdf" target="_blank">in .pdf format</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="bhi_brochure_feb_08.swf" target="_blank">in .swf format</a></li> </ul> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li class="pureCssMenui"><a class="pureCssMenui" href="gallery.html" target="showframe">Photo Gallery</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="edit.php" target="showframe">Edit account information</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="logout.php" target="_top">Logout</a></li> </ul> </body> </html> <?php } } } else //if the cookie does not exist, they are taken to the login screen { header("Location: login.php"); } ?> </html> And this is menu_css.css Code: #pcm{display:none;}
ul.pureCssMenu ul{display:none}
ul.pureCssMenu li:hover>ul{display:block}
ul.pureCssMenu ul{position: absolute;left:0px;top:100%;}
ul.pureCssMenu ul ul{position: absolute;left:100%;top:0px;}
ul.pureCssMenu,ul.pureCssMenu ul {
margin:0px;
list-style:none;
padding:0px 2px 2px 0px;
background-color:#990033;
background-repeat:repeat;
border-color:#FFEE00;
border-width:1px;
border-style:solid;
}
ul.pureCssMenu table {border-collapse:collapse}ul.pureCssMenu {
display:block;
zoom:1;
float: left;
}
ul.pureCssMenu ul{
width:210px;/*width:138.6px;*/
}
ul.pureCssMenu li{
display:block;
margin:2px 0px 0px 2px;
font-size:0px;
}
ul.pureCssMenu a:active, ul.pureCssMenu a:focus {
outline-style:none;
}
ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover {
display:block;
vertical-align:middle;
background-color:#990033;
border-width:0px;
border-color:#990033;
border-style:solid;
text-align:center;
text-decoration:none;
padding:4px;
_padding-left:4;
font:normal 11.5px Verdana;
color: #FFEE00;
text-decoration:none;
cursor:default;
}
ul.pureCssMenu span{
overflow:hidden;
}
ul.pureCssMenu li {
float:left;
}
ul.pureCssMenu ul li {
float:none;
}
ul.pureCssMenu ul a {
text-align:left;
white-space:nowrap;
}
ul.pureCssMenu li.sep{
text-align:center;
padding:0px;
line-height:0;
height:100%;
}
ul.pureCssMenu li.sep span{
float:none;
padding-right:0;
width:5;
height:16;
display:inline-block;
background-color:#BB99BB;
background-image:none;
}
ul.pureCssMenu ul li.sep span{
width:80%;
height:3;
}
ul.pureCssMenu li:hover{
position:relative;
}
ul.pureCssMenu li:hover>a{
background-color:#FFEE00;
border-color:#0099cc;
border-style:solid;
font:normal 11.5px Verdana;
color: #990033;
text-decoration:none;
}
ul.pureCssMenu li a:hover{
position:relative;
background-color:#FFEE00;
border-color:#990033;
border-style:solid;
font:normal 11.5px Verdana;
color: #990033;
text-decoration:none;
}
ul.pureCssMenu li.dis a {
color: #AAAAAA !important;
}
I've never used CSS to make a menu before so i used an online maker @ purecssmenu.com, unfortunately they don't appear to have a decent support forum or any means of emailing them. I'm having a small problem putting the menu in to my site. The banner image for the site is 800px. When i put the menu in its not wide enough and i can't see a way of making it fit. Also i'm using a table to position it. When its positioned to the left there seems to be some padding or somthing making it not align up with the banner image. It appears to be 1 or 2px short. The style for the menu is... Code: #pcm{display:none;}
ul.pureCssMenu ul{display:none}
ul.pureCssMenu li:hover>ul{display:block}
ul.pureCssMenu ul{position: absolute;left:-1px;top:98%;}
ul.pureCssMenu ul ul{position: absolute;left:98%;top:-2px;}
ul.pureCssMenu,ul.pureCssMenu ul {
margin:0px;
list-style:none;
padding:0px 2px 2px 0px;
background-color:#000000;
background-repeat:repeat;
border-color:#808080;
border-width:1px;
border-style:solid;
}
ul.pureCssMenu table {border-collapse:collapse}ul.pureCssMenu {
display:block;
zoom:1;
height:21px;
float: left;
}
ul.pureCssMenu ul{
width:225.75px;
}
ul.pureCssMenu li{
display:block;
margin:2px 0px 0px 2px;
font-size:0px;
}
ul.pureCssMenu a:active, ul.pureCssMenu a:focus {
outline-style:none;
}
ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover {
display:block;
vertical-align:middle;
background-color:#000000;
border-width:1px;
border-color:#000000;
border-style:solid;
text-align:center;
text-decoration:none;
padding:2px 5px 5px 10px;
_padding-left:0;
font:normal 11px Tahoma;
color: #ffde00;
text-decoration:none;
cursor:default;
}
ul.pureCssMenu span{
overflow:hidden;
}
ul.pureCssMenu li {
float:left;
}
ul.pureCssMenu ul li {
float:none;
}
ul.pureCssMenu ul a {
text-align:left;
white-space:nowrap;
}
ul.pureCssMenu li.sep{
text-align:left;
padding:0px;
line-height:0;
height:100%;
}
ul.pureCssMenu li.sep span{
float:none; padding-right:0;
width:3px;
height:100%;
display:inline-block;
background-color:#808080; background-image:none;}
ul.pureCssMenu ul li.sep span{
width:100%;
height:3px;
}
ul.pureCssMenu li:hover{
position:relative;
}
ul.pureCssMenu li:hover>a{
background-color:#ffde00;
border-color:#000000;
border-style:solid;
font:normal 11px Tahoma;
color: #000000;
text-decoration:none;
}
ul.pureCssMenu li a:hover{
position:relative;
background-color:#ffde00;
border-color:#000000;
border-style:solid;
font:normal 11px Tahoma;
color: #000000;
text-decoration:none;
}
ul.pureCssMenu li.dis a {
color: #557D4F !important;
}
ul.pureCssMenu img {border: none;float:left;_float:none;margin-right:2px;width:16px;
height:16px;
}
ul.pureCssMenu ul img {width:16px;
height:16px;
}
ul.pureCssMenu img.over{display:none}
ul.pureCssMenu li.dis a:hover img.over{display:none !important}
ul.pureCssMenu li.dis a:hover img.def {display:inline !important}
ul.pureCssMenu li:hover > a img.def {display:none}
ul.pureCssMenu li:hover > a img.over {display:inline}
ul.pureCssMenu a:hover img.over,ul.pureCssMenu a:hover ul img.def,ul.pureCssMenu a:hover a:hover ul img.def,ul.pureCssMenu a:hover a:hover img.over,ul.pureCssMenu a:hover a:hover a:hover img.over{display:inline}
ul.pureCssMenu a:hover img.def,ul.pureCssMenu a:hover ul img.over,ul.pureCssMenu a:hover a:hover ul img.over,ul.pureCssMenu a:hover a:hover img.def,ul.pureCssMenu a:hover a:hover a:hover img.def{display:none}
ul.pureCssMenu a:hover ul,ul.pureCssMenu a:hover a:hover ul{display:block}
ul.pureCssMenu a:hover ul ul{display:none}
ul.pureCssMenu span{
display:block;
background-image:url(./images/arrv_white.gif);
background-position:right center;
background-repeat: no-repeat;
padding-right:9px;}
ul.pureCssMenu ul span{background-image:url(./images/arr_black.gif)}
ul.pureCssMenu ul li:hover > a span{ background-image:url(./images/arr_white.gif);}
ul.pureCssMenu table a:hover span,ul.pureCssMenu table a:hover a:hover span{background-image:url(./images/arr_white.gif)}
ul.pureCssMenu table a:hover table span{background-image:url(./images/arr_black.gif)}
ul.pureCssMenu li.pureCssMenui0 {
width:110px;
height:23px;
}
ul.pureCssMenu li a.pureCssMenui0{
height:100%;
background-image:url(./images/btn3.jpg);
border-width:0px;
font:normal 11px Tahoma;
color:#fff;
}
ul.pureCssMenu li a.pureCssMenui0:hover{
background-image:url(./images/btn4.jpg);
font:normal 11px Tahoma;
color:#eee;
}
ul.pureCssMenum0 {
background-color:transparent;
border-width:0px;
padding:0px 0px 0px 0px;
}
ul.pureCssMenum0>li>a {
padding:8px 10px 0px 10px;
}
ul.pureCssMenum0 a {
padding:8px 10px 0px 10px;
}
ul.pureCssMenum0 ul a {
padding:2px 5px 5px 10px;
}
ul.pureCssMenum0>li {
margin:0px 0px 0px 0px;
}
ul.pureCssMenum0 li {
margin:0px 0px 0px 0px;
}
ul.pureCssMenum0 li li {
margin:2px 0px 0px 2px;
}
</style>
<!-- End PureCSSMenu.com STYLE -->
And the html for the site is... Code: <!-- Start PureCSSMenu.com MENU --> <ul class="pureCssMenu pureCssMenum0"> <li class="pureCssMenui0"><a class="pureCssMenui0" href="/index.html">Home</a></li> <li class="pureCssMenui0"><a class="pureCssMenui0" href="#"><span>About Us</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="pureCssMenum"> <li class="pureCssMenui"><a class="pureCssMenui" href="/news.html">News & Events</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/promotions.html">Promotions</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/distribution.html">Distribution Network</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li class="pureCssMenui0"><a class="pureCssMenui0" href="#"><span>Services</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="pureCssMenum"> <li class="pureCssMenui"><a class="pureCssMenui" href="/service.html">Service</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/delivery.html">Delivery</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/m2m.html">Made to Measure</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li class="pureCssMenui0"><a class="pureCssMenui0" href="#"><span>Products</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="pureCssMenum"> <li class="pureCssMenui"><a class="pureCssMenui" href="/linings.html">Linings</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/blackouts.html">Blackouts</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Interlinings</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="pureCssMenum"> <li class="pureCssMenui"><a class="pureCssMenui" href="/interlining.html">Interlining</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/wadding.html">Wadding</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/2fold.html">2 Fold</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li class="pureCssMenui"><a class="pureCssMenui" href="accessories.html">Accessories</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Blind Systems</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="pureCssMenum"> <li class="pureCssMenui"><a class="pureCssMenui" href="/bsm2m.html">M2M & Component</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/setsize.html">Set Size & Open Rail</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/motorisedbs.html">Motorised</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/bsaccessories.html">Accessories</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/bslinings.html">Linings</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Curtain Tracks</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="pureCssMenum"> <li class="pureCssMenui"><a class="pureCssMenui" href="/easyflow.html">Easy Flow</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/trackservices.html">Track Services</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/handdrawn.html">Hand Drawn</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/corded.html">Corded</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/motorised.html">Motorised</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/panelsystem.html">Panel System</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/metalpoles.html">Metal Poles</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/woodenpoles.html">Wooden Poles</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Contract</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="pureCssMenum"> <li class="pureCssMenui"><a class="pureCssMenui" href="/contractlinings.html">Contract Linings</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/contractfabrics.html">Contract Fabrics</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/bamboo.html">Bamboo Fabrics</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/cushions.html">Cushions & Duvets</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/upholstery.html">Upholstery</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/printing.html">Printing</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/irishlinen.html">Irish Linen, Garment Linings & Interlinings</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li class="pureCssMenui0"><a class="pureCssMenui0" href="#"><span>Contact Us</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="pureCssMenum"> <li class="pureCssMenui"><a class="pureCssMenui" href="/general.html">General Enquiries</a></li> <li class="pureCssMenui"><a class="pureCssMenui" href="/newenquiries.html">New Enquiries</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li class="pureCssMenui0"><a class="pureCssMenui0" href="/orders.html">Orders</a></li> </ul> <a id="pcm" href="http://www.purecssmenu.com/">CSS Drop Down Menu by PureCSSMenu.com</a> <!-- End PureCSSMenu.com MENU --> <!-- (c) 2009, PureCSSMenu.com --> If anyone can help me make this 800px wide even if it means having a blank image at the end to fill any space and help removing any padding thats making it not appear full width it would be much appreciated. Im relatively new to CSS and im trying to make a navigation menu. I've been able to gather some code from other tutorials and finally got one that works fine under firefox 3.5, Opera 9 and IE8. However i've been told that its not working properly under IE7. Can anyone tell me if theres a fix for this? i've searched around other tutorials but couldnt make sense of them (which is probably why the CSS is a bit messy). Anyhelp would be greatly appreciated. link: users.tpg.com.au/tetsuo/css_help/index.html CSS: users.tpg.com.au/tetsuo/css_help/awis.css I have a vertical CSS menu using lists on my website. Everything looks ok when the page is first loaded but when I click on one of the menu items the left edge of the menu shifts to the left making the entire menu 10px wider. The div containung the menu has a left value of 10px but this seems to be ignored or overwritten when I click on a menu item. The right edge of the menu does not change. If I refresh the page it appears correctly again. Any ideas? If you view my website http://jordanmeeter.com/index you'll see how the menu displays, and how it is supposed to appear. And then if you view the website in IE, you'll notice that there are grey boxes inbetween each menu item. What is causing this? Here is the HTML: Code: <div id="navcontainer">
<ul id="navlist">
<li><a href="#" title="One">One</a></li>
<li><a href="#" title="Two">Two</a></li>
<li><a href="#" title="Three">Three</a></li>
<li><a href="#" title="Four">Four</a></li>
<li><a href="#" title="Five">Five</a></li>
</ul>
</div>
And the CSS: Code: #navlist {
padding: 0 1px 1px;
margin-left: 0;
font: bold 12px Verdana, sans-serif;
background: gray;
width: 13em;
}
#navlist li {
list-style: none;
margin: 0;
border-top: 1px solid gray;
text-align: left;
}
#navlist li a {
display: block;
padding: 0.25em 0.5em 0.25em 0.75em;
border-left: 1em solid #38739D;
background: #616161;
text-decoration: none;
color: #A5D3EF;
}
#navlist li a:link { color: #A5D3EF; }
#navlist li a:visited { color: #A5D3EF; }
#navlist li a:hover {
border-color: #54ACEB;
color: #FFF;
background: #616161;
}
hi all! so i'm working on a redesign of our corporate site but i'm having a few problems with this menu i'm coding. http://washsq.com/test/index.html if you take a look at this there are 3 problems i can't seem to fix, no matter what i try. 1. why does the padding each menu button extend over the border for the entire div? 2. how can i get the gap between each button to be 0? 3. how can i float this entire menu to the right of the div? i've tried a lot but nothing seems to work. thanks! Hey guys, I'm trying to aling my menu in my new website. I'm trying to align the buttons on the bottom of the dark div on the top of the page. Its not working at all, and FF en IE are showing different stuff: So, in both browsers, I cant get it to work. I want the two buttons to be aligned on the bottom of the dark part, like tabs. Next to eachother. Any (bright) ideas? Thanks! This is the complete code I'm using: html Code: Original - html Code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <style> .shadowbox {margin-bottom:4px;background: #dfdfdf; border: 1px solid #f5f5f5; position: relative;top: 2px;left: 2px;} .lightyellow {padding:10px;background: #FFFFCC;border: 1px solid #B6B6B6;color: #242424;} .shadowbox div.normal {position: relative;top: -2px;left: -2px;} #content {width: 90%; margin-top: 15px; padding: 15px; margin-left: 5%; background: #FFFFFF; border: 1px solid #000000; text-align: left;} #header {margin: 0px; padding: 0px; padding-left: 5%; background: #333333; height: 65px; text-align: left; } #logo { padding-top: 10px} body {padding: 0px; margin: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:80%; background-image: url('images/back.gif'); background-repeat: repeat; } h1 { font-size: 150%; padding: 0px; margin: 0px; padding-bottom: 5px; padding-left: 2px; } #copyright { text-align: center; font-size: 10px; margin-top: 25px; color: #7D7D7D; } </style> </HEAD> <BODY> <div id='header'> <div id='logo'> <img src='images/logo.png' alt='InvenI'> </div> <img src='images/zoeken_inactive.gif'> <img src='images/zoeken_inactive.gif'> </div> <div id='content'> <h1>Mijn Verlanglijstje</h1> <div class='shadowbox'> <div class='normal lightyellow'> hoiii<br /><br />hoiii<br /><br />hoiii<br /><br />hoiii<br /><br /> </div> </div> <div class='shadowbox'> <div class='normal lightyellow'> hoiii<br /><br />hoiii<br /><br />hoiii<br /><br />hoiii<br /><br /> </div> </div> </div> <div id='copyright'> Geen enkele advertentie wordt gehost op InvenI, InvenI is dus ook niet verantwoordelijk voor hun inhoud.<br /> InvenI.nl is niet verantwoordelijk voor (gevolg)schade ontstaan door het gebruik van deze site.<br /> Geregistreerde namen zijn eigendom van hun eigenaren.<br /> Meer informatie over uw Privacy.<br /> </div> </BODY> </HTML>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<style>
.shadowbox {margin-bottom:4px;background: #dfdfdf;
border: 1px solid #f5f5f5; position: relative;top: 2px;left: 2px;}
.lightyellow {padding:10px;background: #FFFFCC;border: 1px solid #B6B6B6;color: #242424;}
.shadowbox div.normal {position: relative;top: -2px;left: -2px;}
#content {width: 90%; margin-top: 15px; padding: 15px; margin-left: 5%; background: #FFFFFF; border: 1px solid #000000; text-align: left;}
#header {margin: 0px; padding: 0px; padding-left: 5%; background: #333333; height: 65px; text-align: left; }
#logo { padding-top: 10px}
body {padding: 0px; margin: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:80%; background-image: url('images/back.gif'); background-repeat: repeat; }
h1 { font-size: 150%; padding: 0px; margin: 0px; padding-bottom: 5px; padding-left: 2px; }
#copyright { text-align: center; font-size: 10px; margin-top: 25px; color: #7D7D7D; }
</style>
</HEAD>
<BODY>
<div id='header'>
<div id='logo'>
<img src='images/logo.png' alt='InvenI'>
</div>
<img src='images/zoeken_inactive.gif'>
<img src='images/zoeken_inactive.gif'>
</div>
<div id='content'>
<h1>Mijn Verlanglijstje</h1>
<div class='shadowbox'>
<div class='normal lightyellow'>
hoiii<br /><br />hoiii<br /><br />hoiii<br /><br />hoiii<br /><br />
</div>
</div>
<div class='shadowbox'>
<div class='normal lightyellow'>
hoiii<br /><br />hoiii<br /><br />hoiii<br /><br />hoiii<br /><br />
</div>
</div>
</div>
<div id='copyright'>
Geen enkele advertentie wordt gehost op InvenI, InvenI is dus ook niet verantwoordelijk voor hun inhoud.<br />
InvenI.nl is niet verantwoordelijk voor (gevolg)schade ontstaan door het gebruik van deze site.<br />
Geregistreerde namen zijn eigendom van hun eigenaren.<br />
Meer informatie over uw Privacy.<br />
</div>
</BODY>
</HTML>
Hello, everyone. I'm a relative newcomer to CSS, and I decided I'd try and add a neat flyout menu to the new site I'm developing: www.mindwallpictures.com. As you'll notice, it works great in Firefox, but doesn't work at all in IE. Here is the CSS code from my site: Code:
/* ================================================================
This copyright notice must be untouched at all times.
The original version of this stylesheet and the associated (x)html
is available at (URL address blocked: See forum rules)
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
.menu {
height:150px;
font-size:90%;
/* this page only */
}
/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
position:relative;
z-index:500;
padding:0;
margin:0;
list-style-type:none;
width:150px;
}
/* style the list items */
.menu li {
background:#6b6b6b url(images/button.gif);
height:26px;
/* for IE7 */
float:left;
}
.menu li.sub {background:#6b6b6b url no-repeat right center;}
/* get rid of the table */
.menu table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em;}
/* style the links */
.menu a, .menu a:visited {
display:block;
text-decoration:none;
height:25px;
line-height:25px;
width:149px;
color:#FFF;
text-indent:5px;
border:1px solid #6b6b6b;
border-width:1px 1px 1px 1px;
}
/* hack for IE5.5 */
* html .menu a, * html .menu a:visited {width:150px;}
/* style the link hover */
* html .menu a:hover {color:#adbaad; background:#888d88; position:relative;}
.menu li:hover {position:relative;}
/* For accessibility of the top level menu when tabbing */
.menu a:active, .menu a:focus {color:#adbaad; background:#888d88;}
/* retain the hover colors for each sublevel IE7 and Firefox etc */
.menu li:hover > a {color:#adbaad; background:#888d88;}
/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu li ul {
visibility:hidden;
position:absolute;
top:-30px;
/* set up the overlap (minus the overrun) */
left:100px;
/* set up the overrun area */
padding:30px;
/* this is for IE to make it interpret the overrrun padding */
background:transparent url(transparent.gif);
}
/* for browsers that understand this is all you need for the flyouts */
.menu li:hover > ul {visibility:visible;}
/* make the second level visible when hover on first level link */
.menu ul a:hover ul {
visibility:visible;
}
</style>
and here is the html that goes with it: Code:
<div class="menu">
<ul>
<li><a href="index.html">MindWall Home</a></li>
<li class="sub"><a href="#nogo">News</a>
<ul>
<li><a href="news/recent/index.html">Recent News</a></li>
<li><a href="news/archives/index.html">News Archives</a></li>
</ul>
</li>
<li class="sub"><a href="#nogo">Films</a>
<ul>
<li><a href="films/rendezvous/index.html"><i>A Dreamer's Rendezvous</i></a></li>
<li><a href="films/millberg/index.html"><i>Millberg Apartments</i></a></li>
<li><a href="films/musicvids/index.html">Music Videos</a></li>
<li><a href="films/upcoming/index.html">Upcoming Projects</a></li>
</ul>
</li>
<li class="sub"><a href="#nogo">Links</a>
<ul>
<li><a href="http://www.mooseheadfilms.com">Moosehead Studios</a></li>
<li class="sub"><a href="#nogo">Purdue</a>
<ul>
<li><a href="http://www.purdue.edu">University Home Page</a></li>
<li><a href="http://www.cla.purdue.edu/film-studies/">Film Studies Program</a></li>
<li><a href="http://purduefvsnewsletter.blogspot.com/">FVS Newsletter</a></li>
</ul>
</li>
<li><a href="http://www.imdb.com">Internet Movie Database</a></li>
</ul>
</li>
<li class="sub"><a href="#nogo">About Us</a>
<ul>
<li><a href="about/mindwall/index.html">About MindWall Pictures</a></li>
<li><a href="about/awards/index.html">Awards & Recognition</a></li>
<li><a href="about/crewbio/index.html">Crew Biography</a></li>
</ul>
</li>
<li class="sub"><a href="#nogo">Contact Us</a>
<ul>
<li><a href="contact/mindwall/index.html">Contact MindWall</a></li>
<li><a href="contact/crew/index.html">Contact film crew</a></li>
</ul>
</li>
</ul>
</div>
It has been altered (by myself, the n00b) from the original code found at CSSplay: http://www.cssplay.co.uk/menus/flyout_4level.html It's bugging the crap out of me, and the guy wants the site done as early as next week. This is the one thing holding me back, since people...actually...use IE. -_- Poor souls. Any help would be greatly appreciated! Thanks. Hello, if you go to: http://tombraiders.net/katie/Site/index.html you'll see that the items in the menu aren't spaced evenly. I've tried to put some padding underneath but it doesn't appear to be working. I would like it if they were all evenly spaced, because some of the text (where there's two lines of text) is quite cramped. The CSS file can be found here Thanks! I was working on a menu following the suckerfish tutorial at Alist Apart and I've got it working in FF but not IE6. Big surprise. There's 2 issues with IE 6: 1. The menu is sitting lower in IE than in FF. 2. The dropdowns aren't working in IE at all. I've applied the js hack and it's still not working. I can't find what I'm missing but I know it's there somewhere. Here's the url: menu Please help. Thanks. Brad hey all, I have been working on a multilevel suckerfish menu tutorial and i have the following: http://www.wildhosting.co.uk/cssMenu/menu.php However, i am having a couple of final problems. 1) In FF the grey highlight colour does not seem to fill from top to bottom on the main menu. 2) In FF, When a sub menu (for the top option of the menu) appears the top border of the submenu overlaps the bottom border of the main menu. 3) In IE, the above are ok but the submenu appears a long way from where it should, ie 5cm to the right... any help would be great, thanks RF hi, Am nearly finished my first website but this issue won't go away and it's driving me crazy. www.leehughes.co.uk As you can see I have a drop down menu at the top. The problem is a couple of my friends have reported trouble trying to access the sub menus. They can hover over the main choice but when they move the mouse down to select a link the links disappear. it's not like they can not be selected though if you press ctrl and go down then they can be selected. Am so puzzled and so close to the end it's driving me crazy.. I've just started to learn CSS, and I've picked it up without much trouble so far, but I'm stuck with a small formatting problem I'm having. Using Firefox, the spacing for the menus on the right and left side are basically where I want them to be. Link Horizontal Line Link HR and so on... The page is at http://www.mcconaha.com/csscenter.php and the CSS is at http://www.mcconaha.com/csscenter.css So I have two questions... 1) What formatting trick am I missing when it comes to the padding under text like that? I've used the padding attribute in the CSS, but it doesn't seem to do anything. The only solution I've found is to set the margins to -Xpx and use that, but then it overlaps in FF. This has to be simple and stupid, I just haven't figured it out. 2) This isn't as vital, but would be nice if I could figure out. The nav boxes are stacked down each side. If I add an item to the top box, I have to readjust the top attribute in the CSS for all boxes by whatever the increase in size of the first box was. Is there a way to align the top box, then make all the others conform down when you add something above? Thanks in advance. I'm sure I'll be posting more questions as I have them. Hello, I just started trying to learn about css and html layouts by following this tutorial he hxxp://www . subcide.com/tutorials/csslayout/page2.aspx This is my webpage: (link removed as issued is resolved) but I'm having issues making the navigation look correct (not repeat and be about 50 px down) Can someone give me a little hand. ? cheers. ps....errrr...I see nothing that I am doing wrong in the forum rules about the urls...... Hello. I'm trying to create a CSS/SPRY dropdown menu. It seems to work fine in Firefox but in IE 6 the dropdown goes horizontal until I mouse over then it goes verticle. Also how do I add black 1px border around each list item in the dropdown menu? I have tried but it tends to give the first Menu Item the border as well which doesnt work so well with the layout. Here is the temp site. http://www.nessphysiotherapy.com/tempmenuhelp.html Quote: @charset "UTF-8"; /* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 */ /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */ /******************************************************************************* LAYOUT INFORMATION: describes box model, positioning, z-order *******************************************************************************/ /* The outermost container of the Menu Bar, an auto width box with no margin or padding */ ul.MenuBarHorizontal { margin: 0; padding: 0; list-style-type: none; font-size: 100%; cursor: default; width: auto; } /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */ ul.MenuBarActive { z-index: 1000; } /* Menu item containers, position children relative to this container and are a fixed width */ ul.MenuBarHorizontal li { margin: 0; padding: 0; list-style-type: none; font-size: 100%; position: relative; text-align: left; cursor: pointer; width: auto; float: left; white-space: nowrap; } /* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */ ul.MenuBarHorizontal ul { margin: 0; padding: 0; list-style-type: none; z-index: 1020; cursor: default; width: auto; position: absolute; left: -1000em; } /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */ ul.MenuBarHorizontal ul.MenuBarSubmenuVisible { left: auto; } /* Menu item containers are same fixed width as parent */ ul.MenuBarHorizontal ul li { float: none; background-color: transparent; } /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */ ul.MenuBarHorizontal ul ul { position: absolute; margin: -5% 0 0 95%; } /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */ ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible { left: auto; top: 0; } /******************************************************************************* DESIGN INFORMATION: describes color scheme, borders, fonts *******************************************************************************/ /* Submenu containers have borders on all sides */ ul.MenuBarHorizontal ul { background: #781844; } /* Menu items are a light gray block with padding and no text decoration */ ul.MenuBarHorizontal a { display: block; cursor: pointer; color: #FFFFFF; text-decoration: none; font-family: Tahoma, "Times New Roman", Serif, Arial; font-weight: bold; font-size: 0.9em; line-height: 0.98em; padding-top: .9em; padding-right: 1.1em; padding-bottom: 1em; padding-left: 1.1em; } /* Menu items that have mouse over or focus have a blue background and white text */ ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus { color: #99CCCC; } /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */ ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible { color: #99CCCC; } /******************************************************************************* SUBMENU INDICATION: styles if there is a submenu under a given menu item *******************************************************************************/ /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */ ul.MenuBarHorizontal a.MenuBarItemSubmenu { background-image: url(SpryMenuBarDown.gif); background-repeat: no-repeat; background-position: 95% 50%; } /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */ ul.MenuBarHorizontal ul a.MenuBarItemSubmenu { background-image: url(SpryMenuBarRight.gif); background-repeat: no-repeat; background-position: 95% 50%; } /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */ ul.MenuBarHorizontal a.MenuBarItemSubmenuHover { background-image: url(SpryMenuBarDownHover.gif); background-repeat: no-repeat; background-position: 95% 50%; } /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */ ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover { background-image: url(SpryMenuBarRightHover.gif); background-repeat: no-repeat; background-position: 95% 50%; } /******************************************************************************* BROWSER HACKS: the hacks below should not be changed unless you are an expert *******************************************************************************/ /* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */ ul.MenuBarHorizontal iframe { position: absolute; z-index: 1010; } /* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */ @media screen, projection { ul.MenuBarHorizontal li.MenuBarItemIE { display: inline; f\loat: left; background: transparent; } } I'm having trouble with the drop down menu for my website and I know it just has to be an easy fix, but I can't figure it out! I've spent grueling hours on it and now I've probably just messed up the original code! The menu will not center, and if I get it to, either the entire background turns white, the background for the menu turns white, or something else goes wrong (mostly more IE problems). Any help would be great....it looks like I can't post a link to the site, nor can I post the enormous amount of code in here??? Can someone tell me how I can do either or simply direct you to my site? I'm not self-promoting it, I just need help! |
|||||||