Category: "XHTML/CSS"

CSS: Fixing overflow: hidden in IE

Internet Explorer 6 for windows has been giving me a hard time with expanding fixed width or fixed height boxes (divs) in the most non standard fashion...

The trick would be to apply overflow: hidden to the div to force the browser to hide any excessive content (text, images) instead of expanding the container. But IE6 will not always do as told... :(

I found out today that the trick with IE, is to apply a fixed width or height property to the same container (div) as the overflow property, and then, IE will always crop the contents as expected.

Note: you can specify widths and heights in ex, em or % (not just px). So it's only "fixed" in a relative manner.

PS: In some cases, you may want to consider the non standard IE CSS property word-wrap: break-word; This will break words too long to fit into the fixed width. IE only and non standard...

PNG alpha transparency in IE

Here are a few solutions to the same old IE/PNG issue, all revolving around the same hack: using JavaScript to replace IMG tags containing PNGs with a SPAN or a DIV into wich the PNG is filled using the IE proprietary AlphaImageLoader image filter.

It works... in a very disgraceful manner (try it with 200 PNG icons on the same page!)... and I don't think it degrades correctly to the ALT text display if images don't get loaded for some reason. (Not to mention CSS side effects an the rest which is usually documented along with each hack).

XHTML/CSS heights (or depths) of geekdom :))

From htmldog.com:

Q: Why did the XHTML actress turn down an Oscar?
A: Because she refused to be involved in the presentation.


Q: Why was the font tag an orphan?

A: Because it didn't have a font-family.


Q: Why do CSS designers have too many children?
A: Because they employ lots of child selectors.


Q: Why was IE5's 3-metre wide cell in the insane asylum smaller than IE6's 3-metre wide cell?

A: Because the width of the cell included the padding.


Q: Why was the XHTML bird an invalid?

A: Because it wasn't nested properly.

(And I laughed a couple of times ;) )

(I don't believe in) Web Standards (no more... but I wish I still had faith!)

"Web Standards"... that definitely sounds cooler than it really is...

At first we had HTML and Mosaic... Then came Netscape and Microsoft with their proprietary extensions... and so came the need for standards. We got several versions of standardized HTML, but still varying implementations (IMG align anyone?).

Then came some "really really" standard method to iron out rendering differences: Cascading Style Sheets! Well... another failed attempt: people tweak them even more than standard HTML and the rendering differences get even worse. So now, we have a collection of dirty tricks to apply different CSS to different browsers.

Okay, forget that; we have an even newer standard now: XSL. You just send pure and clean XML to the browser. Then you let the browser reformat it with an XSLT template. PLEASE! XSLT implementation differences are just as problematic as with CSS... and finally no more than with plain HTML! And regarding IE, it's definitely too slow to be really useful! >:XX

So today, I really wonder why we go through all this pain... Sending different presentations in plain HTML (okay, let's say XHTML+CSS for bandwidth and maintainability optimization) was faster than desperately trying to find the "compatibility spot" in a single "standard compliant version"! :|

Not to mention there are still old browsers that do not support a lot of standards out there... and there are more and more alternative browsers (on either desktops, appliances or mobile devices...) that all support standards in their very own way! :(

What can we do? I mean pragmatically! Apart from condemning everyone that doesn't comply 100% to the standards (just a few millions anyway...).

I think we need to remember those "best practices" we had a few years ago and get back to something like this:

  1. Identify most common targets (browsers/devices) and provide them with a specific+optimized presentation (CSS/Flash/whatever). The more targets you can handle with compatible web standards, the better. But don't forget to test all those targets! You'll undoubtly encounter nasty surprises on some of them... Note: contrary to popular belief, most common targets and their "market share" largely depend on your audience!
  2. Provide at least one "safe" presentation. One that is guaranteed to be readable by almost anyone. Alternatives would be good here: maybe one text only (HTML 2.0) and one with basic CSS and images that makes it just a little more attractive (but still avoiding any CSS/Flash showing off!)
  3. Provide a manual switch between version for the times when the user uses a browser that can do more or less than we had expected. (It would be wise to always bet on less, but you'll inevitably make false assumptions at some point.)
Okay, so what's new here? Those of you running corporate sites might think they already do that. You may want to check again: are you sure you didn't stop at step 1? :?:

Now, for personal sites... I completely realize that providing multiple versions will sound like crazy to many of you. How can I expect you to update content concurrently in several files? Well... I don't! Any hosting provider nowadays will let you use dynamic page generation (one content, several presentations). I'll get back to this topic later...

CSS is no cure for layout techniques abuse

Browsing the web for CSS related info often turns out to be a painful search through naive CSS glorification and anti table propaganda... :-/

So I always find it very refreshing when I stumble upon a more balanced article like Sitepoint's "Exploring the Limits of CSS Layout":

For better or worse, the vogue of Web design has evolved to favour a layout similar in style to a newspaper. Common design elements include:

  • a header and footer that each spans the page horizontally
  • content constrained by page width
  • vertical scrolling is acceptable, within reason
  • navigation and secondary content in vertical columns next to the main content

That last one is the real kicker. The sad reality is that the current CSS specificaton (CSS2) was not designed with multiple columns of content in mind. As a result, just as Web designers have always had to abuse HTML tables to achieve complex page layout, they must now abuse CSS positioning to achieve those same ends.

Read more »