Table

CSS3 Layout Structure

Monday, November 10th, 2008 | Business | No Comments

Looking over a few articles, I ended up on CSS Advanced Layout Module, a Working Draft for CSS3 on w3.org.

We’ve covered some changes to HTML/CSS parsing in IE8 that will make some standard web layouts much simpler to represent in CSS, CSS in IE8 will support “tables”, fixes problems in CSS.

The new document addresses, in a different method, the problem of laying out tables as most websites are built.

Again, standard CSS makes it difficult to allow text to push the template in the proper directions.  Pushing itself is fine, however the way the rest of the template adjusts to the content — normally doesn’t react as a end user would expect.

The new document details a way to dictate display in a template.

The first interesting point is the document proposes a way to define the rows in a display.  The example provided defines a container, DL, which has a display of “ab” “cd” (in that order).  This means that cell A is top left, B is top right, C is bottom left, and D is bottom right.  This makes life so much easier.  To follow, the elements inside DL are defined as, for example, “#sym1 { position: a}” and “#lab1 { position: b}”.  Suddenly tables are much easier to work with.

Secondly, this opens up functionality the draft has addressed.  The ability to change the display to move the document from 3 columns, to 1 column / 3 rows.  By defining “@media all and {max-width: 500px}” the draft identifies the ability to change the “ab” “cd” to “a” “b” “c” “d”.  Adjusting for a mobile browser, or other alternative browsers (maybe iframes friendly?).

Additional concepts addressed in the draft:

  1. Overlapping divs with the earlier display methodology
  2. Table like declarations of width, wrapping, etc
Lets hope this gets passed and incorporated (or just incorporated into a browser, as browsers seem to be slightly ahead of w3.org in terms of accepting drafts).

Tags: , , , , , , , ,

CSS in IE8 will support “Tables”, fixes problems in CSS

Wednesday, October 22nd, 2008 | Business | 1 Comment

There’s a great article at Digital Web Magazine, Everything You Know About CSS Is Wrong.

One of the problems that has always plagued CSS is absolute positioning, relative positioning, and the need to set things up like a “table”.  By that I mean setting up three divs to look like the following:

 

In the image above you will see the classic problem, code for a talbe structure like this would look something like:

<div class="outerContainer">
<div class="textContainer">... longer text ...</div>
<div class="textContainer">... shorter text ...</div>
<div class="textContainer">... shorter text ...</div>
</div>

The problem here, being that if the first text container grows, we want the other 2 containers to grow with it.

Obviously, we could specificy a specific height for the textContainer class, and they would all match.  But what if the first container copy grows, or maybe the copy in the 2nd or 3rd container grows longer than the first container.

This becomes even more complex when specificying multiple rows of textContainers, where there are vertically spanning cells as well.

In traditional “non-css” HTML this was done simply through tables, very simply actually.  Now that everyone has turned to CSS to make page sizes smaller, make styling effective, and increase flexibility of layouts — we try to avoid tables unless we are presenting a .. Table.

Normally I would have created a clever background image that has a top, bottom (both divs above and below the textContainers), and a tiling vertical background to appear like all columns have the correct sizing (when in fact they don’t).  Effectively removing control over each textContainer’s background, and the main container’s background from the CSS and putting it into a series of images.  

It worked but we sacrificed flexibility.

Take a look at the article, again, Everything You Know About CSS Is Wrong, as they detail how IE8 aims to fix this behavior through a series of CSS display properties.

Tags: , , , ,


Please share, it makes me happy:

Subscribe to Email Alerts

Follow Me

Follow seangw on twitter

Archives

Categories

prestashop theme

virtuemart template