challenged
asked on
CSS Vertical Side Menu wtih Horizontal Submenu Popouts 3 Levels Help
I'm pulling my hair out trying to get my side menu to work properly.
See www.gormf.com. Notice that the background highlighting works fine for the top 2 items ("Anti-Fatigue Mats" & "Cow & Livestock Mats"), but then there is an extra space on the rest at the top 1-2 pixels, plus an extra 1 pixel space on only the bottom item.
My css coding is all over the place and I have no idea anymore. I need this to work across multiple platforms. Any help is much appreciated. See CSS & HTML coding below.
Let me know if you have any questions. Thanks in advance!
Dean
See www.gormf.com. Notice that the background highlighting works fine for the top 2 items ("Anti-Fatigue Mats" & "Cow & Livestock Mats"), but then there is an extra space on the rest at the top 1-2 pixels, plus an extra 1 pixel space on only the bottom item.
My css coding is all over the place and I have no idea anymore. I need this to work across multiple platforms. Any help is much appreciated. See CSS & HTML coding below.
Let me know if you have any questions. Thanks in advance!
Dean
CSS Coding...
---------------------------------
/* Left Content Area */
.Left a { color: #000; }
.Left ul { margin: 0; padding: 0; z-index: 0; }
.Left li { clear: both; list-style: none; margin: 0; padding: 0; }
.Left li a { text-decoration: none; font-weight: bold; display: block; margin: 0; padding: 0; }
.Left #ProductHead { height: 34px; line-height: 34px; margin: 0 auto; padding: 0; }
.Left #ProductMenu { margin: 0; margin-bottom: 30px; padding: 0; }
.Left #ProductMenu li{ line-height: 26px; height: 26px; padding: 0; margin: 0; text-align: left; }
.Left #ProductMenu li a { padding: 0px 4px 0px 10px; text-align: left; margin: 0; }
.Left #ProductMenu ul ul { width: auto; position: relative; clear: left; top: -24px; left: 180px; visibility: hidden; text-align: left;
background-color: #fff; padding: 0; z-index: 1; }
.Left #ProductMenu li ul li { clear: both; text-align: left; line-height: 26px; width: 100%; margin: 0; padding: 0; }
.Left #ProductMenu li ul li a { padding: 1px 20px 1px 10px; font-size: 0.9em; text-align: left; margin: 0; width: 170px; height: auto; }
.Left #ProductMenu li:hover a, #ProductMenu li.over a{ text-decoration: underline; }
.Left #ProductMenu li ul li a, #ProductMenu li.over ul li a { text-decoration: none !important; }
.Left #ProductMenu li:hover ul, #ProductMenu li.over ul { visibility: visible; }
/* Holly Hack. IE Requirement \*/
* html #ProductMenu ul li { float: left; height: 1%; }
* html #ProductMenu ul li a { height: 1%; }
/* End */
-------------------------
HTML Coding...
-------------------------
<div class="Left" id="LayoutColumn1">
<div class="BlockHead" id="ProductHead">
<h6>Product Lines</h6></div>
<div class="BlockContent" id="ProductMenu">
<ul>
<li><a href="anti-fatigue-mats/index.php" title="Help protect your worker's feet with our industrial anti fatigue mats">Anti-Fatigue Mats</a>
<ul><li><a href="anti-fatigue-mats/anti-static-matting/index.php" title="Protect delicate electronic equipment with anti-static mats">Anti-Static Matting</a></li>
<li><a href="anti-fatigue-mats/dry-area-mats/index.php" title="Protect delicate electronic equipment with anti-static mats">Dry Area Mats</a></li>
<li><a href="anti-fatigue-mats/kitchen-food-service-mats/index.php" title="Protect delicate electronic equipment with anti-static mats">Kitchen & Food Service Mats</a></li>
<li><a href="anti-fatigue-mats/switchboard-matting/index.php" title="Protect delicate electronic equipment with anti-static mats">Switchboard Matting</a></li>
<li><a href="anti-fatigue-mats/welding-mats/index.php" title="Protect delicate electronic equipment with anti-static mats">Welding Mats</a></li>
<li class="LastChild"><a href="anti-fatigue-mats/wet-area-mats/index.php" title="Protect delicate electronic equipment with anti-static mats">Wet Area Mats</a></li></ul></li>
<li><a href="cow-livestock-mats/index.php" title="Livestock mats for cows and other farm animals">Cow & Livestock Mats</a></li>
<li><a href="entrance-mats/index.php" title="Our custom commercial entrance mats provide a personal touch to your facility">Entrance Mats</a></li>
<li><a href="runner-mats/index.php" title="Our rubber runner mat rolls protect your floors">Runner Mats</a></li>
<li><a href="garage-floor-mats/index.php" title="Our garage floor mats & flooring provide a safe clean environment to work off of">Garage Flooring</a></li>
<li><a href="rubber-gym-mats/index.php" title="Rubber gym mats help protect your floors from heavy weights">Gym & Weight Room Mats</a></li>
<li><a href="horse-stall-mats/index.php" title="Horse stall mats & flooring to protect your horses">Horse Stall Mats</a></li>
<li><a href="interlocking-mats/index.php" title="Interlocking mats are ideal for gyms with weight rooms">Interlocking Mats</a></li>
<li><a href="outdoor-rubber-mats/index.php" title="All purpose outdoor rubber floor mats for your facility">Outdoor Rubber Mats</a></li>
<li class="LastChild"><a href="rubber-floor-mats/index.php" title="General use, multipurpose rubber floor mats for your facility">Rubber Floor Mats</a></li>
</ul></div>
---------------------------------
The problem is definitely related to the existence of that floating sub-menu.
Put a sub-menu on any of the other products, and the bottom gap goes away for that product.
I'm calling it a bug in IE, and it will needed to be pared down to its simplest case to figure out where it is being introduced, and then figure a way to markup your page without encountering that bug.
that's all I have time for now, though. Best of luck to you...
Put a sub-menu on any of the other products, and the bottom gap goes away for that product.
I'm calling it a bug in IE, and it will needed to be pared down to its simplest case to figure out where it is being introduced, and then figure a way to markup your page without encountering that bug.
that's all I have time for now, though. Best of luck to you...
ASKER
Maybe it will be fine then... I will have a submenu on every section so I will give it a go tonight and keep you posted.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
I don't see the rendering issue when I hover. I'm using IE7.0 to look at it. It still looks great using Chrome, too.
I did notice that the master product list has text-decoration = underline when I hover, whereas the submenu does not.
- Brian Herbert Withun
I did notice that the master product list has text-decoration = underline when I hover, whereas the submenu does not.
- Brian Herbert Withun
Also, the bottom box is not a unique case when you realize that the problem is whitespace BELOW the boxes, not on TOP of them.
This renders perfectly using Chrome, but I see the phantom gap when using IE. I think you have stumbled upon a rendering error in IE.
I also notice that the first box, the one that renders properly, is the only box with a pop-up submenu. I am looking into whether that has anything to do with it.