CSS help

[markporter]

OK, so I should probably feel incredibly bad about deserting you guys for so long and now only posting because I need some help... but you're all kind and forgiving and helpful right???

Essentially, I've come up with this http://www.markporter.co.uk/EDS/ (no, it's not what it's going to look like, but I'm getting the layout together) and I'm trying to think of a better way of doing the navigation menu at the top so that one doesn't have to specify new pixel widths whenever a new item is added. Now, the way forward that I can think of at the moment would be tables, but tables are evil, right?

[JonF]

Tables for layout are indeed evil accorrding ot the gurus but, IMHO, there's a place for 'em. Many times the complex workarounds required to get CSS working for a prticular desired layout ain't worth it.

You might be interested in http://cross-browser.com/ . I've used that stuff with great success. Some of the samples don't degrade real gracefully if Javascript is off, but I think it's pretty safe to assume javascript.

[$cirisme]

#nav li {
width: 20%;
}

Set it to a percentage, or don't set it at all and it will expand to fill whatever size.

[$cirisme]

#nav li {
width: 20%;
}

Set it to a percentage, or don't set it at all and it will expand to fill whatever size.

[$cirisme]

Tables for layout are indeed evil accorrding ot the gurus but, IMHO, there's a place for 'em. Many times the complex workarounds required to get CSS working for a prticular desired layout ain't worth it.

You might be interested in http://cross-browser.com/ . I've used that stuff with great success. Some of the samples don't degrade real gracefully if Javascript is off, but I think it's pretty safe to assume javascript.

:puke:

This line of thought is what represents all that is evil of webdesign in the last 5 years.

[$cirisme]

Sorry, that was overly harsh, but I have spent a lot of time refining my web development skills, and my primary philosophy is that web pages should be as lightweight and accessible as possible. It is almost downright bigoted to design with tables or Javascript.

They have their place, just not in the core design because it locks a lot of people out. Might as well design a city without sidewalks, handicap accessible ramps, or accessible public transporation (including bike trails) and put up signs saying, "No poor, handicapped or different people are allowed."

Yes I feel quite strongly about this.

[JonF]

Sorry, that was overly harsh, but I have spent a lot of time refining my web development skills, and my primary philosophy is that web pages should be as lightweight and accessible as possible. It is almost downright bigoted to design with tables or Javascript.

They have their place, just not in the core design because it locks a lot of people out. Might as well design a city without sidewalks, handicap accessible ramps, or accessible public transporation (including bike trails) and put up signs saying, "No poor, handicapped or different people are allowed."

Yes I feel quite strongly about this.

Not to flame, but I don't see how using tables and JavaScript prevents anyone from accessing the information (as long as you degrade gracefully when JavaScript is disabled).

Could you please show me the correct way to implement the layout and menus of http://catalystconsulting.com/Principles.html? (Go ahead, turn off Javascript and see what happens). And, of course, it's gotta work in any post-Netscape-4.7 browser.

Note the validations at the bottom.

[Dee Dee Warren]

Why is Javascript so bad?

[$cirisme]

Not to flame, but I don't see how using tables and JavaScript prevents anyone from accessing the information (as long as you degrade gracefully when JavaScript is disabled).

Umm, that is not what you said earlier:

Some of the samples don't degrade real gracefully if Javascript is off, but I think it's pretty safe to assume javascript.

This is the attitude I was attacking, I wasn't attacking using Javascript but attacking requiring Javascript for the core.

Using Javascript to add superfluous effects is fine.

Could you please show me the correct way to implement the layout and menus of http://catalystconsulting.com/Principles.html? (Go ahead, turn off Javascript and see what happens). And, of course, it's gotta work in any post-Netscape-4.7 browser.

Seems to work great, actually.

[$cirisme]

Why is Javascript so bad?

Bad for what? Javascript is great if you understand its place. Its place is to add client-side behavior. It should be used as an enhancement, not in place of something more accessible.

[JonF]

Not to flame, but I don't see how using tables and JavaScript prevents anyone from accessing the information (as long as you degrade gracefully when JavaScript is disabled).

Umm, that is not what you said earlier:

Some of the samples don't degrade real gracefully if Javascript is off, but I think it's pretty safe to assume javascript.

This is the attitude I was attacking, I wasn't attacking using Javascript but attacking requiring Javascript for the core..

Nor is that what you said earlier:

It is almost downright bigoted to design with tables or Javascript.

What's so bad about tables? I challenge you to duplicate my design, with the vertical alignments, in CSS with no tablesw, without researching lots of flaky behaviors of various browsers and kludging in lots of complicated workarounds. And, alas, you have to do the research whenever you do any CSS that is slightly out of the ordinary. I love the concept of CSS, but the browser implementers (especially Microsoft) have made it far less useful than it could be. Maybe in a five more years we can forget IE6 ...

And you clearly wrote that using JavaScript is bad.

[$cirisme]

Nor is that what you said earlier:

I said to 'design'. And it is completely consistent with everything I said before. If your design depends on either tables or Javascript, then you have failed to create an accessible, easy to maintain website.

This does not mean you shouldn't use either, just that you should use them for what they're appropriate for. Javascript is appropriate for enhancing the user experience. Tables are appropriate for presenting tabular data. Neither is appropriate as the core of a design.

What's so bad about tables?

For tabular data, there is nothing more accesible than tables. These people who make calendars out of css with no tables are crazy, a calendar is tabular data.

But people who use it as a core part of the design are crazy too, because:

1) Tables mix presentation and content.
2) Because of this, tables are harder to maintain.
3) They bloat out with a bunch of unnecessary code.
4) Related to #1, you're locked into a particular design no matter what.

