ejohansson.se » css

Highlight linked comment with css and :target

Erik Johansson — Tue, 14 Feb 2006 00:17:46 +0000

:target pseudo class

By using the css pseudo class :target it’s possible to style an element with the id that’s given after the # in a url different. This technique is used in the Subversion FAQ where the current question is marked with a red border.

Another good place to use this, is within your blog. By adding the following three lines to your styles.css your readers will be able to know exactly what comment you (or someone else) are linking to.

ol.commentlist li:target {
	border: 1px solid #555;
}

This code will give you the behaviour show in the image. To see the differences live, this link gives you a highlighted comment and this gives you the normal colouring.

Unfortunely, as about any other interesting technique, this doesn’t work in IE. It is of course possible to get a similar effect in IE, but that involves javascript.

Rounded corners the easy way

Erik Johansson — Tue, 07 Feb 2006 00:29:37 +0000

Rounded corners

Would you like to have boxes with rounded corners on your site? Would you like them to work without having to specify an absolute size for the boxes? Do you want the quick and easy fix which doesn’t require a lot of extra

? Are you satisfied if the solution works for everybody except the approximately 85% of internet users which uses a non-standards compliance browser?

If you answered yes to those questions, you should continue reading.

First you need to get the images that will act as the corners.

If you have a different background color than I do, change all the images to reflect that.

Then, assuming the box that you wish to “round” is encapsulated in a

, all that you need to add to your css-file is this

.sidebarbox:before {
	display: block;
	line-height: 0px;
	background: #fff url(images/box_top_right.png) top right no-repeat;
	content: url(images/box_top_left.png);
}
 
.sidebarbox:after {
	display: block;
	line-height: 0px;
	background: #fff url(images/box_bottom_right.png) bottom right no-repeat;
	content: url(images/box_bottom_left.png);
}

If you are using a standards compliance browser, you should be able to see the result in the sidebar to your right. If you use IE, you have to settle with the image at the start of the post.

If you need it to work in IE as well, there are plenty of solutions on the internet. Use the search box to the right and get funky with it. If you find a good one that doesn’t require you to specify the absolute size of the boxes, let me know.

More information

IE renders better than Firefox…or?

Erik Johansson — Wed, 01 Feb 2006 11:43:41 +0000

I was about to write a post on how Internet Explorer rendered a page in a way that seemed to be more correct than the way Firefox did it. Luckily I did some CSS specification reading first, and thus saved myself the embarrassment of making the controversial statement that IE renders better than Firefox and then being wrong.

But let’s start with the problem. As seen on my site I have a layout with a wide main column and a thinner sidebar. The layout is (or was, as I redid it to make it look better in IE) made with code similar to the following

Test


	Text inside class="page"
	
		Text inside class="sidebar"

The behaviour in IE is to render the sidebar with the width calculated using the width of

as reference. This results in an effective width of 21% * 77% = 16%. Firefox on the other hand uses the root element ( or one of its ancestors) which has a width of 100%. This gives an effective width of 21% (which is what I intended).

Intuitively IE’s behaviour seems to be the correct one: the width is calculated using the nearest bounding element (i.e. containing block) as parent. But, as can be seen in section 10.1 in the CSS specification, there is a special case when using position: absolute

If the element has ‘position: absolute’, the containing block is established by the nearest ancestor with a ‘position’ of ‘absolute’, ‘relative’ or ‘fixed’ [...]

Therefore, in this case the containing block should be the root element (or initial containing block as the standard calls it), which is what Firefox uses.

So, too sum up: Firefox and Konqueror follows the specification; IE and Opera (surprisingly) does not.

For the sake of completeness (and not wanting to bash IE and Opera too much), I’ll better mention this (from the Abstract)

CSS 2.1 corrects a few errors in CSS2 (the most important being a new definition of the height/width of absolutely positioned elements [...]

So, IE and Opera are proably only adhering to the old CSS 2 standard, instead of the new revision, version 2.1.

Once again, open source and its mantra release early, release often has proven its superiority!