CSS - Menu Problem

Hi All,
I'm desperate for help on this. I did not build this site but am currently working as the developer to get it up to par on IE6. The lower menu on the page listed below is the one that is not currently working in IE6. Works fine in IE7 & FF.

**I cannot post the URL as I'm a new member but would be happy to send it to you**

**Worked on this myself for quite awhile to no avail**

This site has two sets of navigation, both employing rollover CSS menus.

The upper menu HOVER state works, the lower menu won't even recognize the links nor does the HOVER state work. The upper menu and the lower menu use almost the same exact code verbatim except for the classes and divs are named differently.

Can you help?

below is the CSS for the upper menu:
Code:

.menu2 {
	padding:0 0 0 32px;
	margin:0;
	list-style:none;
	width:868px;
	height:35px;
	background:#fff url(../images/navbar.jpg);
	position:relative;
	border-width:0 1px;
	border-bottom:1px solid #ffffff;
}
.menu2 li {
	float:left;
}
.menu2 li a {
	display:block;
	float:left;
	height:35px;
	line-height:35px;
	color:#FFFFFF;
	text-decoration:none;
	font-size:13px;
	font-family:verdana, sans-serif, ariel;
	font-weight:bold;
	text-align:center;
	padding:0 0 0 8px;
	cursor:pointer;
	outline:none;
}
.menu2 li a b {
	float:left;
	display:block;
	padding:0 16px 0 8px;
}
.menu2 li.current a {
	color:#fff;
	background:url(../images/button3-3.gif);
}
.menu2 li.current a b {
	background:url(../images/button3-3.gif) no-repeat right top;
}
.menu2 li a:hover {
	color:#fff;
	background:#000 url(../images/button4-3.gif);
}
.menu2 li a:hover b {
	background:url(../images/button4-3.gif) no-repeat right top;
}
.menu2 li.current a:hover {
	color:#fff;
	background:#000 url(../images/button3-3.gif);
	cursor:default;
}
.menu2 li.current a:hover b {
	background:url(../images/button3-3.gif) no-repeat right top;
}
/*=== END MAIN MENU===*/

HTML for the upper menu:
Code:

    <ul class="menu2">
      <li><a href="#"><b>Home</b></a></li>
      <li><a href="#"><b>About Us</b></a></li>
      <li><a href="#"><b>Apply</b></a></li>
      <li><a href="#"><b>Cash Advance</b></a></li>
      <li><a href="#"><b>Payday Loan</b></a></li>
      <li><a href="#"><b>FAQ</b></a></li>
      <li><a href="#"><b>Contact Us</b></a></li>
      <li><a href="#"><b>Member Login</b></a></li>
    </ul>

now here is the css for the lower menu:
Code:

/*___CASH_ADVANCE_MENU_________________________________________*/
#cashadvancenav {
	width:675px;
}
.cashadvancenav2 {
	padding:0 0 0 10px;
	margin:0;
	list-style:none;
	width:665px;
	height:35px;
	background:#fff url(../images/cashadvancebar.jpg);
	position:relative;
	border-width:0 1px;
	border-bottom:1px solid #ffffff;
}
.cashadvancenav2 li {
	float:left;
}
.cashadvancenav2 li a {
	display:block;
	float:left;
	height:35px;
	line-height:35px;
	color:#FFFFFF;
	text-decoration:none;
	font-size:13px;
	font-family:verdana, sans-serif, ariel;
	font-weight:bold;
	text-align:center;
	padding:0 0 0 4px;
	cursor:pointer;
	outline:none;
}
.cashadvancenav2 li a b {
	float:left;
	display:block;
	padding:0 16px 0 8px;
}
.cashadvancenav2 li.current a {
	color:#fff;
	background:url(../images/button3-3.gif);
}
.cashadvancenav2 li.current a b {
	background:url(../images/button3-3.gif) no-repeat right top;
}
.cashadvancenav2 li a:hover {
	color:#fff;
	background:#000 url(../images/button4-3.gif);
}
.cashadvancenav2 li a:hover b {
	background:url(../images/button4-3.gif) no-repeat right top;
}
.cashadvancenav2 li.current a:hover {
	color:#fff;
	background:#000 url(../images/button3-3.gif);
	cursor:default;
}
.cashadvancenav2 li.current a:hover b {
	background:url(../images/button3-3.gif) no-repeat right top;
}

...and the html for the lower menu:
Code:

          <ul class="cashadvancenav2">
            <li><a href="#"><b>What's The Limit?</b></a></li>
            <li><a href="#"><b>Quick</b></a></li>
            <li><a href="#"><b>Low Fees</b></a></li>
            <li><a href="#"><b>No Credit Check</b></a></li>
            <li><a href="#"><b>Secure</b></a></li>
            <li><a href="#"><b>States</b></a></li>
          </ul>

