SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    width 100% and horizontal scrolling

    maybe i'm overlooking something, but...i've just created http://dev.salford.ac.uk (the first step towards prototyping a fully xhtml 1 transitional compliant site). at this stage it still contains some kludged table header, but contained inside a div.
    now, if i resize my browser window so that the table is bigger than the width of the browser, and i scroll horizontally, the green background of the header does not extend into the "scrolled" area. how could this be fixed in a compliant enough way ?
    hope this explanation made sense...just try it out and you'll see what i mean. i'm still new-ish to xhtml+css, so it's probable that i've made some conceptual mistake in the structure of the page...
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  2. #2
    SitePoint Wizard
    Join Date
    Mar 2002
    Location
    Bristol, UK
    Posts
    2,240
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Redux,

    It's working for me fine... I've tried changing the size of the window to a variety of sizes and the green always stays in the right place as is expected.

    Maybe a glitch in your browser

    -Sam
    Sam Hastings

  3. #3
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    did you try scrolling horizontally ?
    it's failing under phoenix 0.5, opera6 and IE5.5SP2 on my machine...
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  4. #4
    SitePoint Wizard
    Join Date
    Mar 2002
    Location
    Bristol, UK
    Posts
    2,240
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yup... I resized the window and scrolled vertically as far as I could -- the green stayed there all along.

    Strange if it's working in all of those browsers, I'll fire up Netscape and see if it works there

    -Sam
    Sam Hastings

  5. #5
    SitePoint Wizard
    Join Date
    Mar 2002
    Location
    Bristol, UK
    Posts
    2,240
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah yes, it's happening in Netscape 6.2.

    In Internet Explorer 6.0.2 it's working fine.

    No idea what the problem could be though, sorry!

    -Sam
    Sam Hastings

  6. #6
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by Devilware.net
    Yup... I resized the window and scrolled vertically as far as I could --
    have a look at this screeshot [URL removed, as problem now solved] to see what i mean. horizontal scrolling causes this...
    Last edited by redux; May 19, 2003 at 00:12.
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  7. #7
    SitePoint Wizard
    Join Date
    Mar 2002
    Location
    Bristol, UK
    Posts
    2,240
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, read my post below that

    For the record, it does exactly that in Netscape 6.2, and doesn't do it in IE6.

    -Sam
    Sam Hastings

  8. #8
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well, i couldn't really find an adequate solution to the problem above. the header div's content overflows the box, and i can't force the div to expand enough to cater for that...hmmm
    stuck an overflow: hidden in the header div's style as a workaround to at least hide the flaw, but i'd be interested to hear any possible solutions (apart from assigning the background colour to the table contained within the div, as i plan on phasing that one out in favour of a table-less version at some point, which would mean the same problem all over again)
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  9. #9
    killall -9 lusers
    Join Date
    Oct 2002
    Location
    Cincinnati, Ohio, USA
    Posts
    390
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, I'm not sure if this would be considered a browser bug or just an inconsistency between the XHTML spec and the CSS spec, but I can tell you what's causing the problem.

    In your CSS, you specify the width of the div with the id of 'header' as 100%, and this is also where you specify the background color. This div will be rendered as 100% of the width of your browser window, so that's as far as the background will go.

    You then specify the table width with the traditional 'width' property in the tag.

    See what happens if you give the table an id, say 'HeaderTable' and then specify the width and background color as part of the CSS for that id. That should at least cause the background color to be behind the table no matter how wide the div ends up being.

  10. #10
    SitePoint Addict Knightime's Avatar
    Join Date
    Jan 2003
    Location
    USA
    Posts
    376
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Redux, can you send a link again so I can look at the source. There a couple of possibilities to look into that might help. I need to see the code though please. I couldn't get the page to load when I tried a couple minutes ago.

  11. #11
    SitePoint Wizard dragonfly_7456's Avatar
    Join Date
    Dec 2002
    Location
    Moscow, USSR
    Posts
    1,092
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Me neither
    Content Writing Service - Get custom SEO articles for 10$


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
  •