<HR /> Image-Replacement Through CSS

Written January 14. 2007, at 00:37 GMT.

My evil-genius friend and work-buddy, Borgar, just invented a way to replace HR elements with images using just CSS.

As far as I can tell, his is the first-ever method that accomplishes this across all browsers - without resorting to scripting or adding any extra markup. Pretty neat!

And I'm proud to be able to say that I got to help him rid the method of its initial kinks.

To summarize, here's the finalized version of the IE hack pieced together from the comments following Borgar's blog post:

<!--[if lte IE 7]><style type="text/css">
  hr {
    display : list-item;
    list-style : url(hr.gif) inside;
    filter : alpha(opacity=0);
    width : 0;
  }
</style><![endif]-->

Note, that you'll need to add a margin-bottom property to make IE's margin consistent with that of other browsers.

Note also, that by adding a combination of text-align and margin-left rules, you can achieve any horizontal alignment you like. (IE defaults to "centered".)

...

Discuss and praise over at Borgar's blog.


More like this: English Entries, .


 

Flakk um vefsvćđiđ



 

Nýleg svör frá lesendum

  • Rich (Req.js - javascript lazy-loading and dependency managment made easy)
  • Rich (Req.js - javascript lazy-loading and dependency managment made easy)
  • Rich (Req.js - javascript lazy-loading and dependency managment made easy)
  • Már (Req.js - javascript lazy-loading and dependency managment made easy)
  • Rich (Req.js - javascript lazy-loading and dependency managment made easy)
  • Már (Req.js - javascript lazy-loading and dependency managment made easy)
  • Dinesh (Req.js - javascript lazy-loading and dependency managment made easy)
  • Már (Taubleyjur í nútímanum - lítill leiđarvísir handa hrćddri ţjóđ)
  • Ada (Taubleyjur í nútímanum - lítill leiđarvísir handa hrćddri ţjóđ)
  • notandi (Taubleyjur í nútímanum - lítill leiđarvísir handa hrćddri ţjóđ)
  • Geir (Lausnin á efnahagsvandanum)
  • Jenný (Lausnin á efnahagsvandanum)
  • Óli Jens (Lausnin á efnahagsvandanum)
  • Már (Lausnin á efnahagsvandanum)
  • Kjartan S (Lausnin á efnahagsvandanum)

 

 

Yfirlit yfir ţetta skjal

(Atriđin í listanum vísa á ákveđna kafla ofar á síđunni.)