SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2004
    Location
    London, UK
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Container decreases width but content doesn't

    Hi please see:

    http://test.bkwsu.org/whoweare/history.htm

    Not everybody will have this issue. It seems its FF only problem.

    The backround white box (container) decreases width as it should but its contents don't. Please feel free to browse the website, as you will be able to tell this does not occur on all pages.

    I've attached a screenshot to show you what happens aswell.

    Thanks
    Attached Images Attached Images

  2. #2
    SitePoint Member
    Join Date
    Dec 2005
    Posts
    0
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Im in Firefox and it seems to work fine for me,

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    It seems ok in my firefox 1.5 also.

  4. #4
    SitePoint Enthusiast
    Join Date
    Nov 2004
    Location
    London, UK
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    mmm... not for me

    how about this page?:

    http://test.bkwsu.org/whoweare/feedback

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    That's fine for me also. What version browser are you using? I'm looking in firefox 1.5

  6. #6
    SitePoint Enthusiast
    Join Date
    Nov 2004
    Location
    London, UK
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    in FF 1.0.7, let me try 1.5

  7. #7
    SitePoint Enthusiast
    Join Date
    Nov 2004
    Location
    London, UK
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes looks fine in FF 1.5, but i'm concerned that it should work in in previous versions of FF.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Serves you right for using a table

    Try this:
    Code:
    #container #ieminwidthfix {
     border: 0;
     padding: 0;
     margin: 0;
     width: 100%;
     table-layout:fixed;
    }

  9. #9
    SitePoint Enthusiast
    Join Date
    Nov 2004
    Location
    London, UK
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thats great paul but if you now look in IE the spacer (with a width of 720) i put into the table does not seem to stop the width at 720.

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If its affecting ie then hide it from ie.

    e.g.
    Code:
    #container #ieminwidthfix {
     table-layout:auto;
    }
    Alternatively use a min-width expression instead of that whole table structure and avoid using an image as a spacer (see faq on min-width).

  11. #11
    SitePoint Enthusiast
    Join Date
    Nov 2004
    Location
    London, UK
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    therefore it would be 'auto' for IE and 'fixed' for FF?

    How would I do that?

    Also I have used the min-width, but unfortunatley IE doesn't support it, and the Javascript hack causes the browser to crash.

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Use the star selector to give ie the style only.
    Code:
    * html #container #ieminwidthfix {
     table-layout:auto;
    }
    Or alternatively use conditional comments so that you can target ie7 also (if it needs it (see below)).

    Also I have used the min-width, but unfortunatley IE doesn't support it, and the Javascript hack causes the browser to crash
    If the browser is crashing then you are using the incorrect expression. See the faq on min-width as it shows a method suitable for quirks or standards mode.

    Something like this should work.
    Code:
    <!--[if gte IE 5]><style type="text/css">
    #container #ieminwidthfix  {width:expression( documentElement.clientWidth < 720 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 720 ? "720" : "auto") : "720px") : "auto" );}
     
    </style><![endif]-->


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
  •