SitePoint Sponsor

User Tag List

Page 2 of 5 FirstFirst 12345 LastLast
Results 26 to 50 of 116

Thread: I'm sick of CSS

  1. #26
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,295
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by percept
    This is the normal code for an image: <image src="hello_world.gif" border="0">
    Only if you code badly (or try to shorten your html to make it look better against css)

    You should always specify a width and height for your image so that the browser allows the correct space for the image and continues displaying the rest of the page while the image downloads.

    Regarding css I can see both sides of the argument and I think if you are used to working in one medium then I can see how it will be hard to change. Especially if you work with tables and have learned how to make it display in most browsers.

    (I still find that I have more trouble trying to get tables to behave than I do with css but then I never did like tables much anyway. That's probably just me anyway.)

    I'm on the side of CSS but if you want to use tables thats fine, it's your choice and as Vinnie said you can always style the table with css to make it more compact.

    As mentioned in one of the above posts the web is a changing medium and designers will need to accomodate different types of display that users may be using. (e.g. screen readers to mobile phones etc.) I believe the easiest way that that can be achieved successfully is through fluid design utilising css.

    Browser interpretations of CSS have many failings, which I'd be the first to admit, but I think that its weaknesses are outweighed by its strengths. e.g. Cleaner code, smaller filesize, easier to maintain html, easier to make sitewide changes in one file, abaility to change the whole look of the site without touching a single piece of html, more accessible.

    I suppose I should list some of its weakenesses to be fair (broken box model in IE5, different interpretations in different browsers, lots of bugs, lacking layouts for pixel perfect design such as three column layout of equalising length (although columns are being addressed in css3).

    <dream>I'm looking forward not backward and one day all sites will be CSS and tables will be banished to tabular data .</dream>

    I'm starting to ramble on now so I'll stop. (Interesting thread though.)

    Paul

  2. #27
    SitePoint Zealot
    Join Date
    Jan 2002
    Posts
    103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pissant
    context is all important...
    the method you are describing in fact allows the designer to make style typographic headings and such, or graphics which can be easily changed site wide as the design changes.
    there are actually some very good uses for this idea, and some pretty durned stoopid ones!
    Oooh, the famous Fahrner Image Replacement (FIR) Method: http://www.stopdesign.com/also/articles/replace_text/

    Anyways, it's all about context. I use the technique for logos and nav bars. To me, to use html makes more sense:

    h1 = site title
    h2 = page title
    h3 and lower = subtitles in the content

    So, the body of my html document would look something like this (sans the span tags I will use for the FIR):

    Code:
    <div id="logo">
    <h1>My Website</h1>
    </div>
     
    <div id="navbar">
    <p>
    <a href="#">link</a> | <a href="#">link</a> | <a href="#">link</a>
    </p>
    </div>
     
    <div id="content">
    <h2>My Blog</h2>
    <h3>Date: Back from vacation</h3>
    <p>blah blah blah</p>
    <p>A pic from my vacation:</p>
    <p><img src="city.jpg" height="400" width="600" 
    alt="downtown as seen from the freeway after the rain stopped"></p>
    </div>
    Now, in a text browser (like lynx or even a visual browser with CSS and/or images turned off), an h1 makes more sense than an empty image for the site title. Likewise, the links make more sense as text than as empty images. Here, the image is not the content, but a decoration.

    However, that photo from the vacation won't get the FIR treatment because I do want my audience to know that I've got a pic to show off and that they're missing out on a beautiful view. In this context, the image is the content.

    I don't use CSS to "reduce my code" but it's a tool to streamline the html so that it will make sense in any medium.
    Last edited by CRA; Aug 11, 2003 at 15:34.

  3. #28
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    lacking layouts for pixel perfect design such as three column layout of equalising length
    This keeps on comming up: "you can't do pixel perfect designs in CSS"

    I don't get it. What is so hard about doing pixelperfect designs in CSS?

    A bit of planning to avoid bugs in IE5 and you don't even need any hacks.

    Douglas
    Hello World

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

    Don't have a go at me! I'm on your side

    I didn't mean you couldn't do pixel perfect design if you wanted to, I just meant it was easier if you avoid putting yourself in that position.

    Although Id' like to see the three column trick done in CSS. Three true columns of equalising lengths with independent background colours and varying lengths of text. (Without resorting to background images etc.) It's possible to provide a solution if you know in advance which column is the longest but afaik it can't be done if any column will be the longest. That's what I meant was lacking. If that had been available from the beginning all the table fanatics would be happy

    Paul

  5. #30
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    pixel perfect ... three column
    I don't think I got my point across:

    I asked why people complain that pixel perfect layouts are
    impossible, and you give me an example of a fluid layout
    which is impossible!

    And honestly, how often do you not know which column
    will be longest? (remembering that this isn't even an issue if
    you want the columns to be the same colour, which they are
    in most cases.)

    Douglas
    Hello World

  6. #31
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Jeff Lange
    How do you specify 50% - 8px? (I wish CSS allowed mathematical calculations like 50% - 8px).
    There's the IE-only expressions for CSS, but that only solves part of your problem

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

    Sorry Doug but I feel we've been talking at slightly cross purposes I was under the impression that my fluid example was exactly relevant to my original quote (that you quoted in your reply when taking me to task about pixel perfect design.)

    My original quote :
    Quote Originally Posted by Paul
    lacking layouts for pixel perfect design such as three column layout of equalising length

    Quote Originally Posted by Doug
    I asked why people complain that pixel perfect layouts are
    impossible, and you give me an example of a fluid layout
    which is impossible
    !
    Then you admonish me for giving an example exactly relative to my original quote!

    Note that I was referring exactly to pixel perfect design in a 3 column layout format. (e.g.One scenario could be images at the bottom of the equalised columns that need to match up therefore requiring pixel perfect design.)

    I agree with all your other comments but was slightly annoyed at the way you interpreted my quote .

    Hope we can still be friends

    Paul

  8. #33
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Paul O'B
    Hope we can still be friends
    Can't we all just get along?

  9. #34
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hope we can still be friends
    Yea, sorry

    It was a general sort of anti-non-pice-perfect people... I was really responding more to Anode's post, but by the time I finished reading the thread quoting you was closer... so to make up for it, here is the correct quote:

    It comes down to whether you still ache for pixel-perfect display across all browser or recognize that the web is a whole different medium with different rules.
    Corrected statment:
    Just because CSS can style for handhealds doesn't mean it can't style for desktops

    (e.g.One scenario could be images at the bottom of the equalised columns that need to match up therefore requiring pixel perfect design.)
    If you don't mind me miss quoting you again (just a little bit ) this is a table based way of thinking, CSS style, you could put position: relative on the parent, and then position: aboslute; bottom: 0 to get things to line up like that, or use background images etc...

    One thing I am irritated about in CSS at the moment: I can't do this:

    Code:
    position: aboslute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    but anyway still friends

    Douglas
    Hello World

  10. #35
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    FWIW, those of you who are struggling with column heights need only to look as far as the lates Tech Times Quick Tip. Our new mentor, MikeFoster, wrote a great DHTML library to help with CSS layouts and inparticular the varying column heights. Will be making extensive use of it.

    By the way, I'm a 90-100 guy. 90% - 100% of all my client side work is CSS.
    Aaron Brazell
    Technosailor



  11. #36
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Sketch
    FWIW, those of you who are struggling with column heights need only to look as far as the lates Tech Times Quick Tip. Our new mentor, MikeFoster, wrote a great DHTML library to help with CSS layouts and inparticular the varying column heights. Will be making extensive use of it.
    A good one-size-fits-all answer, though remember if you know which will be your tallest column it is redundant...

    Douglas
    Hello World

  12. #37
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you're like me and you use a template and feed it dynamic content to generate your pages you will rarely know which column will be tallest.
    Aaron Brazell
    Technosailor



  13. #38
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Sketch
    If you're like me and you use a template and feed it dynamic content to generate your pages you will rarely know which column will be tallest.
    This is why, when I design in CSS, I stay away from designs that are meant to look like tabled sites. I'd rather just go off completely in a different direction (usually with nice-looking results) than try to emulate something easier done with a table and frustrate myself in the process.

  14. #39
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yep, I agree, Vinnie. It does take a mindset change. Again, referring back to the pixel-perfect design mentality. You can get awesome (yet slighly different) looking results in CSS if you use the strengths and weaknesses of the various browsers to your advantage. (as you know...I'm just foaming at the mouth here. )
    Aaron Brazell
    Technosailor



  15. #40
    Sidewalking anode's Avatar
    Join Date
    Mar 2001
    Location
    Philadelphia, US
    Posts
    2,205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    DougBTX:
    Yes, we all know that pixel perfect design is possible in CSS. To attain that possibility, you deal with the stuff that makes people start threads like this.

    When you throw the pixel-perfect baggage away, you can enjoy the good aspects of CSS. If not, you're stuck dealing with the hacks and workarounds that CSS/XHTML design was supposed to abolish.
    TuitionFree — a free library for the self-taught
    Anode Says...Blogging For Your Pleasure

  16. #41
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by anode
    DougBTX:
    Yes, we all know that pixel perfect design is possible in CSS. To attain that possibility, you deal with the stuff that makes people start threads like this.
    I see where you are comming from, I just don't like seeing people complain about something just becuse they don't understand it.

    It's all been said before...

    Douglas
    Hello World

  17. #42
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by DougBTX
    I see where you are comming from, I just don't like seeing people complain about something just becuse they don't understand it.
    Off Topic:

    That's usually the main reason that people complain

  18. #43
    SitePoint Evangelist ktown's Avatar
    Join Date
    May 2001
    Location
    toronto
    Posts
    478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by N9ne
    Can I rant?

    Who gives a **** **** **** ***** (and might I add ****) about making webpages work for people running IE4?
    you have to think of your target market also.
    a lot of people that read the boring-environmental content that i design a lot of stuff for are still running dial up nevermind NN4!~
    if i eliminated these people then i would lose half the clients..hmm.. that would suck, wouldn't it

    anyways..

    as for css
    i'm learning it

    and i do find that once you get it right - its much better than using tables.
    not that i can make a table-less layout yet though [img]images/smilies/tongue.gif[/img]

  19. #44
    ********* Shroom mydster's Avatar
    Join Date
    Nov 2002
    Location
    tpyge
    Posts
    1,085
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've felt the same you do, but I've read up on the CSS3 page from W3C (even though it's a long way off), and it seems much easier to make multicolumn pages...

  20. #45
    "Of" != "Have" bronze trophy Jeff Lange's Avatar
    Join Date
    Jan 2003
    Location
    Calgary, Canada
    Posts
    2,063
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That and if CSS3 ends up supporting behaviors like is proposed, all you'll need to do is have the data in your page, the CSS can write HTML to be beginning of tags and everything....

    example:

    Code:
    <?xml version="1.0" encoding="[ ... ]"?>
    <?xml-stylesheet href="[ ... ]" type="text/css"?>
    <!DOCTYPE "[ ... ]" "[ ... ]">
    <html [ ...]>
      <head>
    	<title>[ ... ]</title>
      </head>
      <body>
    	<h1>[ ... ]</h1>
    	<content and crap />
      </body>
    </html>
    With that you could create a fully operational page with menus and everything.

    The only problem is browser support (IE-only right now, and it only supports externally linked behaviors), and Scripting has to be on...
    Who walks the stairs without a care
    It shoots so high in the sky.
    Bounce up and down just like a clown.
    Everyone knows its Slinky.

  21. #46
    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)
    Quote Originally Posted by CRA
    Now, in a text browser (like lynx or even a visual browser with CSS and/or images turned off), an h1 makes more sense than an empty image for the site title.
    ok, coming in late on this thread, this caught my eye. why would it be an empty image if you provide a relevant ALT attribute as you should ?

    and let's not forget that a good old fashioned
    Code:
    <h1><img src="/images/mylovelylogo.png" width="200" height="100" alt="Lovely Company Limited" /></h1>
    lets you still use the IMG tag and provide structural information about what that image is...a heading.

    Likewise, the links make more sense as text than as empty images. Here, the image is not the content, but a decoration.
    again, with ALT, they shouldn't be empty. and yes, the image itself may not be the content, but the text in that image (replicated in the ALT) certainly is part of the content.
    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

  22. #47
    SitePoint Evangelist ucahg's Avatar
    Join Date
    Apr 2001
    Location
    Sarnia, Ontario, Canada
    Posts
    434
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I like the idea of being able to set which box-model you want to use. I don't recall where I was reading about this, but apparently it's a CSS3 attribute, called box-model or something to that equivalent. Internet Explorer doesn't support it, Mozilla has a proprietary equivalent (~moz-box-model or something to that effect) and Opera's latest version does support it. Still not quite good enough to use, but will be great when support grows for it (and mozilla drops the ~moz).
    Love it? Hate it? Helpful? Useless?
    Use the rate button to let me know what you think of my post!

  23. #48
    webdesign Percept's Avatar
    Join Date
    Jan 2003
    Location
    Belgium
    Posts
    397
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Sketch
    ... You can get awesome (yet slighly different) looking results in CSS if you use the strengths and weaknesses of the various browsers to your advantage. (as you know...I'm just foaming at the mouth here. [img]images/smilies/wink.gif[/img] )
    Sketch, that's exactly what we don't want to do.
    Tables work everywhere so tables it is.


  24. #49
    SitePoint Addict
    Join Date
    Dec 2002
    Posts
    386
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Percept
    Sketch, that's exactly what we don't want to do.
    Tables work everywhere so tables it is.
    tables DON'T work everywhere though
    that is just the thing!!
    Look around these boards and even now that so many people are moving to modern markup, there are still lots of questions on how to make their tables work in various places...
    And you have to use as many or more hacks to get the tables to work as you desire!

    Quote Originally Posted by CRA
    lets you still use the IMG tag and provide structural information about what that image is...a heading.
    ok, but what happens if you wish to replace that image site wide?
    or
    what if you want to replace that image backwards and forwards depending upon user options, as in change the style of your site from one style to another, and back again... This is where FIR and methods like it can come in handy

  25. #50
    SitePoint Zealot
    Join Date
    Jan 2002
    Posts
    103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by redux
    again, with ALT, they shouldn't be empty. and yes, the image itself may not be the content, but the text in that image (replicated in the ALT) certainly is part of the content.
    Alt tags work fine in lynx. But, in my pre OSX, pre lynx, and dial-up only days .. blech, broken images look funky in browsers. I rather look at text than an empty box with alt text in it. It just... looks nicer to me.

    On the flipside, FIR is inaccessible to the jaws screen reader since anything defined with {display: none;} isn't spoken out loud.


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
  •