Almost perfect ... but not quite !

[brothercake]

Here's the page I'm working on - http://af.brothercake.com/css_test_2-3.html I'm particularly pleased with it, because

- it's XHTML Strict
- the layout is pure CSS
- it validates "AAA" with the Web Content Accessibility Guidelines (this is a better rating than w3.org!)


But it's has one 'problem' ... the columns are kept in place with "float", so if the window is too narrow, the RH div drops underneath the main content; this is not so bad, but really I would rather it stays there and creates horizontal scrollbars ...

Any thoughts on whether this is possible (without absolute positioning), or perhaps what it does now is better anyway?

[beetle]

Hmmm. hard to say. I'll think about it an perhaps do some tests later, but I wouldn't worry about it too much.

even www.alistapart.com works like that ;)

[Catman]

If style sheets are disabled, your blocks drop down anyway, so I don't think it's a major problem (since it seems functional without styles).

I'm jealous of your AAA rating. Bobby hates everything I do.

http://www1.iastate.edu/~wsthune/cps/mrbunny/sob.gif

BTW, I really like your "not there" styles for the brackets around links -- a very elegant solution to the problem.

[brothercake]

Originally posted by Catman
a very elegant solution to the problem.

I thought so :D

But yeah, the page still works without styles, and that's largely how it validates with Bobby so well; also avoiding the use of tables for layout, keeping a logical heirarchy to <h1>, <h2> etc, using semantically meaningful HTML as much as possible, avoid using "click here" for links; once you start thinking in its terms, it's actually not as hard as it seems. But you have to start with valid XHTML to get Bobby to like it ... that underpins everything.

[pardicity3]

Originally posted by Catman
BTW, I really like your "not there" styles for the brackets around links -- a very elegant solution to the problem.

I hate to sound amaturish...but I looked at your code Brothercake, and I must admit, I was totally puzzled by your notThere thingy. What exactly is it doing that is so elegant?

Thanks much!

[brothercake]

Well, the accessibility guidelines recommend "seperating adjacent links with more than just whitespace" - because to a non-visual user agent - or one where the CSS doesn't work - adjacent links can seem like they run together.

So that's what the brackets are for, eg:

<span class="notthere">[</span><a href="'#">link</a><span class="notthere">]</span>

Someone using a CSS2 capable browser, looking at that page on a screen, doesn't see those brackets at all, because of this:

@media screen {
.notthere { display:none; }
}

But someone with an older browser, or a text browser, or using a screen reader, does have those brackets - and that's who they're for.

Have a look at that page in Lynx, or if you don't have that, try Opera with styles and images turned off.

[ronaldb66]

Brothercake,

very, very nice... Seems like you solved the "what colors should I use?" issue bugging so many people gracefully; what approch did you use for that?

P.S. I hope you don't mind me taking a long, hard look at how you solved things code-wise; i feel there's a lot to learn here! :thumbsup:

[brothercake]

Originally posted by ronaldb66
Seems like you solved the "what colors should I use?" issue bugging so many people gracefully; what approch did you use for that?

I didn't come up with that colorscheme - it was given to me as a two tone - dark blue (#333366) and orange (#ff9900) - the lighter blues were just extrapolated from that. Dunno if that's useful to you - but I generally go from the premise that you should only have two main colors, plus shades of those colors.

[ronaldb66]

Sounds like a pretty useful and safe approach. Those two tones by the way are complementary colors on an artist's color wheel, based on yellow / red / blue as primary colors, as derived from the Project Cool site suggested by someone around here (Nick?) a while ago (Project Cool: Using color on the web (http://archive.devx.com/projectcool/developer/gzone/color/)). So, your orange and dark blue make a lot of sense. Good though to see an actual example work that well in the real life.

[meerkat]

Bro…

Don't look at it on a Mac in IE, it totally disregards all your styles.

Looks great in Moz1.2 though.

meerkat

[brothercake]

Originally posted by meerkat
Don't look at it on a Mac in IE, it totally disregards all your styles.

Yeah I clocked that; several mac browsers don't import all of the styles, and opera 7 doesn't do the 0 body margins ..

