CSS tips: Widths calculations, and links with icons

May 9, 2008 on 1:20 pm | In General |

I haven’t posted in a while, so let’s see if I can make up for that by posting two different CSS tips today.

These are more on the intermediate level side. If you’re an advanced CSS developer you may already know about these. Today I bring you:

  1. Elements’ widths calculations in CSS under different browsers (most importantly, the difference between IE and Firefox).

    2. hotel furnishing in Bulgaria

  2. компютриBest method to implement links with icons next to them.

4 Comments »

RSS feed for comments on this post. TrackBack URI

  1. If you really want to be efficient, why not just do:

    a.linkicon {
    background: transparent no-repeat scroll center left;
    padding: 0 0 0 20px;
    }

    You get to save those unnecessary bytes. /sarcasm :)

    Comment by Thaya Kareeson — May 9, 2008 #

  2. You should probably mention the fact that the IE box model bug only applies to IE5 and earlier (assuming you’re in standards mode), whose market share is currently at around 1%. Personally, I think that’s low enough that I don’t even bother with workarounds or hacks for it anymore.

    Comment by aqhong — May 9, 2008 #

  3. aqhong: You are right. In IE6 and 7, if a DOCTYPE is defined, it should have no problems. I brought this up because I happen to be working with embeddable widgets code lately and I have to generate HTML that works the same way on any web page outside of my control. (i.e. potentially no DOCTYPE declaration)

    Comment by Bigi — May 10, 2008 #

  4. Thaya: Good one :) On the same note, font-style, font-weight, font-size, font-family (and more) can also be shortened into one “font” property.

    Comment by Bigi — May 10, 2008 #

Leave a comment

You must be logged in to post a comment.

Powered by WordPress with Pool theme design by Borja Fernandez. Entries and comments feeds. Valid XHTML and CSS. ^Top^