Please note that you may have been redirected (you might like to make a note of the URL in the address bar of your browser and update accordingly) This is a permanent archvie but is no longer actively maintained. Please visit http://joshuaink.com for the latest updates.

Your favourite CSS Hacks

Tuesday December 21, 2004

I am working on a wee project with Gordon Mackay and Ian Main. Not a paid project you understand, just a little idea we have had brewing for a while that we are going to try and find some time to complete next year and release for the greater good of humanity, ahem!

Anyway, to get to the point, we would like to compile a list of CSS tips, tricks and hacks as part of said project.

If you have a spare minute maybe you could add your favourite tip, or a good hack you use often to fix things and a link to where you found out about it.

It doesn't need to be an obscure trick either. So someone can add the box model hack if they like.

Your help would be greatly appreciated and you will, I am sure, receive your reward in the afterlife.

  1. John Oxton

    1341 days ago

    I’ll kick off with one of my favourites, the IE Doubled Float-Margin Bug. Whereby floated elements in Internet Explorer do strange and nasty things with the margins!

    Solution found here

  2. WillB

    1341 days ago

    I only recently came across the underscore hack.

    Apparently it is allowed in the CSS 2.1 Spec. Quite handy if you want to isolate IE5+

  3. Rob Mientjes

    1341 days ago

    I really like the star html hack (* html * { }), which is only used by IE.

    Explained here.

  4. Andrew Hume

    1341 days ago

    Opera float bug within absolutely positioned elements. They don’t. Element needs an explicit width.

    See here

    Although I’ve heard that is fixed in a new beta, it’s still my favourite.

  5. Moises Kirsch

    1341 days ago

    Instead of using the typical box model hack I started to use something based on an idea that I read somewhere…

    [div class=”box”][div]Some content here[/div][/div]

    then you apply the actual size to the class box and the padding, margin and borders to the internal div creating just one clean and valid CSS code.

  6. John Oxton

    1341 days ago

    Moises: Good one! I used that on my Zen Garden submission.

    I found it over at Shaun Inman’s site

  7. Jared

    1341 days ago

    Ten tips that have been helpful to me.

  8. Switch

    1341 days ago

    One of my favourite hacks is the underscore hack, very cool, doesn’t require a lot of typing and only IE notices it.

    Explained here

  9. Derek Featherstone

    1341 days ago

    My two favourites:

    Clearing Floats without structural markup
    The Holly Hack

  10. Pierce

    1341 days ago

    To get around IEs floating margin problems I always use the !important rule. Number 4 on the page Jared links to.

    It’s probably not the best option, but it’s just so damn simple.

    width:100px !important
    width:120px;

    IE ignore the important and overwrites the width as 120px. Everything else obeys and refuses to change the width after it’s declared as important.

  11. Keith Bell

    1341 days ago

    Another method of clearing floats without redundant markup, nicely written up at Ordered List:

    The FnE Method

  12. Denis Radenkovic

    1341 days ago

    ...I just remembered of your IE hack:
    display:none;

    ; )

  13. John Oxton

    1341 days ago

    Ha! Thanks Denis,

    body{
    _display:none;
    }

    Works a treat on IE! ;-)

  14. Martin

    1341 days ago

    Stopping flickery thingyness in IE

    Original source – cant remember… i’ll find it when i’m sober and re-post! Sorry…

    URL

    John,
    The stuff with the thing isn’t working with the stuff…y’know.. hic!

  15. John Oxton

    1341 days ago

    Hee hee, oddly I think I know what you are talking about, so I think I fixed the stuff with the thing, y’know even without live preview… hic!

  16. Richard@Home

    1341 days ago

    * {
    margin: 0;
    padding: 0;
    }

    Start with a clean slate :-)

  17. jolo

    1341 days ago

    Escaped Selector

    #testElement {
    color: #00cc00;
    }

    Got it here

  18. Andy Mac

    1341 days ago

    Wow John – I was sitting here sweating yesterday over that double margin issue, wondering why I was having to give a 60px margin to Firfox and a 30px margin to IE.
    I thought I was going a bit mad (which may still be the case), I should have realised IE was up to its old tricks again.

    So that has also become my favourite CSS hack, thank you.

    Internet Explorer bugs are a little like London buses: you wait all day for one to come along, then three turn up at once :(

  19. Ian

    1341 days ago

    I guess it’s not really a hack but it sure is a trick!

    I’m a big fan of the clear float trick using the :after selector.

    I’m finding I’ve been using this little beauty in a lot of recent designs.

    Read up on it at Position is Everything

  20. Joshua Porter

    1341 days ago

    Although I think this is a great resource to have, I believe that hacks are dangerous and not always future-proof. How about a tip, then?

    Try to not set padding and specified widths on any element at the same time.

    (this way, you won’t need to use the IE 5 hack)

  21. Gabriel Mihalache

    1340 days ago

    ”* html” by far. IE is the root of most evil, these days.

  22. Mathias Bynens

    1339 days ago

    About everything can be done through PHPSS. Browser detection sucks, but hey, so does IE. It really is the only CSS hack you’ll ever need.

  23. Mike Stenhouse

    1339 days ago

    I use:
    * html selector { ... }
    and:
    /* hide from ie/mac \*/
    selector { ... }
    on almost every project. I prefer coding for sensible browsers and then hacking for IE – it just feels better that way. As always with hacks I’m just hoping that Microsoft fixes their node parsing at the same time as they sort out their rendering engine.

    Oh, and the other one I use is the escaping slash for IE5.x:

    div.box {
    width: 100px;
    padding-right: 20px;
    }

    * html div.box {
    width: 120px; /* ie5.x */
    width: 100px; /* over-ride for ie6 */
    }
    You just have to remember not to put the slash before any of the first 6 letters of the alphabet or they’ll be interpreted as hex.

  24. Gabriel Mihalache

    1338 days ago

    OFF-TOPIC:
    I’ve reread this entry, and it’s kind of late here, right now, so I understood the first line as:

    “I am working on a wee*d* project with Gordon Mackay and Ian Main.”

    and I was just so looking forward to a convergence of web design and hallucinogens! Maybe next time, right?

  25. John Oxton

    1338 days ago

    Hee hee… It’s not a bad idea… might make it more interesting anyway! ;-)

  26. Gordon

    1338 days ago

    I’m no expert and everything that I’ve discovered this year has been covered I think.

    Of course there is also this list: http://www.456bereastreet.com/archive/200412/456_berea_street_highlights_of_2004/

    All good!

  27. Tom

    1338 days ago

    Hacks –
    Filter out Win IE5.x with Mid-pass filter or browser sniff and serve up IE Conditional Comments for filtering. Use Lost Child Hack within the filtered file to separate IE5.5 and IE5.01 – yes still a few schools/businesses using 5.01 in this rural area!! :(

    Dummy Not Selector for resolving conflicts in Opera

    Tip –
    Using Negative Margins to control document structure (e.g. placing content before menus – nice for Accessibility/SEO).

  28. Kaan

    1225 days ago

    Hi
    I am having a problem with positioned divs in IE 5.01.
    Contents of the div called searchcontent is dynamically created. so, as the dynamically created data grows in this div, it pulls down the frame div all the way down! I get a huge white space at the top. This happens only in IE 5.01.
    Any suggestions? I dont wanna go bald :)

    The structure is like this and css is as follows:

    BODY { text-align:center; }

    /* frame is just a centered box to hold everything in center */
    div.frame
    { width:775px;
    margin-right:auto;
    margin-left:auto;
    margin-top:10px;
    padding:0px;
    text-align:left;
    }

    div.headerbodyfooter
    { width:775px;
    padding:0px;
    float:left;
    text-align:left;
    }

    div.searchmenu
    { width:165px;
    padding:0px;
    float:left;
    text-align:left;
    }

    div.searchcontent
    { width:610px;
    padding:0px;
    float:left;
    text-align:left;
    }

    div class=”frame”
    div class=”headerbodyfooter”
    /div
    div class=”headerbodyfooter”
    div class=”leftmenu”
    /div
    div class=”rightcontent”
    /div
    /div
    div class=”headerbodyfooter”
    /div
    /div

Christmas gifts?

Beginning CSS Web Development book cover

Recently

The last seven posts made on this site.

Geeky shiteMeta

A proud member