Anyone read "Everything you know about CSS is wrong?"

[eclipse]

(If a moderator reads this and can be bothered, could they please re-name this thread "Will I use CSS tables or Joomla?" or whatever makes more sense to career web designers & coders? You'll see what I mean.)

It's by Kevin Yank at Sitepoint.

My main issue is I'm learning CSS so that I can change the "look" of Joomla. If I'm using Joomla anyway, do I (at this early stage of my CSS career) really have to learn how CSS replaces "Tables" espcially when this process seems so controversial and difficult, and Joomla should be able to do it for me? (I promise I'll be good and get into CSS tables later... and one day want to hand code a whole site from alpha to omega in something as basic as Smultron).

Why do I say CSS "tables" are controversial and difficult?

Because the Sitepoint podcast (on iTunes) recently advertised their book (above) and interviewed one of the authors, Kevin Yank, and it's all about how most people do CSS "tables" the hard way. I think I've used up my training budget subscribing to Lynda.com. Any guesses as to what he'll cover in the book? Anyway, if CSS tables (or their replacement) are such a controversial area right now, can I just forget learning about CSS tables for the moment and concentrate on layout in Joomla? How much extra code does Joomla add? Doesn't it take care of tables and navigation bars and all that for me, and do basic page layout? I'll probably be able to "tart it up" in the CSS just fine, but can I just let Joomla look after the page elements layout?

(Another thought... does Joomla layout in XHTML and then add php scripting stuff on top?)

BTW, the Sitepoint podcast seems to be a great round up of web industry news, browser standards rants, what's happening with various software, etc. I recommend it — it's only 3 episodes young and I recommend downloading them all from iTunes and checking it out. I've been "out of the scene" for a while and need all the help I can get, especially as my wife is strictly print and it's just her and I in this family studio.

 

[werther]

I have not read it but I have heard a lot about it. The name of the book is for the most part hyperbole.

From what I know it primarily covers the use of CSS tables. (display:table)
You would use this in place of CSS floats and negative margin layout techniques.

While it would greatly simplify coding, broad use of CSS tables is a long way off. IE8 is due out sometime in the beginning of '09 and it will be able to utilize this technique. This would make pretty much all major browsers compliant...except 2.

IE6 and IE7. -suprised?

I have not really practiced much with it but have read many 'tutorials' and it seems easy enough. -much easier than grasping floats was.
Here is a link to a recent overview:

24ways

-So to sum up, this will not nullify what you are learning at all.

 

[werther]

Sorry to double post but it seems I should have read your post more thoroughly as it appears you already know what the book is about.

So to add to my first post:

This technique is very simple and to most designers it is a dream come true. The problem is that not IE6 nor IE7 support it so it is pretty much useless right now.

You should learn as you have been and when you really understand it then continue on to such techniques like css tables. If you learn this first you will just be pissed off that you can't really use it yet.

At least that's how I feel.

 

[angelwatt]

You should learn as you have been and when you really understand it then continue on to such techniques like css tables. If you learn this first you will just be pissed off that you can't really use it yet.

That sums up my thoughts on the topic. Even if IE8 does support it, IE6/7 will be around for years to come, so that practice of CSS won't be beneficial for a number of years for most designers.

 

[eclipse]

Hi again,

thanks for the link to 24 ways, that will be regular reading from now! (And it's "Big Kev" again! He's everywhere! He's even the guy that's teaching me CSS via Sitepoint tutorials on Lynda.com. The Omnipresent Kev.)

I re-read my post above and it didn't clearly express what I was trying to ask so I did some editing. You might have answered before I edited it.

Basically, how about I just use Joomla for layout stuff and CSS for tarting up the text and background?

Also, regarding IE6 & IE7, anyone ever design websites with a user warning?

"If you cannot see XYZ feature, it's probably because you are using an outdated inferior browser like IE6 or IE7. Please download Firefox for free and you'll be able to use this website properly. I do not see why the development of the whole internet for all of us should be slowed down by Microsoft's inability to keep their silly browser up to date."

(Sorry, just needed a rant).

(BTW — anyone find the new mac keyboards help you type faster?)

 

[angelwatt]

Also, regarding IE6 & IE7, anyone ever design websites with a user warning?
...
(BTW — anyone find the new mac keyboards help you type faster?)

I have a message that appears only for IE7 and lower users (IE8 is fine), that essentially just says "Internet Explorer is not well supported here" and it's a link to my FAQ where I explain why and where they can find a superior browser. My site doesn't take away functionality from IE users though, they're just missing out on some extra design features. I don't go for locking out browsers without good reason.

As far as Mac keyboards, it depends on what you mean by new. My MacBook has a newer laptop than my last one, but I think it has been changed since. Mine is about a year and a half old now, but I don't like the keyboard much more than the previous one. Key hits are much more defined.

 

[eclipse]

Do web-developers here ever get so worked up about people stuck on IE6 and 7 that they'll "campaign" about it, even if it's just writing cranky blogs and trying to steer people away from IE?

Firefox has 20% market share, just wondering if it would be in our developer interests to swing the market that way?
http://en.wikipedia.org/wiki/Firefox

Also, it's amazing how many tutorials on Lynda.com RAVE about Firefox's Web Developer Toolbar! I've also heard a fair bit about Firebug from CSS guys on free tutorials through iTunes. (Mustardseed media raves uses it.)

Keyboard: I'm talking about the new MacPro keyboard which I bought for my old G5. The ultra-flat smooth keyboard architecture works for me.

 

[lucidmedia]

Do web-developers here ever get so worked up about people stuck on IE6 and 7 that they'll "campaign" about it, even if it's just writing cranky blogs and trying to steer people away from IE?

I think that most of us who have been in the business for a while (I started designing and developing for the web in 1995) are pretty much over it or have gotten used to it.

I don't really run into too many huge issues these days coding to XHTML/CSS strict (and I almost never use CSS hacks or browser specific filters). Once you know a few pitfalls things start to be pretty consistent across browsers. (In fact, these days I find more consistency issues with Safari than Firefox and IE.)

A year ago I did the CSS for a large customer-facing intranet that had to work on IE5, IE6, IE7, Safari and Firefox. IE5 was the real problem, and it was a real learning experience. After that, IE6 is no problem!

 

[eclipse]

This is the simplified 3 column xhtml "table" for the page.

<div class="container">
	<div>
 		<div id="menu">
 		⋮
		</div>
 		<div id="content">
 		⋮
 		</div>
 		<div id="sidebar">
 		⋮
 		</div>
 	</div>
</div>

This is the CSS for formatting the page.

.container {display: table; border-collapse: collapse; table-layout: fixed;}
.container > div {display: table-row;}
.container > div > div {display: table-cell;}
.container 	{width: 100%;}
#menu 			{width: 200px;}
#content 		{width: auto;}
#sidebar 		{width: 25%;}

The thing is, I can almost visualize what is going on here. Doing it the other way (as described by Kevin Yank) sounds like it would give me scabies, just to be compliant with IE when the other browsers already cater for this?

Okay, since you’re the sort of discerning web designer who reads 24ways, I’m going to assume you at least considered doing this without using HTML tables for the layout. If you’re especially hardcore, I imagine you began thinking of CSS floats, negative margins, and faux columns. If you did, colour me impressed!

Now admit it: you probably also gave an inward sigh about the time it would take to figure out the math on the negative margin overlaps, check for dropped floats in Internet Explorer and generally wrestle each of the major browsers into giving you what you want. If after all that you simply gave up and used HTML tables, I can’t say I blame you.

 

[memco]

As has been said a couple of years out and css tables might make sense, but the fact that you need to use child selectors and display:table is a bit troublesome still. As for your question, joomla doesn't necessarily have to be driven by any specific layout technique. Since it uses a template engine, you can (if you have skill/time) code your pages using HTML tables, CSS tables, or DIVs. For now, it's probably best to optimize joomla for your needs, which most likely means avoiding CSS tables. Eventually though, you might be able to roll your design into some tables and it will take is redoing some CSS style declarations.

 

[SrWebDeveloper]

Thanks for the example!

 

[eclipse]

Hi Jim,
to specify width of just the left column to be narrower than the right column (or right 2 colums if I made it 3 columns wide), would I have to do something to the left most column class, or can I specify it in the CSS? Say I wanted the whole left column to be about a narrow Navbar and nice image / pattern paning down the page, and then have 2 equal sized columns on the right of that. How would I do that? That seems to be the beauty of the example I provided, but who knows? You might have something cool up your sleeve.

Cheers.


PS: Did you just edit your post? Oh, OK, you like the example above? Heeeeelp! I'm just trying to understand the example I provided, then you provided what looked simpler... then I wanted to know how you customized your "simpler" exampel that I could understand... and then .... everything keeps changing.... (breathe... paper bag.... less coffeee..... breathe).

PPS: In Kevin Yank's example above, what do the DIV's inside the container do?

 

[eclipse]

Hi Jim,
looking at it, I think the example you provided is superior if one wanted to have a table with rows. Kevin's example divides the page into 3 columns in a nice way that lets us customize the width of the columns easily, but your example actually works as a table.

 

[eclipse]

I just can't get it, I just can't get it!

Here's another attempt on a columned page.

Lynda.com tutorial had me using pretty much the same XHTML except the big difference was Lynda used div id=, but when I checked the W3school it said to use div.classes.

I thought ID's took precedence in specificity over classes? Anyway, this is the way w3 showed to set up a few columned home page.

<style type="text/css">
div.container
{
width:100%;
margin:0px;
border:1px solid gray;
line-height:150%;
}
div.header,div.footer
{
padding:0.5em;
color:white;
background-color:gray;
clear:left;
}
h1.header
{
padding:0;
margin:0;
}
div.left
{
float:left;
width:160px;
margin:0;
padding:1em;
}
div.content
{
margin-left:190px;
border-left:1px solid gray;
padding:1em;
}
</style>
</head>

<body>

<div class="container">
<div class="header"><h1 class="header">W3Schools.com</h1></div>
<div class="left"><p>"Never increase, beyond what is necessary, the number of entities required to explain anything." William of Ockham (1285-1349)</p></div>
<div class="content">
<h2>Free Web Building Tutorials</h2>
<p>At W3Schools you will find all the Web-building tutorials you need,
from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.</p>
<p>W3Schools - The Largest Web Developers Site On The Net!</p></div>
<div class="footer">Copyright 1999-2005 by Refsnes Data.</div>
</div>

</body>
</html>

The Lynda.com thing (from memory) said to do it more like this...

<style type="text/css">
div#container
{
width:100%;
margin:0px;
border:1px solid gray;
line-height:150%;
}
div#header,div#footer
{
padding:0.5em;
color:white;
background-color:gray;
clear:left;
}
h1#header
{
padding:0;
margin:0;
}
div#left
{
float:left;
width:160px;
margin:0;
padding:1em;
}
div#content
{
margin-left:190px;
border-left:1px solid gray;
padding:1em;
}
</style>
</head>

<body>

<div id="container">
<div id="header"><h1 id="header">W3Schools.com</h1></div>
<div id="left"><p>"Never increase, beyond what is necessary, the number of entities required to explain anything." William of Ockham (1285-1349)</p></div>
<div id="content">
<h2>Free Web Building Tutorials</h2>
<p>At W3Schools you will find all the Web-building tutorials you need,
from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.</p>
<p>W3Schools - The Largest Web Developers Site On The Net!</p></div>
<div id="footer">Copyright 1999-2005 by Refsnes Data.</div>
</div>

</body>
</html>

Both seem to give the same result?

When do I use what?

 

[SrWebDeveloper]

RE: Tabular looking output via CSS/divs

I posted an simple example of how to make a uniform 2x2 tabular output using only div's and CSS, but it was untested on MSIE and other browsers so I removed it. I added float and clear and now it works fine so I'm reposting, corrected. This example does not deal with complex tables using colspan and rowspan or columns of varying widths. As this is a basic example, it's up to you to adapt this code by setting proper widths and heights, deal with thead and tbody or captions on your own for accessibility issues. I added a 1 pixel margin and padding and border so you can see each cell better, not because you need it:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Table test</title>

<style type="text/css">
#mytable { display: inline-table; }
.myrow   { display: table-row; clear: left }
.mycolumn { display: table-cell; float: left }
.myrow > div.mycolumn { margin: 1px; padding: 4px; border: 1px solid red }
</style>

</head>

<body>

<div id="mytable">
  <div class="myrow">
        <div class="mycolumn">Column 1, row 1</div>
        <div class="mycolumn">Column 2, row 1</div>
  </div>
  <div class="myrow">
        <div class="mycolumn">Column 1, row 2</div>
        <div class="mycolumn">Column 2, row 2</div>
  </div>

</div>

</body>
</html>

This method allows the markup of div's to resemble how you create tables so the learning curve is quite easy for simple tabular output. I posted this to merely demonstrate you don't need many complex lines of markup, third party MSIE hacks/conditionals nor tons of CSS to do something as common as this. This example validates fine even as XHTML strict 1.0, too.