IE6 (sigh I know) and CSS alignment issue with jQuery UI

Hi,

at the moment our clients internal network is entirely IE6 based. This won’t change for a year or so.

I’m trying to create an interface using jQuery UI.

My effort so far: Edit this Fiddle - jsFiddle - Online Editor for the Web (JavaScript, MooTools, jQuery, Prototype, YUI, Glow and Dojo, HTML, CSS)

(N.B. this looks weird in firefox, but in IE6 it looks kind how I want it to, with the exceptions listed below)

It has two tabs, the first of which I want to have a List on one side like a top level menu, and a div for main page content. Both the “main menu” and “main page content” should align properly.

My Questions:

How do I get this to align properly, with the “Main menu” and “page content” divs with the same vertical alignment?

How can I have it so the line on the “page content” div sits between the it and “main menu”, running from top to bottom of the tab?

Thank you in advance

I totally can’t “see” what you’re trying to do. Not sure what you mean by align. There is no content in the example you posted, so I can’t see what the nothing is supposed to do or where it’s supposed to go.

I see two tabs and they look lined up to me??

Hi Welcome to Sitepoint :slight_smile:

That jsfiddle is really awkward to work with but it seems that you have these two rules incorrect.


 .MainMenu{
        float:  left;
        display:  inline;
        width:  160px;
        margin:  0;
         padding: 1em 20px;
        overflow:  auto;
     [B]/* width:  100%;*/[/B]
    }

    .MainPage{
    [B]/*float:  left;*/
        /*display: inline;*/
        margin:  0;[/B]
         margin-left: 200px;
        border-left:  1px  solid gray;
        padding:  1em;
        position:relative;
    }

Firstly you gave a width of 100% to the first float so nothing can possibly rise up next to it.

Secondly you added a margin-left:200px on the content but then you floated it which means it will eventually stretch and be too wide anyway.

If the tab container is a fixed with then float both the elements with the correct width for a more reliable display. Then make sure the container of the floats contains the floated children with a clearing mechanism (overflow:hidden or the clearfix method).