Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.
- Friends
Browser Specific Problems: (Need help) IE7 keeps adding extra space below drop-down menu
Bottom of Page1 to 3 of 3
-
Hello everyone this is my first post and here is my encounter with amazingly confusing ie7 bug that makes my dropdown menu framework shifts upwards by a few pixel. Here is the screenshot of my site in most-browsers (all looking great):
Here is how it looks in IE7 (notice the menu shifts up abit except the second item):
I'm using LWIS.NET's dropdown menu framework (link)
I have investigated this using firebug in IE. It turns out that IE7 always adds extra blank text space between the (/a) and (/li) tag in the menu. WHen i deleted this blank space text, the menu goes normal. But how do i stop IE7 from adding the space?
Do you guys know any workaround to this? ANy help is much appreciated.
Thanks. -
This is the structure of the dropwdown menu:
<div id="menu">
<ul class="dropdown">
<li class="active"><a href="/index.php?id=61&phpMyAdmin=4594f30712f4fabaff6997416810f3f2" title="Home">HOME</a></li>
<li class=""><a href="/index.php?id=67&phpMyAdmin=4594f30712f4fabaff6997416810f3f2" title="About Jeuno">ABOUT JEUNO</a>
<ul><li><a href="/index.php?id=67&phpMyAdmin=4594f30712f4fabaff6997416810f3f2" title="The Ingredients">The Ingredients</a></li>
<li><a href="/index.php?id=68&phpMyAdmin=4594f30712f4fabaff6997416810f3f2" title="Benefits">Benefits</a></li>
<li><a href="/index.php?id=69&phpMyAdmin=4594f30712f4fabaff6997416810f3f2" title="Direction of use">Direction of use</a></li>
<li><a href="/index.php?id=70&phpMyAdmin=4594f30712f4fabaff6997416810f3f2" title="Miracles of Jeuno">Miracles of Jeuno</a></li>
<li><a href="/index.php?id=71&phpMyAdmin=4594f30712f4fabaff6997416810f3f2" title="Share Your Story">Share Your Story</a></li>
<li><a href="/index.php?id=72&phpMyAdmin=4594f30712f4fabaff6997416810f3f2" title="Product Certification">Product Certification</a></li>
<li class="last"><a href="/index.php?id=75&phpMyAdmin=4594f30712f4fabaff6997416810f3f2" title="Ask our consultant">Ask our consultant</a></li>
<div class="submenuShadow"></div></ul>
</li>
<li><a href="/index.php?id=62&phpMyAdmin=4594f30712f4fabaff6997416810f3f2" title="Business Opportunity">BUSINESS OPPORTUNITY</a></li>
<li><a href="/index.php?id=64&phpMyAdmin=4594f30712f4fabaff6997416810f3f2" title="Jeuno Cares">JEUNO CARES</a></li>
<li><a href="/index.php?id=65&phpMyAdmin=4594f30712f4fabaff6997416810f3f2" title="Contact Us">CONTACT US</a></li>
<li class="last"><a href="/index.php?id=66&phpMyAdmin=4594f30712f4fabaff6997416810f3f2" title="FAQ">FAQ</a></li>
</ul>
<div class="clear"></div>
</div>
And this is the css:
/* css dropdown menu framework */
ul.dropdown,
ul.dropdown li,
ul.dropdown ul {list-style:none;margin:0;padding:0;text-align:left;}
ul.dropdown {position:relative;z-index:597;left:163px;}
ul.dropdown li {float:left;vertical-align:middle;zoom:1;}
ul.dropdown li.hover,
ul.dropdown li:hover {position:relative;z-index:599;cursor:default;}
ul.dropdown ul {background:url(http://www.jeunonesia.com/real/dropdownbg.png) repeat left top;visibility:hidden;position:absolute;top:21px;left:-1px;z-index:598;width:100%;}
ul.dropdown ul li {float:none;}
ul.dropdown ul ul {top:-10px;left:100%;}
ul.dropdown li:hover > ul {visibility:visible;}
ul.dropdown li {}
ul.dropdown li:hover {}
ul.dropdown li ul {z-index:598;border:solid 1px #dfdcc9;padding-top:10px;}
ul.dropdown li ul li {}
ul.dropdown li ul li {font:11px verdana;font-weight:normal;}
ul.dropdown li ul li.last {background:url(http://www.jeunonesia.com/real/dropdownwedge.png) no-repeat left bottom;padding:0 0 15px 0;}
ul.dropdown li ul li:hover,
ul.dropdown li ul li.last:hover {}
ul.dropdown li a:link,
ul.dropdown li a:visited {font-size:11px;color:#afa431;text-decoration:none;line-height:27px;padding:5px 15px 7px 15px;background:url(bg.jpg) no-repeat left top;}
ul.dropdown li a:hover, ul.dropdown li.active a {color:white;background-position:0px -27px;}
ul.dropdown li a:active {}
ul.dropdown li.childrenHovered a {color:white;background-position:0px -27px;}
ul.dropdown li.childrenHovered ul li a {color:#afa431;background:none;}
ul.dropdown li ul li a:link,
ul.dropdown li ul li a:visited {font-size:10px;color:#afa431;text-decoration:none;line-height:13px;display:block;padding:4px 5px 4px 15px;background-position:0px 100px;}
ul.dropdown li ul li a:hover {color:#fff;background:#82c9e5;}
ul.dropdown li ul li a:active {}
ul.dropdown ul {width:155px;margin-top:6px;z-index:598;}
ul.dropdown ul li {font-weight: normal;}
ul.dropdown *.dir {}
ul.dropdown-horizontal ul *.dir {} -
ok i already got this to work. It's actually the vertical-align property on the menu that was causing this. Thanks
1 to 3 of 3