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 8 of 8
  1. #1
    New Coder
    Join Date
    Jul 2007
    Location
    Colorado, USA
    Posts
    19
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question sidebar ends up in middle of page in IE, when horizontal scroll comes in to play

    http://www.bcsfanpoll.com/userpoll.p...=MECU&submit=1

    In Firefox, the left sidebar still renders on the left of the page, like it should and does for every other page (even in IE).

    But in lovely IE 6 (haven't tried others), the left sidebar ends up in the middle of the page. My thought is since I'm using a -100% margin-left and since the content overflows the page and causes horizontal scrolling, IE subtracts the page width from the ends that has been extended which is why it ends up in the middle of the page.

    How can I get IE to force it back to the left? In essence, ignore the scrolling?

  • #2
    New Coder
    Join Date
    Jul 2007
    Location
    Colorado, USA
    Posts
    19
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Works okay in IE7.

  • #3
    New Coder
    Join Date
    Jul 2007
    Location
    Colorado, USA
    Posts
    19
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I tested 18 browsers in 3 OSs and only IE5.5 and IE6 were broken. Both on Windows.

    FYI, I used http://browsershots.org/

  • #4
    New Coder
    Join Date
    Jul 2007
    Location
    Colorado, USA
    Posts
    19
    Thanks
    2
    Thanked 0 Times in 0 Posts
    It appears to not be browser related, since in Firefox, when I shrink the browser window small enough (roughly lower than 900px wide) the left sidebar starts moving towards the center of the page. This is only a minor concern, since most users are using resolutions larger than this, but it more often than not occurs with software taking browser thumbnails of the site:



    That orange/peach block in the middle should actually be off to the left, where the white space is. The more you shrink the window horizontally, the further to the right the bar moves, even moving off to the left of the page.

    Everything works fine when the window is large enough.

    Anyone have any ideas?
    Last edited by MECU; 09-24-2008 at 10:16 PM.

  • #5
    New to the CF scene
    Join Date
    Sep 2008
    Location
    WI
    Posts
    9
    Thanks
    0
    Thanked 1 Time in 1 Post
    A few things to try, either one by one or both at once:

    1 - Try moving the HTML of the sidebar up above the stats table. I know sometimes things read left to right, so with the sidebar being below the table, it may be trying to move to the right of the table.

    2 - I don't see a float tag for the sidebar, try floating the entire sidebar to the left.

  • Users who have thanked Kitsune for this post:

    MECU (09-25-2008)

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Check http://bonrouge.com/2c-hf-fluid.php to see how to apply floats and margins to make a good 2-column layout.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    MECU (09-25-2008)

  • #7
    New Coder
    Join Date
    Jul 2007
    Location
    Colorado, USA
    Posts
    19
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I did have the sidebar floating. I think the problem was the negative margin I was using to play it on the left. So I changed it to absolute position, since I always want it on the left and can easily calculate that position (zero!), it makes sense. Seems to work and it doesn't move around.

    Code:
    div#wrapper{float:left;width:100%;min-width:900px}
    div#sidebar{float:left;width:200px;margin-left:-100#;background-color:#FFDFBF}
    div#extra{float:left;width:150px;margin-left:-152px;background-color:#FFDFBF}
    Code:
    div#wrapper{float:left;width:100%;min-width:900px}
    div#sidebar{float:left;width:200px;position:absolute;margin-left:0;background-color:#FFDFBF}
    div#extra{float:left;width:150px;margin-left:-152px;background-color:#FFDFBF}
    Thanks to both of you for trying to help.

  • #8
    New to the CF scene
    Join Date
    Sep 2008
    Location
    WI
    Posts
    9
    Thanks
    0
    Thanked 1 Time in 1 Post
    Glad you got yours working! Now if only I can get mine to work!


  •  

    Posting Permissions

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