Category: CSS


One of my best clients came to me this week with a large products page, and asked me to reduce the size (the number of characters in the HTML page) for him.

The page was full – it runs in a frame, and has a limit of 50,000 characters. They were already at 49,300 and had many more products to add.

I removed the table structure (a feat in itself! it was a nasty huge nested table) and implemented a lot more CSS, replacing the ubiquitous font tag and other similar elements.

My new page has 36,000 characters. I think that in itself is a pretty good argument for why tables are not a good idea for layout work.

This morning I went hunting on Google for a good example of CSS-only rounded tabs. I found quite a few but really liked the simplicity of the CSS code in Exploding Boy’s nice sheet of tabbed menus.

I picked ‘K’ and it took me about an hour to implement this and change the graphics colors to better fit my design. It’s working nicely in FF, IE 6/7, Safari, Opera and Netscape.

Centering a block of text (or anything else) vertically within a div has been a longstanding problem where tables seem to have the advantage.

I recently came across this article about vertical centering and tried using the bottommost code snippet today with good results in FF, IE6, Opera and Netscape. It’s a bit clumsy, but it does the trick there – however this doesn’t work in IE7.

I wound up using the topmost snippet – with hacks, which I don’t like using, but I was pressed for time this morning… I’m going to revisit this when I have an opportunity to see if I can figure out what to do about IE7 and the non-hacked example.

I read a post in a mailing list today that made me think. I know that the homepages for the big search engines are full of errors. They don’t validate – and it doesn’t matter. They’re not hurting for it. It makes not one iota of difference as far as search engines go whether code validates.

I try (I don’t always succeed, but I always try) to make sure my code is valid for both HTML and CSS. Why do I do this? Because I feel it’s the right thing to do.

I know that there are usually many ways to accomplish the same result when you’re building a web site. I get that, and I like that. But I with my idealist viewpoint believe that there are ways that are more clean, less intrusive, easier to later understand and change than others.

Take for instance CSS hacks. When I first began using CSS heavily, I used hacks. But since I discovered conditional comments, I very rarely use a hack (the last one was about four months ago and specific to Opera). I like conditional comments because they seem to me to be a cleaner, more correct solution than toying with presentational elements in CSS that may later reveal incompatibilities as new browser versions are released (look at the list of CSS hacks that stopped working in IE7).

I met a designer last week whose work I love – he’s a very talented individual and a standards advocate as I am. We were talking about a common issue in CSS and I asked how he got around that – he agreed that conditional comments were the way to go but that he defined them within the stylesheet and not in the actual HTML page. He whipped out his laptop and showed me what he meant.

I looked at the code and thought ‘that’s a hack’ even as he said ‘this is a conditional comment.’ He supposed that a purist wouldn’t agree with his labeling.

I’m a purist. I think hacks are messy, they’re more like bandaids than real solutions. For me, conditional comments are the cleaner fix.

I validate because I care very much that my code is clean. I define clean, in part, as being error-free, and validating helps me accomplish that, most of the time. I know it doesn’t matter to search engines, nor to the vast majority of my clients. But I consider my work as a web designer/developer to be a craft – and it matters to me.

All browsers have built-in, predefined presentational features that apply to the rules we all commonly use. For example, links are blue and underlined by default… Everyone’s seen this.

A colleague pointed me to this interesting post by Eric Meyer  about clearing out all of the default presentational effects that browsers apply to documents with no specific CSS styling. This post in turn refers to Tantek Celik’s post about his file ‘undohtml.css’ that strips out these defaults.

I’ve actually been using most of the elements described in Tantek’s file for quite a while now in the top of all my CSS files – they were collected over the last two years as I ran into problems. But it’s nice to have it in a separate file and more complete than my own version.

Today I’m coding a site that needs little ‘TM’ text attached to all the product names. I wasn’t sure how to do this but Wikipedia to the rescue:

/* keep superscript text from breaking the line-spacing */
#bodyContent sup {
font-size: smaller;
vertical-align: baseline;
position: relative;
bottom: 0.33em;
}

This code plays nicely with FF, IE7 and 6, and Opera.

© 2012 position: relative; All rights reserved. Powered by WordPress.