I so BEYOND appreciate any enlightenment you can give me on this...

Best-
Anita-ACA Web

On the menu at the top left of my site the spacing in IE is to much i want the same as firefox, but if i make the margin small firefox does not look right please help.

Website link


CSS file

Code:

/* CSS Document */

* {

margin: 0;

padding: 0;

}



body {

background: url("back.gif") repeat;

}



#wrapper {

width: 579px;

height: 558px;

background: #fff;

margin: 0 auto;

}



#header {

width: 575px;

height: 125px;

background: url("header.jpg") no-repeat;

background-position: top right;

margin: 4px 0px 0px 0px;

}



#nav {

list-style: none;

z-index: 2;

padding-left: 3px;

margin: 0px 0px 0px 0px;

}



#nav li a {

color: #fff;

font: normal 11px verdana, arial, sans-serif;

display: block;

width: 120px;

height: 24px;

background-color: #000;

padding-left: 10px;

text-decoration: none;

margin: 1px 0px 0px 0px;



}



h1 {

width: 120px;

height: 30px;

background-color: #333;

margin: 1px 1px 1px 3px;

float: left;

font: bold 16px arial, verdana, sans-serif;

padding-left: 10px;

color: #fff;

}



h2 {

width: 431px;

height: 30px;

background-color: #333;

float: left;

font: bold 16px arial, verdana, sans-serif;

padding-left: 10px;

color: #fff;

cursor: default;

margin: 1px 0px 0px 0px;

}



#sidebar {

width: 129px;

height: 380px;

background-color: #ccc;

float: left;

font: normal 10px verdana, arial, sans-serif;

padding: 0px;

margin-left: 4px;

margin-top: 1px;

}



#content {

float:right;

width: 430px;

background-color:#fff;

margin-top: 0px;

font: normal 10px verdana, arial, sans-serif;

}

p {
margin: 5px;
}

Hello, I hope, somebody help me with my problem.

I created website menu, but I don't know, where is a bug, because it doesn't show properly..

Preview:


Site:




As you can see, something is bad. Can you help me please? Very thanks!

CSS:
PHP Code:
#navhome {float: right; width: 74px; height: 40px;}
#navnews {float: right; width: 74px; height: 40px;}
#navdates {float: right; width: 74px; height: 40px;}
#navbio {float: right; width: 74px; height: 40px;}
#navphotos{float: right; width: 74px; height: 40px;}
#navdownload {float: right; width: 100px; height: 40px;}
#navlinks {float: right; width: 74px; height: 40px;}
#navbooking {float: right; width: 74px; height: 40px;}
#navcontact {float: right;width: 74px; height: 40px;}

.navLinks {
  background: url(../img/nav_icon.png) no-repeat center left;
  color: #FFFFFF;
  font-weight: bold;
} 
.navLinks,.navLinksSelected { 
  display: block;
  float: left;
  font-size: 8pt;
  height: 28px;
  padding-top: 12px;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  width: 100%;
}

.navLinksSelected,a.navLinksSelected:hover {
background: url("../img/nav_sel.jpg") repeat-x scroll center bottom; 
color: #b9d62e; 
font-weight: bold; 
text-decoration: none; 
width: 76px;
}

a.navLinks:hover {
background-color: #b9d62e; 
color:#ffffff; 
text-decoration: none;
} 





HTML:
PHP Code:
<div id="navcontact"><a href="#" class="navLinks">CONTACT</a></div>
  <div id="navbooking"><a href="booking.php" class="navLinks">BOOKING</a></div>
  <div id="navlinks"><a href="#" class="navLinks">LINKS</a></div>
  <div id="navdownload"><a href="#" class="navLinks">DOWNLOAD</a></div>
  <div id="navphotos"><a href="#" class="navLinks">PHOTOS</a></div>
  <div id="navbio"><a href="#" class="navLinks">BIO</a></div>
  <div id="navdates"><a href="#" class="navLinks">DATES</a></div>
  <div id="navnews"><a href="#" class="navLinks">NEWS</a></div>   
  <div id="navhome"><a href="/" class="navLinksSelected">HOME</a></div> 

I was just wondering if anyone knew how to fix the UL and LI hierarchy problem in css with tabmenus.

I wanted the border under my featured tab to disappear but it doesnt work well in IE.

Please have a look; if you look at this code in Firefox it should show the first tab as being white without the black border on the bottom of it. In IE the black border is there because the UL border overwrote the LI border.

