CODEWITHSUNDEEP
cssxhtml
Jitendra Vyas
Jitendra Vyas

Reputation: 152637

Why is my text being cut off in IE7 and firefox from left side?

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
}

Upvotes: 1

Views: 2580

Answers (3)

beseku
beseku

Reputation: 915

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.

Upvotes: 2

Sarfraz
Sarfraz

Reputation: 382686

I suspect there can be three reasons:

  1. The container of your menu is pushed there to left making text that way
  2. It may be font issue too (this happens sometimes due to fonts)
  3. Try adding line-height to your list.

Upvotes: 0

YOU
YOU

Reputation: 123801

I can't see well on your screenshot, but I think its the font issue, try with different font.

Upvotes: 1

Related Questions