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

Popular posts from this blog

linux - Does gcc have any options to add version info in ELF binary file? -

javascript - Clean way to programmatically use CSS transitions from JS? -

android - send complex objects as post php java -