Why is my text being cut off in IE7 and Firefox from left side ? it looks OK only if i add padding-left:1px? why it’s happening? I’ can’t give live link of site.
see problem in this screen-shot alt text http://easycaptures.com/fs/uploaded/458/3132736693.png
letter “W” being cut off from left side.
CSS code
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, em, font, img, ins, sub, sup, dl, dt, dd, ol, ul, li, fieldset, form, label, table, caption, tbody, tfoot, thead, tr, th, td
{
border:0 none;
font-size:100%;
margin:0;
padding:0;
vertical-align:baseline;}
body {font-family:Arial,Helvetica,sans-serif;
font-size:62.5%;
line-height:1.2;}
ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;}
.home-boxesContainer ul {
font-size:0.9em;
margin:auto;
overflow:hidden;
width:90%;}
.home-boxesContainer ul li {
background:transparent url(Images/dot-grey.gif) repeat-x scroll left bottom;
float:left;
line-height:16px;
margin:10px 0 0;
overflow:hidden;
padding-bottom:5px;
padding-right:10px;}
.home-boxesContainer ul li a {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(Images/arrow-green.gif) no-repeat scroll right center;
color:#6CB025;
padding-right:20px;
text-decoration:none
}
This is an issue with certain fonts on windows, specifically Verdana, from my experience. I spent about three days looking for float bugs and such to solve this, three years ago. It occurs mainly with the capital ‘w’ character, but can also be a problem with ‘v’ too, and only with cleartype disabled.
The best solution is to use
text-indent:1px;on your paragraphs, if you feel you need to implement a fix.