Grids and CSS Frameworks

Last year, I finally decided it was time to start designing on a grid. Imagine that! Using a design grid for websites. In the old days of two- or three-column layouts, you didn’t really have to worry about that.

But today, it’s all about Web 2.0 (whatever that means to you), and static grids are so ’00s-y. To take advantage of everyone’s bigger LCD monitors, you have to explore different column layouts, often within the same page.

So, with the latest project, I’ve designed the site on a 16-column grid (using Nathan Smith’s 960 template).

The big trick, though, is to make the markup and CSS not a complete pain in the ass.

My strengths don’t exactly include planning or coding; I’m too fly-by-the-seat-of-the-pants to carefully think all the way through something really complex. So I’d started laying out the templates for the site with my gonzo more-or-less best practice styling (there are many opinions on what constitutes “best practice,” and I find compromise is usually required to get the job done — never mind that it already takes 10-20% more time to debug for IE6).

A couple weeks ago, I discovered the Blueprint CSS Framework, and from there, the BlueTrip Framework. Thank Zeus for clever style monkeys.

I’ve adapted their 24-column grid for my 16-column grid, and added a few other customised layout options. I’m still scratching my head over padded columns inside boxed divs, as well as equal-height column borders, but those are stories for another day.

Today, I just wanted to thank the Blueprint and BlueTrip folks. Cheers!

Absolutely Positioned element disappears in IE6

This bug is not unlike the Duplicate Rendered Characters in IE 6 that I documented earlier, having to do with IE6 bugginess around floated elements near absolutely positioned elements.

PROBLEM:
I’ve got an absolutely positioned list item at the end of a bunch of floated list items.1 In between the first floated items and the absolutely positioned items, I have another block.

• The blue blocks were floated into place.
• The red blocks are nested inside blue_block_2.
• Red blocks 1 to 4 are floated into place.
• red_block_5 has to be positioned absolutely, otherwise it mucks up the elements in blue_block_3.

Everything looks good in Firefox, Safari, Opera, Chrome, IE7, and IE8.

But wait! That’s right. IE6 needs to suck up more precious minutes in my dwindling life supply; it hides red_block_5.

Using the IE Developer Toolbar, I can make the block reappear by typing…well, anything into the style attribute: zoom, display, etc.

But when I try any of these in the IE6 stylesheet, nothing changes.

SOLUTION:
Craig Buckler at SitePoint explains that IE6 hides absolutely positioned items if they’re coded right before or right after floated sibling elements. He suggested that adding an empty, static element (such as <div></div>) would make IE6 pop the missing element back in.

Sadly, this did not work for me. But thanks to one of his readers, Paul O’B, I found a solution that worked in my case. In the IE6 stylesheet, I added clear: both to the red_block_5 element. I also had to change the left positioning value, but that did the trick.

Happiness.

---

1. Many snarky commentators love to ask things like “why would you need to use absolute positioning anyway? Why not change the markup so the elements fall into place inside the appropriate containing element?”

My response is that my page is marked up the way it is because in the absence of stylesheets and JavaScripts, the content still flows logically, and all the elements that should be grouped together are grouped together.

“So why don’t you change the design to keep the elements together if they’re supposed to be together?”

Because visually, there are other elements that are more important, and my red_block_5 element can be shunted in favour of other visual hierarchies. Basically, there’s another element at the bottom of blue_block_3 that logically belongs within blue_block_3 (vertically), but also flows naturally after red_block_4 (horizontally).

So my case may be very particular, but I don’t think so. Besides, I don’t think I should have to give up either markup logic or visual logic just to make IE6 happy. That’s asinine. IMHO, IE6 just needs to go away.

Select tag z-index glitch in IE

I thought this was fixed for IE7, but not so.

Set Up:
We have a page with 3 tabbed divs; only one is displayed at a time, while the others are display: none. The default div that displays on load contains a select tag which changes the content in a table inside that div based on date. The second div displays a dynamically generated table in standard HTML. The third and last div contains a Flash movie.


Problem:
In IE 6 & 7, when the second tab is clicked to hide the first div and display the second div, there is a mystery horizontal rule (at the same height as the top of the table in the first div). This line seems to be on the top layer, and causes anything below the line to be unclickable.


Solution:
Quickie: remove the <select> tag and use something else (custom slider or create the select menu as a DHTML drop-down instead).

This sounds like it could be fixed with the jQuery iframe method, but we haven’t tried it yet.

But what I want to know is why the select still creates the bug when it’s containing element has display: none. Does display: none mean that all the included elements are still lurking underneath? This makes no sense since normally, display: none causes the page to change size.

Background images in table rows: update

For a change, this isn’t about IE5-6 alone. In trying to put a table form together, using a background image in the table row would be the easiest solution for me. Sadly, this is not a supported function in:

• Safari (including version 4 Beta)
• OmniWeb (up to 5.9.1)
• iCab (up to 4.1.1)

Which makes the form problematic.

Ah well. Back to the drawing board.

Opacity in IE6

The Issue: First problem is that text set with opacity looks like crap. It’s to do with the anti-aliasing (yes, even with ClearType enabled).

Second problem is that even when you use


.opaque {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70);
}


The opacity doesn’t kick in.

The Solution: For problem 2, add zoom: 1; to the IE-only rule above.

Happiness ensues.

As for IE6 anti-aliasing ugliness, I just wipe out the filter: filter: none;. So you don’t get opacity in IE6. Not the end of my world.

According to stats for the website, at least a quarter of the IE traffic is still using version 6. UPGRADE, PEOPLE! DO IT! DO IT NOW!

The bane of my existence…

Italics in IE6

The Issue: Italics force their container slightly wider in order to show the overflowing slanting edge of the letter when the container (such as an <em>) does not have a set width.

This happens to break my P.I.E. (Positioning Is Everything) layout.

Happily, this is a well-documented bug at P.I.E.

The Solution: Because I no longer care about IE5, let alone IE5.5, I use this:

<!--[if lte IE 6]>
em, .italics { overflow: hidden; zoom: 1; }
<![endif]-->

Happiness ensues.

CSS drop-down/fly-out menus and IE select elements

IE5-6 renders select menus on the top-most layer, no matter how you set up the HTML or how you declare the z-index.

The last time this issue came up for me, I included a javascript that would make the select element disappear when the overlapping drop-downs were triggered. This worked fine because the select menu was the same width as the drop-down and so it was completely covered. Now with a different site, this is an impractical option, mainly because there’s no telling where the select menus will end up or how wide they’ll be.

I’m trying to meld a bunch of CSS drop-down/flyout solutions into one mass. Here are all the features I need:

1. Works in IE5-6, IE7, Safari, Mozilla/Firefox
2. Flyout sub-submenus
3. Drops over select menus in IE5-6
4. Includes hover margin of error (mouse forgiveness when moving from menu to sub-menu)
5. Simplest HTML = easiest maintenance

I’m looking at the combined ADxMenu with the WCH script from aplus.co.yu. Haven’t finished testing yet, so I’ll update this entry when it’s all working.