Does anyone know a work around?

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="assets/style.css" />
<style type="text/css">
/* START TAB MENU */
ul
{
 margin: 0;
 padding: 0;
 list-style: none;
 font-size: 14px;
 border-bottom: 1px solid #808080;
 height: 21px !important;
 height: 20px;
}
li
{
 float: left;
 margin-right: 10px;
 border: 1px solid #808080;
 border-bottom: none;
}
li a
{
 background-color: #f2f3f5;
 color: #808080;
 padding: 2px 10px 3px 10px;
 display: block;
 text-decoration: underline;
 font: 12px arial;
}
body .featured
{
 background-color: #ffffff;
 color: #000000;
 border-bottom: 1px solid #ffffff;
 text-decoration: none;
 font-weight: bold;
}
/*  END TAB MENU */
</style>
</head>
<body>
 
<ul>
      <li>
       <a href="#" class="featured">Create User</a></li>
      <li>
       <a href="#">Edit User</a></li>
      <li>
       <a href="#">View All Users</a></li>
      <li>
       <a href="#">Reports</a></li>
      <li>
       <a href="#">Log Out</a>
      </li>
</ul>
</body>
</html> 

I have a problem with left menu.

In FF, Opera and IE8 everything is good.
But in IE7 left "Main Menu" submenus are different length.
But should be the same. I don't know what else to try.

I would be very greatfull for any help.

You can see the problem he www kodukomfort.ee

Hi there

i have a small problem and i think it lies in my nav menu, basically i want my menu to float right which it does but i'm left with this large white area on the right side of my webpage.

please could someone take a look and help me

my website being webbid.co.uk

and the code :-
Code:

ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
 list-style: none;
 margin: 0;
 padding: 0;
}

ul#nav {
 float: right;
 position: relative;
 z-index: 597;
}

ul.dropdown li {
 float: right;
 line-height: 1.3em;
 vertical-align: middle;
 zoom: 1;
}

ul.dropdown li.hover,
ul.dropdown li:hover {
 position: relative;
 z-index: 598;
 cursor: default;
}

ul.dropdown ul {
 visibility: hidden;
 position: absolute;
 top: 100%;
 left: 0;
 z-index: 599;
 width: 100%;
}

ul.dropdown ul li {
 float: none;
}

ul.dropdown ul ul {
 top: 1px;
 left: 100%;
}

ul.dropdown li:hover > ul {
 visibility: visible;
}

Thanks in advance.

I have this site here

when i click on the side menu swapz or wantedz the main content part jumps down with it.

How can i stop this from doing this

It runs on joomla cms

My page at gvtdev .davebezaire .com/journeys/bolivia08/living-experience .html validates for HTML and CSS and works fine in Firefox 3.6, Chrome 9.0, and IE 8.0. My problem is in IE 7 which I test by using IE 8.0 in Compatibility Mode.

In Compatibility Mode, links in the main content, located within a div with id="content", are not clickable. This is because I have a conditional CSS section for [lt IE 8] within the <head> section of the page which includes the rule

Code:

#content {position:relative;z-index:-1;}

If I turn off that rule (e.g., with FirebugLite), the links are clickable. However, the functionality of the main navigation menu items in the little houses across the top of the page does not work properly.

Specifically, with the rule turned off, only the first three items in the dropdown menus (such as that under "Our Journeys") are accessible. If you try to move down over the 4th item, the dropdown closes. The main menu is in a ul with class="mnu hmnu".

I've made several attempts to set the parent elements to position:relative and giving them a z-index, all to no avail.

I would very much appreciate some assistance. Thanks in advance for your help!

Dave

I cannot figure out what I am doing wrong. My css drop down menu works perfectly in all of the browsers I have tested, except IE7. I have gone through a couple of different css drop down menu sites like suckerfish, cssplay to see if I could figure out what they have and I don't but nothing is standing out. Here is my CSS for the menu:

Code:

#menu1 { width: 100%; background: #eee; height: 36px;}
#menu1 ul { list-style: none; margin: 0; padding: 0;  float: left; }
#menu1 a, #menu1 h2 { font: normal 11px Verdana; display: block; border-width: 1px; border-style: solid; border-color: #ccc #888 #555 #bbb;
                    margin: 0; padding: 2px 3px; }
#menu1 h2 { color: #fff; background: url(MenuBackground.jpg); height: 30px; line-height: 30px; text-align: center; border-right: 1px dotted #c0c0c0; font-weight: bold; }
#menu1 a { display: block; color: #FFFFFF; background: #555555; text-decoration: none; }
#menu1 a:hover { color: #FFFFFF; background: #c0c0c0; }
#menu1 li {position: relative; float: left;}
#menu1 li li { width: 13em; }
#menu1 ul ul { position: absolute; z-index: 500; }
#menu1 ul ul ul { position: absolute; top: 0; left: 100%; }

div#menu1 ul ul,
div#menu1 ul li:hover ul ul,
div#menu1 ul ul li:hover ul ul
{display: none;}

div#menu1 ul li:hover ul,
div#menu1 ul ul li:hover ul,
div#menu1 ul ul ul li:hover ul
{display: block;}

