SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    May 2011
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question 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

  2. #2
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    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??

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,784
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi Welcome to Sitepoint

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

    Code:
     .MainMenu{
            float:  left;
            display:  inline;
            width:  160px;
            margin:  0;
             padding: 1em 20px;
            overflow:  auto;
         /* width:  100%;*/
        }
    
        .MainPage{
        /*float:  left;*/
            /*display: inline;*/
            margin:  0;
             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).


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •