Has anybody seen this happen before? Just appear in IE8, other browsers work fine. I don't know why it's doing it.


My CSS is pretty straightforward, there's no hack or anything.

  • can we see some code? Showing the HTML and CSS you're using, or linking to a live page would allow more thorough debugging :) danwellman over 9 years ago
  • are there any comments within the li? Have you validated the code? Divya Manian over 9 years ago
  • Sorry guys, I was out of town the past few days, will post some HTML and CSS tomorrow when I'm back to the office. This is an internal app, I can't show the link. Thanks for the help! Cuong Dang over 9 years ago
  • I validated the CSS and it shows a warning for XHTML floated elements must have a defined width, other than that, it's solid :-) Cuong Dang over 9 years ago

3 answers


IE 8 still have some problem in rendering, if IE 7 doesn't have same problem like in IE 8. There's solution by including this

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

inside your <head> tag, any browser will ignore that meta tag except IE 8. Hope works. :)

Answered over 9 years ago by Dityo Nurasto

Here are some markup and CSS:

            <ul class="ee-action-btns">
                <li class="primary-btn"><a href="" title="Add New" class="add-new">Add New</a></li>
                <li class="primary-btn"><a href="" title="Save all answers" class="save-all">Save All</a></li>
                <li class="secondary-btn"><a href="" title="Back" class="back">Back</a></li>

ul.ee-action-btns{clear:both;padding:10px 15px 15px 110px;list-style:none;margin:0;}
    ul.ee-action-btns li{padding:0;list-style:none;margin:0;}

    ul.ee-action-btns li.primary-btn{background: url(images/btn-bg.gif) repeat-x bottom;border:1px #f17b4d solid;padding:3px 15px;display:block;float:left;}
    ul.ee-action-btns li.primary-btn:hover{text-decoration:none;background: url(images/btn-bg-on.gif) repeat-x bottom;}

        ul.ee-action-btns li.primary-btn a{color:#df3f00;font-weight:bold;font-size:16px;text-shadow:1px 1px 1px #fff;}
        ul.ee-action-btns li.primary-btn a:hover{text-decoration:none;}

        ul.ee-action-btns li.secondary-btn a{line-height:34px;padding-left:10px;color:#9e7261;font-weight:bold;font-size:16px;text-decoration:underline;}
        ul.ee-action-btns li.secondary-btn a:hover{color:#000;text-decoration:none;}
Answered over 9 years ago by Cuong Dang
  • Anybody has an idea about this? Cuong Dang over 9 years ago
Aaron 45

It is an obviously compatibility issue in IE8, way too much to go for IE. Just ignore it.

Answered over 9 years ago by Aaron