CSSets

CSS & HTML, 4 December 2006, 3 minute read

In this (hopefully) series I will talk about the little CSS tricks that many of you won’t know. Some will be nice pointers, some will be eyeopeners, none will be earth shattering, but they will all be useful.

…the title? Pronounce it ;)

An eyeopener for starters: the `<ul>` is a container too.

Big chance that you’ll find this code being used for a menu:

<div id="navigation">
	<ul>
		<li>Home</li>
		<li>About</li>
		<li>Services</li>
		<li>Contact</li>
	</ul>
</div>

Many, many web designers seem to forget that all tags are containers. Yes, all tags. That includes the <ul> tag. So why would you want to add yet another <div>? there are enough already if you ask me ;). Take a moment to look at this perfectly working, perfectly validating, but very much smaller code:

<ul id="navigation">
	<li>Home</li>
	<li>About</li>
	<li>Services</li>
	<li>Contact</li>
</ul>

Granted, you’ll only save a couple of bytes. But in the end, you’ve produces more readable and clean code.

Incapable browsers bugging you? Find a better position.

On every block container I add position:relative; to the css. It’s the easiest way to slap some sense into IE6 and perhaps even IE7 too. Position:relative; mostly “fixes” problems concerning odd first-time rendering problems, float problems and all sorts of weird things that seem to have no real cause.

At least, that’s what it seems. In reality it just makes sure that your hasLayout is set to 1. HasLayout is an IE property that determines if your container has, you guessed it, layout. So instead of getting headache’s, add position:relative; to every block container you have and you won’t notice problems in the first place.

Start with the right foundation.

Always start your CSS with some basic rules, it will make your life a lot easier. This is my base:

/* ***************************
   GLOBAL RESET SETTINGS
   ***************************/
* {margin:0;padding:0;}
a img {border:none;}
a:focus {outline:0;}
html {height:100%}

That all seems a bit random, so I’ll explain the above line by line

* {margin:0;padding:0;}

the * selector means “all elements”. With this, I’m effectively resetting all margins and paddings on all elements in my html. Begone, evil Browser differences!

a img {border:none;}

Remember back in the day when linking images had a nice blue border? Not anymore.

a:focus {outline:0;}

This is a bit more recent. Firefox adds a dotted outline to selected links. Nothing wrong with that, except for the fact that the outline adds to the width of the element too. So it screws your layout up if it’s very tight. You can use this to remove it. Make sure you have another method of focus to replace it though, focus is there for a reason. (try tab-ing your way through your homepage to find out why.)

html {height:100%}

This one takes a bit of CSS knowledge. For an element to have 100% height, its parent container needs a height, too. If you would just add height:100% to your <body> tag, it wouldn’t work because the <html> tag has no height.

I hear you ask: ‘Then why doesn’t the <html> tag need a parent with 100% height?’. To be honest: beats me. But my best guess would be that your browser uses the viewport as a parent for your <html> tag.

And finally…

You’d expect me to say something about the things I will talk about next time, but honestly I don’t know yet. So instead of doing that, feel free to add a comment. Because even though I like to pretend to know everything -I don’t. If I forgot something, or if you have something you’d like to expand, feel free to do so. :)

CSSets

An eyeopener for starters: the <ul> is a container too.

Incapable browsers bugging you? Find a better position.

Start with the right foundation.

And finally…

Related Posts

An eyeopener for starters: the `<ul>` is a container too.