CSS

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: , , , ,

No more javascript mouseovers? CSS can do it!

Thursday, September 18th, 2008 | Business | 2 Comments

I grew up in the early HTML world with Tables, Font tags, and transparent pixels.  As such, doing mouseovers always required a basic javascript function to preload the images, and swap on a mouse over.

That still works, code doesn’t look too great, but it works.

On the flip side we now have the option to use CSS to handle all mouse overs. Yes, the simple A:hover style can be very effective in enabling things like this.

Simply setting the indent of the text (since there will be placer text will remove that pesky text from view).

Your new mouseover link image looks like this:

<div class="goButton"><a href="somelink.html">Go</a></div>

And your CSS can now just have:

.goButton a {background:url(images/someGoButton.gif) top left no-repeat;display:block;height:20px;width:20px;}
.goButton a:hover {background:url(images/someGoButtonOver.gif) top left no-repeat;}

Easy solution, and it allows faster code execution, more friendly when viewed in a basic text only browser (with no CSS / images downloaded or applied, it just says “go” instead).

Tags: ,


Please share, it makes me happy:

Subscribe to Email Alerts

Follow Me

Follow seangw on twitter

Archives

Categories

prestashop theme

virtuemart template