SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Member
    Join Date
    Dec 2003
    Location
    Macomb, MI
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy Disappointed with Tableless CSS

    I like what I have been reading about tableless CSS, but I can't seem to get it to do what I want.

    All I want is a fluid header/3-column layout (much like what sitepoint has) with a minimum width!

    For example, go to the sitepoint homepage and resize your browser to a size like 200x200. Everything gets scrunched together and it looks like crap.

    I want to be able to set a minimum width, such as 500 pixels for example, such that if the browser is resized to a width less than 500 pixels wide, then the user would have to scroll to the right to see the remaining content. I can easily do this with tables. But how do you do it with CSS? I can't find an example anywhere!

    -jim

  2. #2
    SitePoint Author silver trophybronze trophy
    wwb_99's Avatar
    Join Date
    May 2003
    Location
    Washington, DC
    Posts
    10,633
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    500px wide header image?

    WWB

  3. #3
    SitePoint Member
    Join Date
    Dec 2003
    Location
    Macomb, MI
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm, not exactly.

    Take the sitepoint homepage for example. Change the width in the logo image to 800, for example, and you will notice the horizontal scrollbar appears, however as you shrink your browser size the rest of the content continues to shrink as well. If it were a table, the rest of the content would remain fixed at the 800 pixel mark, and you'd have to scroll to the right to see it.

    I guess I could put a 1 pixel high spacer with a fixed width in each of the columns. It seems like such a hack, but maybe that's the answer.

    Has anyone else come across this?

    -jim

  4. #4
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    You can use the min-width CSS property. Be warned though, it works everywhere EXCEPT IE/Windows.

  5. #5
    SitePoint Member
    Join Date
    Dec 2003
    Location
    Macomb, MI
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great, now how do I satisfy the other 85% of all Internet users?

    -jim

  6. #6
    runat="server" Golgotha's Avatar
    Join Date
    Nov 2001
    Location
    Colorado
    Posts
    2,085
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you could probably set min-width: 500px;

    of course if you put an img in there that's 500px then that would do it alone.

    the thing that CSS really teaches you is there's different ways to skin a cat - if you look at www.jpma.com it's tableless, but you wouldn't know it if I didn't tell you that.

  7. #7
    SitePoint Member
    Join Date
    Dec 2003
    Location
    Macomb, MI
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yep. www.jpma.com does esentially what I'm looking for. It's a 2-column layout instead of 3, but it does not resize beyond the min width.

    I tried to figure out how it's done, but it doesn't look like 'min-width' is used at all. It looks like it was done by simply setting the 'width' on each style. Could you explain?

    By the way, out of curiousity I tried it under NN4/Win and it crashes the browser (as in shuts it down). Not nice.

    -jim

  8. #8
    SitePoint Member
    Join Date
    Dec 2003
    Location
    Macomb, MI
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually, I see now why this works. It is not a fluid design, it's a fixed design. If I enlarge my browser it does not resize the content.

    I wanted a fluid design (with a min-width). And preferably one that works for a majority of users.

    -jim

  9. #9
    runat="server" Golgotha's Avatar
    Join Date
    Nov 2001
    Location
    Colorado
    Posts
    2,085
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    again, just put an image in there with 500px or whatever and then it will stop sizing when it hits that - you dig.

  10. #10
    SitePoint Member
    Join Date
    Dec 2003
    Location
    Macomb, MI
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I can, but it wouldn't be in just one place. It'd have to be in all the DIV's where I need a min-width to be maintained.

    I can do that, as I've already stated, but I think it's a hack! I thought one of the arguments for CSS was having "semantic markup", so that for example, a visually impaired person wouldn't have to "listen" to thier browser render 20 useless transparent.gif img tags.

    I expected more from something so hyped.

    -jim

  11. #11
    SitePoint Author silver trophybronze trophy
    wwb_99's Avatar
    Join Date
    May 2003
    Location
    Washington, DC
    Posts
    10,633
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    So make the image its own CSS class which has the audial display quality of none.

    Other option, to simplify things, is to put the divs in a container of some sort, and set their widths to 100%, and set the container to hold the image.

    WWB

  12. #12
    SitePoint Member
    Join Date
    Dec 2003
    Location
    Macomb, MI
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I shouldn't have to use images to fix my widths. Both of those solutions still seems like hacks.

    Fortunately I came across a few sites where others were struggling with the same problem, and somehow landed on this page:

    http://www.svendtofte.com/code/max_width_in_ie/

    There's a simple fix at the bottom which amounts to adding the following line:

    width:expression(document.body.clientWidth > 500? "500px": "auto" );

    This seems like it fixes my problem, though I'm not completely sure at what cost.

    Also, apparently, someone named Andrew Clover has a javascript file (minmax.js) that you can include that will also fix this problem.

    I guess in the end, my disappointment should not be with CSS, but rather with Microsoft and thier crappy IE browser.

    -jim

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    but rather with Microsoft and thier crappy IE browser.
    Yes css has most of the tools to do exactly what you want 99% of the time and you can do most layouts in mozilla etc.

    Paul

    Edit:


    if you are going to use expressions then you can also hide it from other browers by using ie's conditional comments.
    <!--[if IE 6]>
    <link rel="stylesheet" type="text/css" href="iecode.css" />
    <![endif]-->

  14. #14
    SitePoint Author silver trophybronze trophy
    wwb_99's Avatar
    Join Date
    May 2003
    Location
    Washington, DC
    Posts
    10,633
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    I find JS to be more of a hack than putting things into the HTML . . .

    WWB

  15. #15
    SitePoint Member
    Join Date
    Dec 2003
    Location
    Macomb, MI
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If I use IE 'expressions' in my CSS file, will other browsers choke on the file?

    I tried it in Opera and it ignored it fine. I would prefer to not have to manage a separate stylesheet for IE if possible.

    (and I agree that it's still a hack, but I think it's better than lacing a file with a bunch of useless img tags).

    -jim

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    If I use IE 'expressions' in my CSS file, will other browsers choke on the file?
    They should ignore it but you can always just give it to ie using the star selector hack if you don't want to use the conditional comments.
    e.g.
    Code:
    * html #ieonly {background:red}
    Only ie parses the above code. (I've never tried it with expressions though so you'll have to test it yourself.)

    Paul


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
  •