开发者

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

开发者 https://www.devze.com 2022-12-14 15:41 出处:网络
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.

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.


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


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.
0

精彩评论

暂无评论...
验证码 换一张
取 消