Link to home
Start Free TrialLog in
Avatar of challenged
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
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 &amp; 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 &amp; 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 &amp; 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 &amp; Weight Room Mats</a></li>
<li><a href="horse-stall-mats/index.php" title="Horse stall mats &amp; 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>
---------------------------------

Open in new window

Avatar of Brian Withun
Brian Withun
Flag of United States of America image

The problem seems to be that the 1st box renders correctly, and EVERY OTHER box renders with whitespace at the bottom of it, just outside the border.  You had stated that the first two boxes are ok, when in fact they are not.

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.
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...
Avatar of challenged
challenged

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
Avatar of challenged
challenged

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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