Hello all, rather simplistic markup but with a problem in explorer, a gap appears between the list elements, I started from scratch and the gap only appears after I set the width?? on a basic list setup but I removed the list width setting and this didn't do it..
I read somewhere that the line height can affect such things, has anyone had this problem before??
Thanks
here is the style:
#menu {position:absolute ; left:1 ; top:240 ; font-size:10px ; width:219 ;}
#menu ul {list-style-type:none ; margin:0 ; padding:0 ; }
#menu li {list-style-type:none ; width:219px ;height:35px ; padding:0 ; margin:0;}
#menu a { text-decoration:none ; width:100% ;display:block ; color:#ffffff; text-align:center ; background:url(images/menuback.gif) no-repeat ;height:35px ;padding-top:10 ; margin:0 }
#menu a:hover { color:#363636 ;}
here's the html:
<div id=menu>
<ul><li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">menu item1</a></li><li><a href="#">menu item1</a></li><li><a href="#">menu item1</a></li><li><a href="#">menu item1</a></li><li><a href="#">menu item1</a></li></ul>
</div>Many, many times. And the fix is relatively easy. First: The cause.
IE-Win will display the line breaks in your code between the </li> end tag and the next <li> beginning tag. And by line breaks I don't mean the <br /> tag, rather I mean literally a
line break. Hitting enter on the keyboard. This is quite obviously a bug in IE-Win. This bug is triggered by placing a block-level <a> tag inside an ordered or unordered list. I've found two fixes, one requiring MUCH less CSS.
1) The efficient method: Add display: inline; to the style rules for the LI tags inside your menu. The problem here is that many browsers may display tiny gaps between your menu items. Most times only one pixel.
2) The less efficient but better rendering method: Apply the following code below.
/* Hack to make menu display properly in IE-Win. Hide from IE5-Mac: \*/
* html #menu li {
float: left;
width: 100%;
}
/* End IE5-Mac hiding */
If that doesn't work, try floating the UL tag left and giving it a width too. Be sure to use the Holly Hack inside the IE5-Mac backslash hack.
Floating the LI tags in this case shouldn't hurt anything because IE-Win (incorrectly) encases floated elements within non-floated elements. The UL tag will stretch to encompass the floated LI tags, even though the W3C CSS spec says it shouldn't.thanks dude, the first one makes netscape go mad so that isn't successful but the second did the trick..
thanks again..Hey wow, that's magic!
That fixed my problem here (<!-- m --><a class="postlink" href="http://webdeveloper.com/forum/showthread.php?s=&threadid=53833">http://webdeveloper.com/forum/showthrea ... adid=53833</a><!-- m -->)!
The only problem is that my list-style-type's dont display now in IE. See for yourself. It's the right-hand menu: Project HOPE (<!-- m --><a class="postlink" href="http://project-hope.us">http://project-hope.us</a><!-- m -->)
Any more hacks for that?
I read somewhere that the line height can affect such things, has anyone had this problem before??
Thanks
here is the style:
#menu {position:absolute ; left:1 ; top:240 ; font-size:10px ; width:219 ;}
#menu ul {list-style-type:none ; margin:0 ; padding:0 ; }
#menu li {list-style-type:none ; width:219px ;height:35px ; padding:0 ; margin:0;}
#menu a { text-decoration:none ; width:100% ;display:block ; color:#ffffff; text-align:center ; background:url(images/menuback.gif) no-repeat ;height:35px ;padding-top:10 ; margin:0 }
#menu a:hover { color:#363636 ;}
here's the html:
<div id=menu>
<ul><li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">menu item1</a></li><li><a href="#">menu item1</a></li><li><a href="#">menu item1</a></li><li><a href="#">menu item1</a></li><li><a href="#">menu item1</a></li></ul>
</div>Many, many times. And the fix is relatively easy. First: The cause.
IE-Win will display the line breaks in your code between the </li> end tag and the next <li> beginning tag. And by line breaks I don't mean the <br /> tag, rather I mean literally a
line break. Hitting enter on the keyboard. This is quite obviously a bug in IE-Win. This bug is triggered by placing a block-level <a> tag inside an ordered or unordered list. I've found two fixes, one requiring MUCH less CSS.
1) The efficient method: Add display: inline; to the style rules for the LI tags inside your menu. The problem here is that many browsers may display tiny gaps between your menu items. Most times only one pixel.
2) The less efficient but better rendering method: Apply the following code below.
/* Hack to make menu display properly in IE-Win. Hide from IE5-Mac: \*/
* html #menu li {
float: left;
width: 100%;
}
/* End IE5-Mac hiding */
If that doesn't work, try floating the UL tag left and giving it a width too. Be sure to use the Holly Hack inside the IE5-Mac backslash hack.
Floating the LI tags in this case shouldn't hurt anything because IE-Win (incorrectly) encases floated elements within non-floated elements. The UL tag will stretch to encompass the floated LI tags, even though the W3C CSS spec says it shouldn't.thanks dude, the first one makes netscape go mad so that isn't successful but the second did the trick..
thanks again..Hey wow, that's magic!
That fixed my problem here (<!-- m --><a class="postlink" href="http://webdeveloper.com/forum/showthread.php?s=&threadid=53833">http://webdeveloper.com/forum/showthrea ... adid=53833</a><!-- m -->)!
The only problem is that my list-style-type's dont display now in IE. See for yourself. It's the right-hand menu: Project HOPE (<!-- m --><a class="postlink" href="http://project-hope.us">http://project-hope.us</a><!-- m -->)
Any more hacks for that?