I may have to climb back a little and do some browser hacks when it's finally public ... [hooray :rolleyes:]

[redstormaudio]

Originally posted by brothercake
opera 7 doesn't do the 0 body margins ..

Set the body padding to 0 as well.

[brothercake]

Originally posted by redstormaudio
Set the body padding to 0 as well.

Brilliant :) thanks

[Catman]

Achieving Mac functionality with IE 5.1 is a royal pain.

First, you can't just drop in a disabled link to an external style sheet which you'd activate via javascript because Mac IE treats the disabled style sheet as some sort of streaming video. You can activate the sheet, but the browser endlessly reloads the file.

Of course, since disabled for links is depreciated in XHTML 1.1, that's a moot point.

Second, if you want to try a few javascript tweaks to the style sheet, Mac IE won't do it. So you're left with designing for the Mac and tweaking for PC versions, a horrid solution.

In the end, I opt to load a separate style sheet for Mac IE (with all sheets not disabled since that doesn't make the Mac throw up), test for Mac IE with Javascript, and disable/enable the appropriate sheets. The CSS validator doesn't like this (you have valid CSS but you've redefined all these elements so you get a ton of warnings).

But since my websites absolutely must work on Macs (about 30% of the computer labs on campus are Mac-only), I have to make the effort.

Sigh. I'm hoping for a better, less annoying solution.

PS: Sorry, but I just had to vent. http://www1.iastate.edu/~wsthune/cps/mrbunny/hopmad.gif

[redstormaudio]

By the way, you'll be xhtml 1.1 compliant if you change the lang attribute in your html tag to use xml:lang instead.

[cg9com]

i dunno if the clear: attribute would force the columns on the same line ....
or just a big giant <nobr> above it all lol

[brothercake]

Originally posted by redstormaudio
By the way, you'll be xhtml 1.1 compliant if you change the lang attribute in your html tag to use xml:lang instead.


Dude :thumbsup:

[brothercake]

Originally posted by cg9com
i dunno if the clear: attribute would force the columns on the same line ....
or just a big giant <nobr> above it all lol

<nobr> :rolleyes:

I've never heard of clear: - is that like a CSS equivalent for the old <br clear="all"> etc. ?

[beetle]

Yes, the CSS clear rule is similar to the clear attribute for BR elements, but can be applied to anything

cssSelector {
clear: right|left|both;
}

Note that unlike the clear attribute, the clear css rule uses 'both' instead of 'all'

<nobr> is not part of the XHTML 1.1 spec

My gray, dashed DIVs on this page (http://www.peterbailey.net/site/services/) use clear: both because of the use of floats with the paragraphs and images.

[cg9com]

Originally posted by beetle


<nobr> is not part of the XHTML 1.1 spec


yea, was just a joke.
would clear work in this case? worth trying

[brothercake]

I think it might ... I'll try it :thumbsup:

[brothercake]

Originally posted by Catman
In the end, I opt to load a separate style sheet for Mac IE (with all sheets not disabled since that doesn't make the Mac throw up), test for Mac IE with Javascript, and disable/enable the appropriate sheets.

I had an idea about this - I haven't tried it yet, but here's the theory - you have small client sniffer that detects each of the "browser hack" groups you need - there might be one for mac/ie5, another for netscape 4 [if you can be bothered!], and so on - and then (writes in the DOM | document.writes) a <link/> element that calls a stylesheet ... but (this is the cool bit I reckon) ... the stylesheet is in PHP, and you send variables through the link href:

<link ... href="styles.php?br=ie5&os=mac" />

And your PHP script writes the stylesheet.

The question mark over that is, well, would it work. Can't see why not; though I'm not sure if it would validate - providing the type is correct, does it matter what the filename looks like?

I shall try it out when I have the time ..

[beetle]

Should work just fine. An href is an href (just make sure to use your &ampamps;s!). I use that very technique to serve up javascript files on occasion.

[cg9com]

Originally posted by brothercake
providing the type is correct, does it matter what the filename looks like?
ive never done it before, but i dont think it would matter as long as the mime type is correct.
let us know how it goes!