I challenge you to duplicate my design, with the vertical alignments, in CSS with no tablesw, without researching lots of flaky behaviors of various browsers and kludging in lots of complicated workarounds. And, alas, you have to do the research whenever you do any CSS that is slightly out of the ordinary.

I never claimed that CSS could do full fidelity of everything tables could do in the same way that tables can do it, graphically. So your 'challenge' is puzzling.

That said, (if we're talking about that catalyst consulting page), as simple as that site is, it's seriously bloated. And you're throwing out the benefits of using css by using so much of it inline.

But, it's not difficult to make a site that closely resembles yours with using tables. It took me about 3 minutes. And to the naked eye, no one will ever know the difference.

The problem is not CSS, the problem is your unshakable, "It must be done this way!" attitude. I work at a place where I have to convert lots of printed materials for the web. I wish we had more resources to really sit down and do it properly and not have the web material be second class because it's just a duplicate of print-media, but, alas, you have to work within the constraints you're given.

I'm constantly having to remind my co-workers that the web material will never look exactly like the printed version. I especially love when they come to me with some typographic change, and I just have to remind them, again, that, unfortunately, strict typographic control is almost impossible on the web.

I mean, email and the web really are poor replacements for printed media. You have so any limitations it's not even funny. But people shouldn't think of it as a 'replacement', but as a new way of doing things. Sure you can't get perfect typographic control, but there are other benefits that far outweigh that downside in that you can get mass, immediate distribution for next to nothing.

If you keep doing what you've always done, you're always going to get the same results you've always gotten.

CSS is like how web media 'replaced' printed media. It didn't.

Instead, it brings about a new way of thinking. It's not designed to be a full-fidelity 'replacement' of something else, which, in the case of sensible vertical-alignment, is unfortunate. We can get a close approximation to it, though, just as we can get a close approximation of the printed typography.

Is it perfect? No it was never designed to be. This is where the short-sightedness of many 'designers' come into play. They would focus on there being a lack of pixel-perfect vertical centering and decry it as awful.

Get a grip. Focusing on this is like focusing on why email sucks because it is almost nothing like postal mail. But this is where that attitude turns bigoted: when people assume that css opens no new audiences.

Mixing presentation and content locks you in to the audiences you have today: a bunch of users on their 19in million-color displays. You may be perfectly happy with that. But it is a bigoted attitude because it relegates the experience of everyone else, blind people, search engines, cell phones, PDA's, and every other weird thing you could think of, to that of a second class.

And since the web shows no signs of just staying where it is, it's not a very future-minded approach.

I love the concept of CSS, but the browser implementers (especially Microsoft) have made it far less useful than it could be.

No, actually, I don't think they have. Microsoft's lack of proper CSS support certainly makes it more difficult for us to create really great designs for a lot of people, but it doesn't take away from the accessibility, managability, or scalability that a proper implementation provide.

That's not to say I don't hate IE with a passion, just that IE's lack of proper support shouldn't be used as an excuse not to be forward thinking.

And you clearly wrote that using JavaScript is bad.

For design, yes, absolutely. And you clearly said it doesn't matter if you don't care about it degrading, which I think is pretty narrowminded and somewhat bigoted. FWIW.

[Losvedir]

#nav li {
width: 20%;
}

Set it to a percentage, or don't set it at all and it will expand to fill whatever size.

To flesh out $cirisme's idea, you can check out this example.

Also, $cir, maybe you can help me with a problem I have with that link. Looking at the CSS code, I don't understand the purpose of the "float: left;"s for both the a and ul tags.

I tried playing around with it a bit and then clicking the "Edit the text and click me" button. It didn't really help, though. Getting rid of the "float: left" part of the ul tag seemed to counterintuitively make it start floating left. Getting rid of that part in the a tag just makes the navbar shrink in width. I don't understand why either behavior is what it is.

[$cirisme]

Float allows you to pull your element up out of the normal flow of the document.

You can see this in that example in Camino/Mozilla when you remove the float rule for the a tag as the text actually overlaps the navbar.

I generally use floats when I need columns. I'll float an element to the left with a specific width (say 20%) and my other elements will come up like columns.

Floats I think sometimes trip people up because they can act kinda weird. The reason they act weird is because they do float the element out of the flow of the document.

If you are going to be busy writing websites this summer, you need to do yourself a favor and make sure you have the Firebug extension in Firefox. It is amazing. I love it. You can inspect the DOM, all the network traffic, images, loaded XML and even dive into debugging AJAX (XMLHTTPRequest) calls.

You won't want to be without Firebug. Period.

[Losvedir]

Float allows you to pull your element up out of the normal flow of the document.

You can see this in that example in Camino/Mozilla when you remove the float rule for the a tag as the text actually overlaps the navbar.

I generally use floats when I need columns. I'll float an element to the left with a specific width (say 20%) and my other elements will come up like columns.

Floats I think sometimes trip people up because they can act kinda weird. The reason they act weird is because they do float the element out of the flow of the document.

If you are going to be busy writing websites this summer, you need to do yourself a favor and make sure you have the Firebug extension in Firefox. It is amazing. I love it. You can inspect the DOM, all the network traffic, images, loaded XML and even dive into debugging AJAX (XMLHTTPRequest) calls.

You won't want to be without Firebug. Period.

Wow, thanks a lot! I suppose it's time to kick my nasty Safari habit once and for all, then.

I'll get Firebug now, then, and start playing around with it. I'm going to be working on Exhibit mostly, I think, this summer. It'll be a very different experience from what I'm used to, but I'm pretty excited about it.