I've racked my brain trying to figure out why the indentation of <li>'s on a new site are not equal. You can see the snapshot attached and a copy of the <li> replacement image. It's screwed up in FF and IE. There must be something somewhere else my stylesheet that's causing the problem. Does anyone know the css to force the indentation to a fixed amount? I'm hoping that I can override whatever is causing the problem. Here's my code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <style type="text/css"> <!-- .col-box-header { text-align:center; background:#F98004; border:1px #F98004 solid; width:145px;padding:5px 0 5px; color:#FFFFFF;font-size:12px} .col-box {border-top:1px #c4c7c9 solid;border-left:1px #c4c7c9 solid;border-right:1px #c4c7c9 solid; border-bottom:1px #c4c7c9 solid;width:145px; margin-bottom:20px;font-size:11px} .col-box ul {margin:5px 0 10px 1.5em; padding:0; line-height:1.5em} .col-box li {list-style-image:url(../img/arrow_right.gif); text-align:left} .col-box a:visited {list-style-image:url(../img/arrow_right.gif); text-align:left} --> </style> </head> <body> <div class="col-box-header">Boat Categories</div> <div class="col-box"> <ul> <li><a href="http://center.console.boats-c2/">Center Console Boats</a></li> <li><a href="http://dual.console.boats-c4/">Dual Console Boats</a></li> <li><a href="http://inshore.boats-c1/">Inshore Boats</a></li> <li><a href="http://walkarounds.cuddy.cabins.boats-c3/">Walkarounds & Cuddy Cabins</a></li> <li><a href="http://boat.accessories-c6/">Boat Accessories & Parts</a></li> <li><a href="http://boat.motors-c7/">Boat Motors & Parts</a></li> <li><a href="http://marine.electronics-c5/">Marine Electronics</a></li> </ul> </div> </body> </html> Code (markup):
Very strange. It loads fine for me in both IE and FF. I copied the code and the arrow on to a test site. It looks like you just cut and pasted the relevant sections on your page/css here (based on the screenshot you provided). Do you have a URL you can show us of the full page?
Same result for me as hex. If there was a way to override the spacing (which I can't think of one) I don't think it would fix your problem anyways. A URL to the page with this problem would be great.
Actually, check the css you have setup for visited and unvisited links. After looking at your screenshot again it looks like those 3 links with indent problems are either visited or unvisited.
I thought the visited/notvisited was it. . . I changed it below. . . and it still renders wrong. . . .col-box-header { text-align:center; background:#F98004; border:1px #F98004 solid; width:145px;padding:5px 0 5px; color:#FFFFFF} .col-box {border-top:1px #c4c7c9 solid;border-left:1px #c4c7c9 solid;border-right:1px #c4c7c9 solid; border-bottom:1px #c4c7c9 solid;width:145px; margin-bottom:20px;} .col-box ul {margin:5px 0 10px 1.5em; padding:0; line-height:1.5em} .col-box li {list-style-image:url(../img/arrow_right.gif); text-align:left} .col-box a:visited {color:#057} .col-box a {color:#057} Code (markup):
Hex PM'd me the solution Adding padding:0 to the col-box a. Thanks all for the help! -jay .col-box-header { text-align:center; background:#F98004; border:1px #F98004 solid; width:145px;padding:5px 0 5px; color:#FFFFFF} .col-box {border-top:1px #c4c7c9 solid;border-left:1px #c4c7c9 solid;border-right:1px #c4c7c9 solid; border-bottom:1px #c4c7c9 solid;width:145px; margin-bottom:20px;} .col-box ul {margin:5px 0 10px 1.5em; padding:0; line-height:1.5em} .col-box li {list-style-image:url(../img/arrow_right.gif); text-align:left} .col-box a:visited {color:#057; padding:0} .col-box a {color:#057; padding:0} Code (markup):