Coffeehouse Thread

14 posts

Forum Read Only

This forum has been made read only by the site admins. No new threads or comments can be added.

One for W3bbo (I'm remembering why CSS is so frustrating and time-wasting)

Back to Forum: Coffeehouse
  • User profile image
    irascian

    I started putting together the basic HTML for my PDC blog today and decided to avoid using tables. It's ridiculous how difficult a simple three-column layout is proving to be if you don't want a floating layout (which does not work when you want photo's and text properly lined up), but I'd appreciate some input (any input) on what the problems I'm experiencing are. I spend most of my working life writing "back end" components so going back to the front end is proving very frustrating.

    I'm using SitePoint's "101 Essential Tips, Tricks and Hacks" which is browser agnostic (in fact it tends to favour solutions that don't work in Internet Explorer) but it appears to be recommending CSS styles that TopStyle Pro is adamant are not valid.

    The offending properties are "width" "position" and "top" which are used extensively throughout the book and which I've placed on the divs used to do a 3 column layout.

    If I ignore the Top Style errors, things turn out pretty much the way I want them in IE6, and are exactly what I would expect following the SitePoint book examples.

    However open the wretched page in Firefox or Safari and the whole thing falls apart.  In Firefox the three columns overlap and are not where they should be. The central column which has a hard-coded width happily careers into the third column and past it (and before w3bbo suggests it, no I don't want a floating layout because then photo's and text won't line up and I find floating layouts with their huge amounts of white space on larger monitors really ugly unless they are text only sites).

    I've done a quick mockup here and would appreciate any feedback on what I've done wrong in the stylesheet that breaks Firefox and Safari but gives what I want in IE6. The stylesheet can be found here (and yeah I know the trailer positioning is a hack but without using hideous float columns I can't see a way to fix it, and most of the CSS guru's I've asked have said CSS just isn't equipped to do this sort of thing without using float and clear layouts).

    I'm seriously thinking of just going back to tables - works across all browsers and takes far less time, but I hate giving up on this.

    Any advice on style-sheet changes that would make this simple layout work across al browsers much appreciated. Thanks.

  • User profile image
    W3bbo

    I've currently got other stuff on my TODO list right now, but I'll see about getting this one done in about an hour or so.

  • User profile image
    Sven Groot

    The first line in your page is this:
    <?xml version="1.0" encoding="UTF-8"?>

    No matter how nice doing that is for XHTML pages, don't. The DOCTYPE must be the first line otherwise IE will not switch to standards mode. If IE is not in standards mode it uses an even more screwed up version of the box model than usual, and you'll never get things to line up cross-browser. So you'll have to do without the processing instruction.

  • User profile image
    Sven Groot

    Second: casing needs to match in the CSS and the html for class and id values.

    So <div id="blogLinks"> with a style rule #bloglinks will not work except in IE in quirks mode.

    I'm gonna fix it and put the fixed version up in a bit.

  • User profile image
    NeoTOM

    W3bbo wrote:
    I've currently got other stuff on my TODO list right now, but I'll see about getting this one done in about an hour or so.


    3 hours later

  • User profile image
    W3bbo

    NeoTOM wrote:
    W3bbo wrote:I've currently got other stuff on my TODO list right now, but I'll see about getting this one done in about an hour or so.


    3 hours later


    Well, Sven's offered to do it now Wink

  • User profile image
    Sven Groot

    And here we go, one fixed version.

    Not only does it look the same cross browser (tested in IE7 beta 1, Firefox 1.0.6 and Opera 8), it also validates, both html and css.

    There weren't even a lot of modifications needed to make it work. Smiley

  • User profile image
    irascian

    Sven Groot wrote:
    And here we go, one fixed version.

    Not only does it look the same cross browser (tested in IE7 beta 1, Firefox 1.0.6 and Opera 8), it also validates, both html and css.

    There weren't even a lot of modifications needed to make it work. Smiley


    Thanks Sven.

    I used CSE HTML Validator to generate the skeleton and since it validated fine I assumed it was OK - I need to read up more on the subtleties of Quirks mode.

    The CSS case sensitivity mess-up is rather embarrassing - schoolboy error!

    Thanks for your help on this. I think I owe you a beer.

  • User profile image
    irascian

    Sven Groot wrote:
    And here we go, one fixed version.

    Not only does it look the same cross browser (tested in IE7 beta 1, Firefox 1.0.6 and Opera 8), it also validates, both html and css.

    There weren't even a lot of modifications needed to make it work. Smiley


    OK, just a couple of questions.

    1) TopStyle Pro (which most of the CSS Pro's I know swear by) flags the "position", "width" and "top" as being in error "Property xxxxx does not exist in this definition" - is this because these are CSS class 2 attributes not supported by CSS1 (in which case the error makes sense).

    2) Any idea why it screws up in Safari (the text in the main content block goes under the photo's on the right)?

  • User profile image
    W3bbo

    irascian wrote:
    1) TopStyle Pro (which most of the CSS Pro's I know swear by) flags the "position", "width" and "top" as being in error "Property xxxxx does not exist in this definition" - is this because these are CSS class 2 attributes not supported by CSS1 (in which case the error makes sense).


    CSS1 was text-formatting mostly. It wasn't until CSS2 that we saw the introduction of positioning.

    ...why have you set TopStyle to "CSS1" anyway? CSS2 and 3 includes CSS1 rules, not to mention the specification changing in CSS2 as regards a few CSS1 properties.

    So unless you're developing for IE3, there shouldn't be a reason to run TS in CSS1 mode.

  • User profile image
    irascian

    W3bbo wrote:


    ...why have you set TopStyle to "CSS1" anyway? CSS2 and 3 includes CSS1 rules, not to mention the specification changing in CSS2 as regards a few CSS1 properties.



    To be honest I'm not sure if it was set up as the default when I installed it or if it somehow got set when I thought I'd set it up for Netscape 4, IE4 etc onwards. Changed now and the errors go away. Smiley

    I think I need to take tomorrow out to print out and read the manual. TopStyle Pro has so much good stuff buried under the covers it's kind of wasted on me because all I've done is scratch the "default" surface.

    Wish it had a Safari 2.0 browser option in it then maybe I could see why Safari 2.0 renders things incorrectly.

    Too much good software to learn, too little time!

    (CSE HTML Validator Pro also has a lot of power under its hood that I've barely touched but the manual is one of those horrid chm help chapter things instead of being a nice printer friendly PDF).

  • User profile image
    Sven Groot

    irascian wrote:
    2) Any idea why it screws up in Safari (the text in the main content block goes under the photo's on the right)?

    It may be that we're just lucky in the other browsers with where it decides to wrap. I didn't look at the width of the center box since it wrapped correctly but if it's still a bit too wide the text can still go under the pictures in certain situations. I'm not certain if that's it, but if so just narrowing the center box will solve it.

  • User profile image
    irascian

    Sven Groot wrote:

    It may be that we're just lucky in the other browsers with where it decides to wrap. I didn't look at the width of the center box since it wrapped correctly but if it's still a bit too wide the text can still go under the pictures in certain situations. I'm not certain if that's it, but if so just narrowing the center box will solve it.


    That makes sense. I'll have a play.

    Thanks for adding the comments so that I can see explanations for the changes that you made Smiley

    P.S. Anyone else getting problems with the Channel9er smiley emoticons not showing up correctly?

  • User profile image
    Sven Groot

    Uncheck no smily formatting. It takes on the value of the post you're replying to, so apparently somebody turned it off in this thread. Smiley

Conversation locked

This conversation has been locked by the site admins. No new comments can be made.