and the piece I am having trouble with is the submenu's menu that should flyout to the right of the menu but it drops straight down behind the menu (Other negative listings list should flyout to the right when mouse over)

Code:

<ul>
  <li style="width: 120px;"><h2>&nbsp;Negative Items&nbsp;</h2>
    <ul>
      <li><a href="CreditCounseling.php" title="Other Negative Listings">Other Negative Listings</a>
        <ul>
          <li><a href="CreditCounseling.php" title="Credit Counseling">Credit Counseling</a></li>
          <li><a href="PartialPayments.php" title="Partial Payments">Partial Payments</a></li>
          <li><a href="student_loans.php" title="Student Loans"> Negative Student Loans</a></li>            
        </ul>
      </li>
   </ul>
  </li>
</ul>

Looks fine in Safari and IE, for some reason the last tab drops down in FireFox...
I usually figure these things out but I must admit I am stuck on this one, please help

www . goldenbroom-janitorial.com/test

Here is the HTML
Code:

<body><br>
<div id="wrapper">



<div style="text-align:left; width:800px;">
  <table border="0" width="800">
    <tr>
      <td width="800" style="height:300" align="left"><table style="height:300; width:800px; ">
          <tr>
            <td width="800" height="268" style="background-image:url(images/logo_header.jpg); background-position: top center; background-repeat:no-repeat;">
			
			  </td>

          </tr>
          <tr>
            <td width="800" height="300"><table>
                
				  </td>
                  <td width="800" height="300"><table>
                      <tr>
                        <td width="800" height="10"><table>
                            <tr>
                              <td width="10" height="10"><img src="images/corner1.gif" alt="" border="0" /><br /></td>
                              <td width="800" height="10" style="background-image:url(images/topline.gif)"></td>
                              <td width="10" height="10"><img src="images/corner2.gif" alt="" border="0" /><br /></td>
                            </tr>
                        </table></td>
                      </tr><div id="menu">
         <ul>
			<li><a href="index.html" class="current"><font color="#FBC431">Home</font></a></li>
   			<li><a href="cleaning_services_dallas.html">Services</a></li>
			<li><a href="house_cleaning_employment_dallas.html">Employment</a></li>
			<li><a href="cleaning_services_questions_dallas.html">FAQ's</a></li>
			<li><a href="cleaning_services_free_estimates_dallas.html">Free Estimates</a></li>
            <li><a href="cleaning_services_dallas_contact.html">Contact Us</a></li>
        </ul>      	
    </div>

Here is the CSS:

Code:

/*--- Menu ---*/
#menu {
	
	height:138px;
	width: 800px;
	background: #A8A676;
	display:inline;
	

}

#menu ul {
	margin: 0px;
	padding: 0px;
	text-align: center;

}

#menu ul li {
	display: inline;
}

#menu img {
	display: inline;
}

#menu ul li a{
	float:left;
	margin-right: 0px;
	padding: 25px 0px 0px 0px;
	width: 133px;
	height: 95px;
	font: 14px "tahoma","verdana","impact";
	font-weight:bold;
	text-align: center top;
	text-decoration: none;
	color: #1e1717;
	background:url(../images/menu_background.gif) no-repeat;
	
}

#menu ul li a:visited {
	color: #1e1717;
}

#menu ul li a:hover, #menu ul li .current {
	color: #FBC431;
	text-decoration: none;
	background: url(../images/menu_hover.gif) no-repeat;
}

/*--- End of Menu ---*/

THE CONTACT TAB IS DROPPING DOWN FOR SOME REASON!


Thanks in advance!

Hi guys,

I've written a drop-down menu, located here (there's only a drop down menu on the "Services" link in the menu.

Now, the menu works fine in FireFox, however it completely screws up in IE (I'm not too worried about the menu being put on the right in IE, just moreso about all the gaps its making).

To do the menu, I'm simply using an extra table for the drop down menu which has its display property set to none, and giving it the css property of "position: absolute;". Then when it is rolled over, it just changes to "display: block".

How would I go about fixing this?

Hey all!

I got a problem with my Pure CSS Menu on my blog (blogspot).
I created the menus, but when i put it in my blog, the sub-menus stay behind the posts and widgets.

Can anyone help me changing the code or html config please? I want the sub menus in front of the posts and widgets!

Thank you very much!


My blog: slipplanet.blogspot.com

Hey I'm having some trouble with the website I'm trying to make. I got a css style pulldown menu, but the pulldown part can't be seen because its on the top frame of a frameset. Is there a way to make the pulldown extend over the edge of the frame?

Hi I am trying to create a horizontal menu for my interface and am running into a problem. I created the menu and it seems to work fine, but after I try to move it to where I want it, it leaves a blank spot in my content area that I cant get ridd of. Here is the link www.isostudios.com
Im a little new to css so dont be to hard on me