Richard York

Web Developer, Author, and Artist

A Shrink-to-fit Epic: You Too Can Make IE Your Bitch

A Shrink-to-fit Epic: You Too Can Make IE Your Bitch

February 8, 2008 by Richard

Yes, you too can make IE your bitch, if you're determined and crass enough.

Throw your sensibilities about logic and standards out the window, because you don't need them here.

Recently, I set out to implement a simple, seemingly remedial technique for custom borders and backgrounds on tabs in none other than everyone's favorite browser, IE6.

It's worth mentioning, IE7 also gave resistance to this technique, but was slightly easier to whip into logic.

A battle of wits was to ensue. Would I let it defeat me? Would I let it send me back to the bowels of table layout or less-semantically reasonable markup? No, damn you, IE, you will not take me without a fight!

This technique is a rather easy exercise in floating elements and custom borders... I set up a list... not unlike this one:

<ul id='tmpProductTabs'> <li id='tmpProduct-Overview' class='tmpProductTab tmpProductTabSelected'> <div class='tmpProductTabWrapper'> <div class='tmpProductTabTopOuter'> <div class='tmpProductTabTopMiddle'> <div class='tmpProductTabTopInner'> </div> </div> </div> <div class='tmpProductTabOuter'> <div class='tmpProductTabMiddle'> <div class='tmpProductTabInner'> <span>Overview</span> </div> </div> </div> </div> </li> <li id='tmpProduct-Warranty' class='tmpProductTab'> <div class='tmpProductTabWrapper'> <div class='tmpProductTabTopOuter'> <div class='tmpProductTabTopMiddle'> <div class='tmpProductTabTopInner'> </div> </div> </div> <div class='tmpProductTabOuter'> <div class='tmpProductTabMiddle'> <div class='tmpProductTabInner'> <span>Warranty</span> </div> </div> </div> </div> </li> <li id='tmpProduct-ApplicationNotes' class='tmpProductTab'> <div class='tmpProductTabWrapper'> <div class='tmpProductTabTopOuter'> <div class='tmpProductTabTopMiddle'> <div class='tmpProductTabTopInner'> </div> </div> </div> <div class='tmpProductTabOuter'> <div class='tmpProductTabMiddle'> <div class='tmpProductTabInner'> <span>Application Notes</span> </div> </div> </div> </div> </li> <li id='tmpProduct-Firmware' class='tmpProductTab'> <div class='tmpProductTabWrapper'> <div class='tmpProductTabTopOuter'> <div class='tmpProductTabTopMiddle'> <div class='tmpProductTabTopInner'> </div> </div> </div> <div class='tmpProductTabOuter'> <div class='tmpProductTabMiddle'> <div class='tmpProductTabInner'> <span>Firmware</span> </div> </div> </div> </div> </li> </ul>

OK, so that's a lot of markup for a simple aesthetic enhancement.  Namely, I just want rounded corners on my tabs!  For the love of God, why does it have to be such a chore?

I covered a similar technique in my second book, CSS Instant Results, but admittedly, it was just a tad more remedial.

To get the custom border effect, I divide an image created in PhotoShop or your graphic editing environment of choice into nine slices, for the top left corner, top middle border, top right corner, and so on.  In HTML, I need three block-level markup elements for each slice, and depending on what copy is being inserted a separate inline or block container for the actual content going in.  Then, using nothing more than CSS background properties, I specify a background image for each markup element.

Still with me so far?

So, in this tidbit, I have the top border elements prefixed tmpProductTabTop.  To make the slices work, all you do is put the left slice in the outer element (non-repeating, positioned, ahem, top, left), the right slice in the middle element (non-repeating, positioned, top, right), and then in the inner element, you specify the top middle slice, and repeat it along the x-axis, positioned to the top.  Then you set the left and right margins of that element equal to the widths of the left and right sides, respectively.  Finally, and this is important, if the element has no content, you need to give it a height equal to the height of your slices, otherwise it will be invisible.

Semantically speaking, this is all completely meaningless.  It clogs up your page size and bandwidth, but it's pretty safe, in my opinion.

Now, for our old friend IE.  To make this lot into tabs, you float the <li> elements, and given them a bit a margin on the left or right sides to separate each tab.

When you float an element, its sizing model becomes shrink-to-fit, aka shrink wrap.  The element expands only enough to accommodate its content.  However, IE has this mechanism called layout, a vile, evil device designed to torture web developers.  Whenever it is triggered, Microsoft actually slaughters a baby kitten, and the world turns just a little more gray.  Layout is triggered when you use a select handful of properties, one of which is explicitly setting a width or height on an element.

In terms of floated elements in IE, when a floated element contains a block element, and that block element has "layout", the floated element's head spins off and it switches from shrink-to-fit mode, to expand-to-fit (against the standards, of course).  In other words, your layout is screwed, your kids start doing drugs, and Bob's your uncle.

In my case, the little, completely logical thought process of giving that inner element an explicit height wreaked havoc with my layout.  How stupid of me to consider that a possibility...

Sigh...  but... once you know of this evil plot, you too can overcome it with a quick well-thought-out flank of the enemy's position.  Instead of height, set the padding.  Padding will not trigger layout.

Ah, but Richard, my layout, it's still screwed.  Worry not!  For there is more for you to learn!  If your sliced images' height is less than the default font size or line-height, you will have to zero out those properties as well to get layout serenity.

But wait, my elements aren't even visible!  For the love of all that's holy, give each element a relative position...  and they will materialize again.

Thankfully, these woeful requirements do not affect the rendering splendor of better browsers.  You may be left with some minor aesthetic glitches in IE6, however, if that is the case use the star html hack to fix them.

I would like to share the actual CSS with you, but I'm too lazy to format it, and I don't yet have a code formatting algorithm for this nifty blog.  If popular demand requires it, I shall accommodate.

See also: http://www.satzansatz.de/cssd/onhavinglayout.html

Go in peace.

 

Comments

There are no comments posted at this time.

Leave a Comment

Simple HTML is allowed: <code>, <b>, <i>, <u>, <var>, <strong>, <em>, <blockquote>, <ul>, <ol>, <li>, <p> (no attributes). All spacing and line breaks in your comment will be preserved.

* All comments are moderated and are subject to approval.
Your comment will appear once it has been approved.
Posting multiple times will not expedite the approval process.

Archive

© Copyright 2014 Hot Toddy, All Rights Reserved.