views:

36

answers:

1

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;
}
A: 

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.

jdigital
That's by purpose,make `a` `float:right` and `li`(the wrapper) `float:left`,why this doesn't work in IE7?
libnet
I don't have a real answer, other than to say that IE7 does things differently. FWIW, I tried this in an ancient version of Mozilla and it exhibits the same problem. The `float:left` solution does seem to fix the problem in IE7 so you might want to give it a try.
jdigital
Thanks,a better try may be delete the `float` setting on `a`,though:)
libnet
Sure, that might work too. BTW, if this information was helpful, feel free to mark this as answered. Thanks...
jdigital