8 Javascript solutions to common CSS problems

by Jean. 85 Comments -

CSS are definitely a great technique for web designers and web developpers. Though, cross-browser problems and lack of CSS3 support in modern browsers are a real problem for your creativity. Today, I have compiled a list of 8 common CSS problems that you can easily resolve with help from Javascript.

1- Transparent backgrounds with JQuery

Ah, transparent backgrounds. Due to the fact that IE6 can’t handle transparent png images, this has been a problem for years. Although many techniques are availables in order to solve this recurring bug, this one is really good because it allows you to make any element transparent, without even using transparent png files.

  1. Download theses files and include them in your website:
  2. Adapt the following code to your own needs and paste it in the head part of your html document, or even better, in a separate .js file. Basically, Just use the transBGdraw() function on each element you’d like to make transparent.

    // !!!IMPORTANT!!!
    // if you use tagnames or classes, make sure every object affected has a unique id.
    { $(this).transBGdraw(); });
    { $(this).transBGdraw(); });
    { $(this).transBGdraw(); });
    { $(this).transBGdraw(); });
    { $(this).transBGdraw(); });
  3. You’re done. Easy, isn’t it?

Source: Cross Browser Transparent Background with jQuery, no css hacks, no *.png files

2 – Include different classes for different browsers

Thanks to Microsoft and Internet Explorer, the bigger problem for every front-end developper is definitely cross-browser compatibility. Even if Internet Explorer introduced conditional tags to include styles only for IE, it can be good to be able to deal with other browsers as well.

  1. This code works with the JQuery framework, so of course make sure you have it installed on your website.
  2. Paste the following code in the head part of your html document or in a separate .js file:
  3. Now you can preprend your styles with .msie, .mozilla, .opera, .safari or .other depending on the targeted browser.

Source: Avoiding CSS hacks using Javascript

3 – Columns of equals height with JQuery

