PreviousNext…

CSS kerfuffle

I am in recovery. As I sit here on the sofa, Groundhog Day on the TV in the background (brilliant film, one of my favourites), doing some work, I ponder the past couple of days. Heck, the past couple of weeks. In short, they have been particularly manic — in quite a good way I suppose. I’ve been working on a new web application in — what else? — Domino. I have no real tips for Domino per se, but I have learned couple of things that it may be useful to share with you, dear techie reader… ;-)

Internet Explorer sucks. It really, really does. There you are, cruising away with a nice layout, some nifty wee design tricks, general all-round CSS goodness, and BAM Internet Exploder goes and buggers it all up. I develop in Firefox, with its standards support, excellent web developer plug-in, and of course the splendid Javascript debugger and DOM inspector.

Pause while Phil Connors tries to save the old man’s life. Gets me every time.

Where was I? Oh yes, IE. So, what have I had to use in this new app I’m working on? Well, there are some conditional comments embedded in one part of the site. Then there’s my wee work-around for a particular instance of the peek-a-boo bug, and it really blows that in 2005 the latest version of Internet Explorer still doesn’t know a damn thing about child selectors. Grrrr.

OK, stay with me here. I have finished my pointless rant, let’s step through a couple of the things I did, in case they will be of help to others out there!

Peek-a-boo Bug

This is a nasty one. The peek-a-boo bug is all about dodgy screen re-drawing in Exploder. Typically this occurs when you’re dealing with list entities rendered over some kind of graphical / CSS-driven background. In the site I was rendering a list within a simple div with a border all around it. As the mouse hovers over the links, the borders start to disappear, and come back in random sequences when the page is refreshed. A huge pain. The fix? A really simple one. In the CSS for the entity surrounding the list (in my case, the bordered div), ensure you’ve set a line-height attribute (1.2em worked well for me). That’s it! I believe others have had success with adding position: relative to the ul, ol or dl entities you may be using. Didn’t work for me, but YMMV.

Phil wakes up for the nth time to I Got You Babe. This time, Rita is in his bed, and it’s tomorrow! Woo hoo!

Conditional Comments

OK, next up. You can only embed conditional comments in your HTML body, they don’t work in separate stylesheets. They only work in recent versions of IE on Windows, all other browsers will ignore them. Here’s what a typical set look like (with obligatory shouty Poole narrative):

<!-- There now follows a conditional comment. Only for IE5.x + -->
<!-- This is to resolve an IE-specific positioning CSS bug -->
<!-- See the stylesheet for more under '#sidebar' -->
<!-- I feel so… DIRTY -->
<!--[if IE]>
<style>
	#sidebar {margin-top: 0.1em;}
</style>
<![endif]-->

Grim, isn’t it? But hey, it works, and you get the idea.

Child / Pseudo-Class Selectors

Stylesheet code like this can be really handy. I really wanted to use this today:

#a-great-list-thing li {
	border-left: 0.01em solid #fff;
}

#a-great-list-thing ul>li:first-child {
	border-left: none;
}

I wanted to add a padded left-hand border to the left of each item in a (horizontally-presented) list, thus mimicing a pipe character between each item. However, I wanted to skip this styling for the first item: that would look odd. The code above provides an elegant(ish) solution to this, but guess what? It doesn’t work in IE: IE can use selectors, but not child selectors. No great work-around this time I’m afraid. For me, the fix lay in Domino: the list in question is being generated dynamically in the Domino application — there can be one item in the list, there can be ten. Some jiggery-pokery with @Subset and @ReplaceSubString (this site is in R5) sorted this out for me (how I yearned for a simple ND6-style loop. Sigh).

Nice navigation

To round up on a high (well, a high for me anyway!), today I cracked another styling issue: that of providing pleasant, rounded tabs for the site navigation, when the menu options are defined dynamically as in-line lists. You can’t do rounded things in raw CSS for all browsers, you have to use graphics (Gecko relies on -moz-border-radius directives, but that’s no good for mainstream use). By far the best cross-browser solution I have come across is contained in the article Sliding Doors of CSS by Douglas Bowman over at A List Apart. Read, tweak, and you’re done. An excellent (and elegant) solution to the problem.

Further reading:

But, you know, it’s all just a hack. It feels so wrong :-)

Comments

  1. Ahhhh… welcome to my world. Who likes IE anyway?Joseph Pollone#

Comments on this post are now closed.

About

I’m a developer / general IT wrangler, specialising in web apps, the mobile web, enterprise Java and the odd Domino system.

Best described as a simpleton, but kindly. Read more…