css - an inside numbered list-style causing layout issue when content is block in non-WebKit browsers -
i have design on blog uses following css number list:
list-style: decimal inside none;
inside each <li>
element anchor tag displayed block. in webkit browsers works fine. in firefox, ie, , opera display of inner block anchor pushed down width of list-style. i've tried play padding, margins, , text-indent fix it, i'm having no luck. can't style them outside, because want change left border color of li selected element. position anchor tag absolute , position right, feel there simple fix here missing.
anybody have solution fixing css work in non-webkit browsers?
here site, see menu on right: http://mattsnider.com/styleguide/html/
all css applied li:
.menu .menu-item:first-child { border-top: 0 none; } .menu-numbered .menu-item { list-style: decimal inside none; } .menu-item { border-bottom: 1px solid #eeeeee; border-top: 1px solid #ffffff; }
all css applied anchor:
.menu-item.selected { border-left-color: black; } .menu-item { border-left: 2px solid #fafafb; display: block; margin-top: -1em; padding: 8px 10px 8px 8px; text-shadow: 0 1px 0 #ffffff; } .l_aside { color: #3d49ff; } { opacity: 0.9; }
that's 13 year old bug...nice find! noted: https://developer.mozilla.org/en-us/docs/css/list-style-position documentation: https://bugzilla.mozilla.org/show_bug.cgi?id=36854
you have options here....you set anchor display:inline-block
, fiddle text-align
, , text-indent
, while swapping selected border list element. hard tell entirely, options work me in firefox.
Comments
Post a Comment