When using a table, all the columns of this table have the same height. During web design early days, everyone was using tables to style their web pages so creating columns of the same height weren’t a problem at all. But with the rise of CSS, things changed and now, creating columns of equal height isn’t an easy job.
Happilly, here’s a real life saver for everyone looking to create identical columns.

  1. As this code uses the JQuery framework, make sure you have it installed on your webiste!
  2. Paste the following script in a new file and include it to your web page:
     * JQuery Plugin: "EqualHeights"
     * by:	Scott Jehl, Todd Parker, Maggie Costello Wachs (http://www.filamentgroup.com)
     * Copyright (c) 2008 Filament Group
     * Licensed under GPL (http://www.opensource.org/licenses/gpl-license.php)
     * Description: Compares the heights or widths of the top-level children of a provided element 
     		and sets their min-height to the tallest height (or width to widest width). Sets in em units 
     		by default if pxToEm() method is available.
     * Dependencies: jQuery library, pxToEm method	(article: 
     * Usage Example: $(element).equalHeights();
      		Optional: to set min-height in px, pass a true argument: $(element).equalHeights(true);
     * Version: 2.0, 08.01.2008
    $.fn.equalHeights = function(px) {
    		var currentTallest = 0;
    			if ($(this).height() > currentTallest) { currentTallest = $(this).height(); }
    		if (!px || !Number.prototype.pxToEm) currentTallest = currentTallest.pxToEm(); //use ems unless px is specified
    		// for ie6, set height since min-height isn't supported
    		if ($.browser.msie && $.browser.version == 6.0) { $(this).children().css({'height': currentTallest}); }
    		$(this).children().css({'min-height': currentTallest}); 
    	return this;
  3. Use the following code to make the top-level childs of an element having the same height:

Source: Setting Equal Heights with jQuery

4 – Cross browser rounded corners

Rounded corners are gorgeous, but they’re also a lot of images and <div> tags, due to the lack of the border-radius CSS3 property in current browsers.
This JQuery script allows you to round any element. Sweet, isn’t it?

  1. One more code that works with JQuery, so double check you have it installed on your website.
  2. Download this file and include it in your html page.
  3. Once done, use the following code to round a div:
    DD_roundies.addRule('.myContainer', '8px');

Source: Achieving Rounded Corners in Internet Explorer for jQuery UI with DD_roundies

5 – Fixing IE overflow problem

One more annoying IE problem is the rendering of the overflow property. Happilly this code can help.

  1. Simply paste the following Javascript code in the head part of your html document, or in a separate .js file:
    window.onload = function () {
      // only apply to IE
      if (!/*@cc_on!@*/0) return;
      // find every element to test
      var all = document.getElementsByTagName('*'), i = all.length;
      // fast reverse loop
      while (i--) {
        // if the scrollWidth (the real width) is greater than
        // the visible width, then apply style changes
        if (all[i].scrollWidth > all[i].offsetWidth) {
          all[i].style['paddingBottom'] = '20px';
          all[i].style['overflowY'] = 'hidden';
  2. The code, which will only apply to IE, will look for all elements having the well known overflow problem, and fix it. Althought this can be done in pure CSS, this Javascript solution is interresting.

Source: Fixing IE overflow problem

6 – Vertical alignments

In CSS, vertically centering an element within its parent isn’t always an easy thing, and this is why Javascript can help here.

  1. Simply paste the following code in a separate .js file or in the head section of your html document:
    function AlignMiddle(Parent,Child) { 
    //Generate content dynamically
       document.getElementById(Child).innerHTML="Hello there, I am dynamically align in the middle using a Javascript."
    //Center Vertically
       h = document.getElementById(Child).offsetHeight;
       //var a=Math.round(document.getElementById(Parent).style.pixelHeight/2);
       var a=Math.round(parseInt(document.getElementById(Parent).style.height)/2);
       var b=Math.round(h/2);
       var c=a-b;
    //Center Horizontally
       w = document.getElementById(Child).offsetWidth; 
       //var x=Math.round(document.getElementById(Parent).style.pixelWidth/2);
       var x=Math.round(parseInt(document.getElementById(Parent).style.width)/2);
       var y=Math.round(w/2);
       var z=x-y;

Source: Vertical & Horizontal Centering of ‘div’ object

7 – Image preloading

The Mootools framework have a very nice image preloader. But not everyone like Mootools.

//this is my new preloading method
preloadImages =
count: 0 /* keep track of the number of images */
,loaded: 0 /* keeps track of how many images have loaded */
,onComplete: function(){} /* fires when all images have finished loadng */
,onLoaded: function(){} /*fires when an image finishes loading*/
,loaded_image: "" /*access what has just been loaded*/
,images: [] /*keeps an array of images that are loaded*/
,incoming:[] /*this is for the process queue.*/
/* this will pass the list of images to the loader*/
,queue_images: function(images)
 //make sure to reset the counters
 this.loaded = 0;

 //reset the images array also
 this.images = [];

 //record the number of images
 this.count = images.length;

 //store the image names
 this.incoming = images;

 //start processing the images one by one
,process_queue: function()
 //pull the next image off the top and load it
/* this will load the images through the browser */
,load_image: function(image)
 var this_ref = this;
 var preload_image = new Image;

 preload_image.onload = function()
     //store the loaded image so we can access the new info
     this_ref.loaded_image = preload_image;

     //push images onto the stack

     //note that the image loaded
     this_ref.loaded +=1;

     //fire the onloaded

     //if all images have been loaded launch the call back
     if(this_ref.count == this_ref.loaded)
     //load the next image
 preload_image.src = image;

To begin preloading images use the method preloadImages.queue_images([IMAGES]) where [IMAGES] is an array of images. Everything will be processed internally. There are two methods you can use: onLoaded and onComplete.

onLoaded will fire whenever an image has finished loading. All the properties of the loaded image are available in the variable loaded_image. For example if you want to find the width of the image that just finished loading your code would look like this.

Source: Javascript Image Preloader

8 – Killing IE6

Tired of having apefectly valid CSS code which didn’t display correctly in this obsolete browser for some unknown reason? Then, what about getting rid of this piece of crap? Just insert the following code in your html file, and say goodbye to IE6. It will crash automatically once the page is loading.

function getX( oElement ) {
    var iReturnValue = 0;
    while( oElement != null ) {
        iReturnValue += oElement.offsetLeft;
        oElement = oElement.offsetParent;
    return iReturnValue;

Source: 6 html and Javascript codes to crash IE

  • Pingback: Anonymous

  • http://www.blogdesigned.com/blog Sumesh

    Useful hacks there – I’m sure I’ll find transparent background, browser-specific classes and columns of equal height (I use Faux columns, not anymore ;) ),

  • http://www.pushingbuttons.net Timothy

    Glad to see MooTools in there. jQuery is not as elegant.

  • http://lukelarsen.com Luke

    @ Timothy – I beg to differ on MooTools being more elegant.

  • http://www.writography.net Aimee

    #8 — really? I’d rather have people access a site I did looking broken than be under the impression that I’m such a bad web developer that my site crashes a browser. It would seem very unintentional and not convey the message that they should upgrade.

  • Pete

    I am concerned at the notion of advocating crashing the user’s browser – exploit of a bug – especially when an estimated 20% of users *are still using it* for some sites. Particularly in the corporate world, where many intranet sites were built for IE6 and it is too time-consuming/expensive to upgrade.

  • http://paulirish.com Paul Irish

    FYI the #2 technique doesnt work anymore. It gives the error:
    TypeError: (classNames || "").split is not a function

    Here is a a revised version that works:

    jQuery.each(jQuery.browser,function(brow,bool) {
    !!bool && jQuery(“html”).addClass(brow);

  • http://freewebmasterseotools.com Free Webmaster SEO Tools

    I would love to kill IE6, I have a niche site that no matter what I have tried will not display properly in IE6 and quite a few visitors STILL use it??!!! Why I will never know. Will try these hacks to see if it will work

  • http://wpcult.com The Frosty @WPCult


  • http://www.itop10.com top 10

    Useful tips. I will use the rounded corner on my blog. Thanks.

  • http://www.teddy-o-ted.com teddY

    Thank you for sharing! I guess one of the more important ones is the jQuery PNG fix – I’ve tried countless of other Javascript-based PNG fixed and so far, the jQuery one worked like magic for me. The IE6 overflow problem is also one that can only be effectively circumvented using Javascript. There are CSS fixes out there, but jQuery does a better job. Kudos for plugging that method!

    Crashing IE6 sounds like an awesome way of getting back at Microsoft (and Bill Gates), but is it worth the effort to chase visitors using IE6 visitors away? Perhaps by force loading a lightbox containing a warning message will suffice for IE6 users. But then again, it’s all up to personal preferences. I guess many designers would love the IE6 crasher script, heh!

  • http://totu.eire-media.com/ Glyph

    The IE browser crash is very anti-standards…

  • Pingback: Tus noticias, tus historias, tu decides - AnuiKi.com

  • http://www.blakehaswell.com/ Blake Haswell

    I can’t believe you’re suggesting purposefully crashing IE6. I really hope that’s a joke, but even so it is quite possibly the worse joke in the history of the world. Ever.

    I know how terrible IE6 is, I deal with it every day, but stopping people from accessing your site because of the browser they use is irresponsible and completely against the spirit of web standards.


  • http://www.wprecipes.com Jean-Baptiste Jung

    @Glyph & @Blake Haswell: The IE6 crash solution is listed here, people are free to implement it – or not – on their website.
    Agree with you that it is against the spirit of web standards, but using IE6 is against the spirit of web standards either ;)

  • http://www.serradinho.com George Serradinho

    Thanks for the hacks, I see more websites using javascript. It has come a long way.

  • http://abdusfauzi.com abdusfauzi

    waaah! loves the solutions! *bookmarked*

  • Pingback: links for 2009-03-24 « pabloidz

  • http://increase-site-traffic.webmarketingmachine.com/ increase site traffic

    Thanks for the files and instructions.

  • http://www.mfinch.ca/blog/ Online Marketing Blog

    Thanks for the tips some are use full and some are over kill and can be obtained with little css workarounds. The Ie6 hack is to funny – it would be fun to use on a non commercial site.

  • http://www.oscarantolinez.com Oscar Antolinez

    Good article, jQuery is definitely better

  • http://smashill.com smashill

    I still dislike supplementing my code with java or flash. It really depends on the sites you create, but for information sites I will always make sure that my page looks the same with and without noscript turned on.

  • http://www.0window.com/blog/ Catrin W

    Great list…. Thanks for sharing. The last one is my favorite, lol :)..

  • Pingback: Linkit 24.3. - 24.3. | Valontuoja

  • http://www.mentalpurgatory.com Martin Fister

    Including different classes for different browsers is a good idea. It’s hard getting your code to work right for everything, and that’s a neat way to make it adapt to the situation.

  • Pingback: designtick.com

  • http://sutrajobs.com Rizwan

    Loved it….answers a lot of problems….am gonna ad this to ma bookmarks

  • http://www.welivethis.com Listen To Hip Hop Music

    I have to admit, I like the idea of using JS for rounding corners. It definitely saves a lot of hassle. I’m familiar with image preloading though it seemingly always skips my mind. I think it would come in handy with my site due to the high number of images that I use (almost always one per post). The only one of these I don’t understand is the idea of crashing IE6. While it is atrocious, that would hurt my visitor-base tremendously, as believe it or not, people still use IE. It seems like for every person I try to convert, 4 more IE users pop up. It’s really terrible.

  • http://www.quizzpot.com Hazel Q.

    Wow! Nice list, especially the transparent background and rounding corners solution. The last solution is quite funny :) ….
    Thanks for the post!

  • Pingback: Homework Solutions? | Solutions/Problems

  • http://cli.gs/tnomeralcwebdesign Tnomeralc Web Design Toys

    This is really a very useful and amazing post. I found it late but will use this for my blog and other sites as well.

  • http://www.wovre.com makaveli-mk

    Also, does CloudFront support either ETAGs or Last-Modified header. but I’m not sure

  • http://nieruchomosci.iserwer.pl Lokale Gryfino

    Jean, you rule! Great tips as always!

  • http://www.nose-hair-clipper.com Nose Hair Clipper

    Yes! The columns of equal height hack is gold. Man, I wish I’d come across that one so long ago. When I think of the hours spent over that one, sheesh.

  • http://forthelose.org Wordpress Themes

    Though I really only use IEPNGFix, I might have to try out a jQuery plugin to do it.

  • http://smashill.com smashill

    @listen to hiphop
    yeah, I can feel that too, I don’t understand why people still use the explorer, I just don’t like it and I hate cross boarder testing and coding, would be so much easier with one perfectly working browser instead of 10000000

  • http://www.bewegaleri.com/ bewegaleri

    Actually i still learning making wordpress themes and i feel this thing is very usefull for me. thanks..

  • http://www.cosmedical.ca/ Toronto Plastic Surgeon

    So your solution to people using an older browser is to make it crash?

    Pretty poor form I would have thought……..

  • http://www.mondoeventi.com marco

    good article , thanks

  • http://bedavam.net Bedava indir

    Jean, you rule! Great tips as always!

  • http://bedavam.net Bedava indir

    Thanks for the files and instructions.

  • http://coolpics.blogpico.com vini

    I was having few problems with IE7 .. Is there some difference to define css on IE

  • http://www.safrane.de Chris

    Thank you so much. I love your blog. You always have great solutions and goodies.

  • http://www.ridex.pl Firany

    I’ve been always outsourcing this kinda stuff to other webmasters. I’m glad I’ll be able to take care of all of that by myself from now on. Thanks.

  • http://www.buycake.co.uk Buy Cake

    Great post! I think deliberately crashing IE 6 should be considered part of “creating an appropriate incentive framework” (ahem)

  • http://www.niharsworld.com/ Nihar

    Thank you very much for this wonderful post. My Blog doesn’t display well in IE6. Will check some of the solutions above.

  • Pingback: 8 Javascript para solucionar los problemas más comunes de CSS

  • Pingback: Enlaces de la semana (II) · El doble de enlaces | Mareos de un geek

  • Pingback: 8 soluciones javascript para los problemas mas comunes de CSS at TuMenteCrea - Tu blog creativo

  • http://novatvmedia.com Anthony Alexander

    I prefer ‘programming’ different browsers, than multiple platforms and hardware configurations, which is probably why so many C++ people are turning web developer. My only real gripe with IE is the out dated rendering engine, it used to be the best before my framework hit 130k :)

  • Pingback: 8 Javascript para solucionar os problemas mais comuns de CSS | AlyenStudio, creando sua imagem !

  • Pingback: Silenceway » Soluciones con Javascript para problemas con CSS

  • Pingback: ZioNews » Javascript solutions to common CSS problems

  • http://www.graphicfuse.com Web Design

    Nice information, I do not know that jQuery can do that. I will apply right away.

  • http://hsiindia.in ganesh

    Thanks for all who are behind these excellent scripts..but for me Killing IE6 is not working..?

    Killing IE6:

    Thanks for one and all

  • http://www.federal-prison.org Jim – Survive Prison Inmate

    This is a great post. This should help to resolve some of the so called cross platform problem.

    Many thanks,


  • http://gazebo.3pages.net Number One On Google

    Awesome.. This is a fantastic resource, that I wish I had found months ago. It would have saved me weeks worth of wasted work..

    Thanks you for putting thsi awesome resource together.. Much appreciated.


  • http://www.flash-design.dk Johnny grafisk designer


    Everytime i change and finetune my web design , i will keep your script functions in mind!

  • http://www.Tampa-Web-Site-Design.com Tampa Web Design

    I’m glad that you find it useful! Judging from your designs, you’re quite a big fan of jQuery, aren’t you?

  • http://kisaranku.blogspot.com Belajar Ngeblog

    jQuery can do that..? I’ve just known..
    I’ll try first

  • http://benje.org Benje

    Haha, I’m using that Kill IE6 one.

  • http://www.nicolasprudhon.com Nicolas Prudhon

    That’s a very interesting collection there! I’d never had thought of using Javascript to compensate CSS issues.

    As a SEO, I have taken the habit to forsake Javascript as much as possible, and usually look at CSS or PHP; nonetheless, some of the hacks you introduce here are worth taking a look at!

  • Pingback: 8 Javascript solutions to common CSS problems - BTRSS

  • http://www.hotelabis.pl Kotlina Klodzka

    You definitely need to work on Opera compatibility. I know that it doesn’t have a lot of the market but for example at home I use it exclusively and if any features of the site don’t work in Opera I just stop using the site alltogether.

  • http://www.joshuaissac.co.nr/ Joshua Issac

    Best way to respond to your customers: crash their browser!

    They’ll think your site has spyware and you will lose out on potential customers. And if you think IE6 is obsolete, you need to do a bit more research.

  • http://www.wprecipes.com Jean-Baptiste Jung

    @Joshua Issac: Any good web developer will tell you that IE6 is obsolete. Come on, we are in 2009 while this piece of crap was released in 2001…
    IE6 doesn’t deserve anything else than crashing. Same for people who use it.

    • http://www.joshuaissac.com Joshua Issac

      When I wrote that comment, IE6 had a market share of about 20%, after IE7 (30%) and Firefox 3 (28%). That is a fifth of the global browser market share, then more than Opera, Chrome and Safari put together. So IE6 certainly was not obsolete as it was still the third most popular browser in the world.

      In 2009, it would have been better to design your site to work in just IE7, Firefox 3 and IE6, rather than making it work in all the other browsers but leaving out IE6 because it was still use widely, more so than all the alternative browsers, sans Firefox 3. The situation is different today, in 2012. IE6 is obsolete now, with only 1.5% of the market share.

      But if you think that your visitors/customers deserve crashing because of their browser, then you do not deserve to have them as customers. I am sure that a more competent developer would gladly make a page that works in IE6 and get all those customers you drove away. This would have been especially true in 2009, when IE6 had 20% market share.

      (Source: StatCounter)

  • http://www.rakebackftw.com Ian

    oh thats very helpful for me.
    I’m looking for it for a long time!
    Thanks very much!
    Thats very interesting as well~

  • http://jfoucher.fr Jonathan Foucher Web Design

    Great tips in there, especially for the transparent PNG hack… I’d rather use it then crash IE6… I used to send GIFS to IE6, but I think I’ll use this now.
    Thanks !

  • http://www.provfm.com AC

    The best solution to CSS problems is not to use Iexplorer, it’s a nightmare!!

  • Pingback: Itákora » Lecturas recomendadas (9)

  • Juraj

    Consciously crashing IE6? Appalling suggestion. I would never hire such web developer.
    I deal with corporate clients so apps I develop must work in IE6 most of the time but let me tell you, there is always a way how to make things work without hacking it into pieces.

  • http://www.wprecipes.com Jean-Baptiste Jung

    @Juraj: Seriously, man. IE6 is shit. As a developer, I strongly believe that a part of our work is to educate people about what’s better for them. Most intelligent people will easily understand that a browser released in 2001 can’t work as good as one released this year.

  • http://www.ftrake.com Samuel Goldstein

    While I don’t use WP on my primary site this article really helped me with my personal blog. Will def provide a link!

  • Pingback: ITキヲスク | 2009å¹´3/23~3/29の週間ブックマーク

  • http://www.markstahler.ca Mark Stahler

    Next article, detecting if the user is using Windows XP (6 years old vs IE6s 8) and crashing the browser.

  • Yoke Lee


    I would loooooooooove to crash IE just for the sake of avenge my frustration.
    Of coz, I wont do it to my clients’ website… =P

  • http://www.snetdownloads.com vivek bandebuche

    ‘1.1 Setting Equal Heights with jQuery’ is unnecessary, because tables have their purpose and html/css coders now avoid to use them without a good reason. The only one reason is that the table are not enough ‘cool’ now, well that’s wrong. Tables are hard for maintenance when you have lots of nested tables, but tables are good for this example – equal heights, because when you have large page with lot of content, you’ll have wait for browser to load whole page and then to call this script, and the page will flick, and that is ugly. Solution for this is table. User don’t look in your html code, and tables will never disappear from html or be abandoned like you say.
    Just use tables where are they logic for use.

  • http://www.internetpokerdownloads.com Nick

    Couldn’t you just specify a height in css to make columns an equal height?

    And LOL @ killing IE. I would love to do that. What a terrible browser.

  • http://www.msinetbook.com MSI

    Thanks, I’m using the cross browser rounded corners javascript now and it looks good.

  • Pingback: 25 handige webdesign artikelen • STATE OF_

  • http://www.pokerwebsites.net/poker/sites/ Nick

    Thank you so much for the vertical alignments fix. This is exactly what I needed for the project I’m working on. Great article.

  • tigerlabs

    Another method for crashing IE6 (less code) is

    for (x in document.write) document.write(x);

  • http://blog.sanooj.me Sanooj ah

    i think this is also a simple method to detect browser
    if ( $.browser.msie ){
    if($.browser.version == ’6.0′)
    if($.browser.version == ’7.0′)
    if($.browser.version == ’8.0′)
    if($.browser.version == ’9.0′)
    else if ( $.browser.webkit )
    { $(‘html’).addClass(‘webkit’);
    else if ( $.browser.mozilla )
    { $(‘html’).addClass(‘mozilla’);
    else if ( $.browser.opera )
    { $(‘html’).addClass(‘opera’);

  • http://accounting14-tw.info Geoff

    Hello! I just would like to give an enormous thumbs up for the good data you could have right here on this post. I shall be coming back to your weblog for more soon.