So, I'm making this context menus, which looks great in all major browsers, even IE plays nice, right down until IE7.
I don't know why it has that weird spacing and was hoping someone could enlighten me.
CSS
/* CSS Document */
*{
zoom: 1;
}
.context-menu-container{
border: 1px solid #828790;
padding: 2px;
width: 100px;
background-color: #f1f1f1;
font-family: 'MS Sans Serif', Geneva, sans-serif;
font-size: 12px;
position: relative;
margin-left: 5px;
margin-top: 5px;
}
.context-menu{
list-style-type: none;
padding: 0px;
margin: 0px;
display: block;
position: relative;
}
.context-menu li{
position: relative;
height: 20px;
border: 1px solid transparent;
border-radius: 2px;
margin: 0px;
}
.context-menu li.separator{
height: 2px;
border: 0;
background: url(http://img843.imageshack.us/img843/2599/horizontalseparator.png) repeat-x center;
padding: 2px;
margin-left: 26px;
}
.context-menu li.separator:hover{
border: 0;
background: url(http://img843.imageshack.us/img843/2599/horizontalseparator.png) repeat-x center;
}
.context-menu li:hover{
border: 1px solid #afd0f7;
background: url(http://img860.imageshack.us/img860/3511/contextmenuhover.png) repeat-x;
}
.context-menu li.disabled, .context-menu li.disabled a{
color: #8b8b8b;
}
.context-menu li.disabled:hover{
border: 1px solid #d5d4d4;
background: url(http://img823.imageshack.us/img823/31/contextmenudisabled.png) repeat-x;
}
.context-menu li a{
line-height: 20px;
height: 20px;
text-decoration: none;
color: black;
display: block;
cursor: default;
padding-left: 30px;
position: relative;
}
.context-menu a.delete{
background: url(http://img268.imageshack.us/img268/9831/deleteqb.png) no-repeat 2px center;
}
.context-menu .vertical-separator{
width: 2px;
height: 100%;
position: absolute;
left: 25px;
background: url(http://img836.imageshack.us/img836/6873/verticalseparator.png) repeat-y;
margin: 0px;
padding: 0px;
margin-bottom: 10px;
}
.context-menu div.label{
margin-left: 25px;
padding-left: 5px;
float:left;
}
HTML
<div class='context-menu-container'>
<ul class='context-menu'>
<div class='vertical-separator'></div>
<li><a class='delete' href="#">Action</a></li>
<li class='separator'></li>
<li class='disabled'><a href="#">Action</a></li>
<li><a href="#">Action</a></li>
<li><a href="#">Action</a></li>
</ul>
</div>
You need this, unsurprisingly because of an IE7 bug:
.context-menu li.separator {
font-size: 0;
line-height: 0;
}
http://jsfiddle.net/thirtydot/XLRWT/17/
Also, having a <div>
as a child of a <ul>
is invalid HTML. It may work in browsers, but it's still invalid .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.