Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Jul 2002
    Location
    Raleigh, NC
    Posts
    484
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Absolute positioning & overflow:auto

    I'm working on a UI and I have come across two issues I cannot seem to figure out.

    The first involves the use of overflow:auto. Within the link below the bottom section with the tabs is broken up into two separate tables - yes tables. It is tabular data so it is ok! Anyway I need the heading to be absolutely positioned and the data itself to fit inside the container and if needed have a scrollbar. I pretty much have it working except that I have to use a fixed pixel width for the tables. If I use a percentage, which is what I want, the columns within the two tables no longer line up because of the scrollbar and I often get a horizontal scrollbar. Any ideas how to effectively use percentage widths in this case to keep with the fluid layout?

    My second issue involves absolute positioning specifically with IE. If I specify top, left, bottom, and right pixels it works fine in FF. The height and width of the map div adjust according to the browser. In IE however I can seemingly only specify top or bottom and left or right. I do not want to specify a specific width or height but IE basically doesn't think there is any content in that div to stretch it. I really want the div to stay X pixels from any given side to it is dynamically sized. Any solutions to this that anyone knows about?

    http://www.webmarkart.com/digrec/proof.html
    -WebMark Art
    Programming is 80% thinking and 20% spelling

  • #2
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by webmarkart View Post
    Anyway I need the heading to be absolutely positioned and the data itself to fit inside the container and if needed have a scrollbar. I pretty much have it working except that I have to use a fixed pixel width for the tables. If I use a percentage, which is what I want, the columns within the two tables no longer line up because of the scrollbar and I often get a horizontal scrollbar. Any ideas how to effectively use percentage widths in this case to keep with the fluid layout?
    I cannot think of a pure CSS solution to this problem. JavaScript may be your best option.

    To begin with, you could let the heading be as wide as the data itself + the scrollbar. Then use JavaScript to get the width of the data (minus the scrollbar) and set the width of the heading accordingly. Altogether you will get an acceptable rendering when JavaScript is disabled and an enhanced rendering when enabled.

    Quote Originally Posted by webmarkart View Post
    In IE however I can seemingly only specify top or bottom and left or right.
    I guess that you are referring to IE6 because in this browser you cannot simultaneously specify values for opposite offsets. More precisely, if you simultaneously specify a top and bottom offset, then bottom is ignored. Similarly, if you simultaneously specify a left and right offset, then right is ignored in the ltr-direction and vice versa.

    Note that this issue has been resolved in IE7.

    I'm not sure that I understand what you are trying to do, but again, JavaScript may be the solution.


  •  

    Posting Permissions

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