Question

The Preview, What others are saying tabs are stacked and right-aligned (wrong).

They should be horizontal and left-aligned.

It’s displayed correctly in firefox,IE8.

What’s the reason for this?

URL: http://www.learncentral.org/resource/view/59896

UPDATE

Related html here:

<div class="ed_tabs">
      <ul class="ui-tabs-nav">
        <li class="selected ui-tabs-selected"><a href="#first">Preview</a></li>
        <li><a href="#second">What others are saying...(0)</a></li>
      </ul>
    </div>

css:

.ed_tabs {
border-bottom:3px solid #3F79C2;
float:left;
width:100%;
}

.ed_tabs ul {
float:left;
list-style:none outside none;
margin:0.5em 0 0;
padding:0 0 0 1em;
}

li  {
float:left;
padding:0 1px 0 0;
}

Answer 1

Not sure why IE7 is working differently, but I see that your CSS rule for

.ed_tabs ul li a

does a float:right to the anchor (A). Try changing this to float: left instead.