Oct 12 2008

Using Javascript to Fix 12 Common Browser Headaches

Advertisement

We advocate using CSS whenever possible, and we often successed. Modern browsers have very good support for CSS — it’s certainly good enough for you to use CSS to control layout and presentation. Sometimes however, certain page elements will appear differently in different browsers.

Don’t worry too much if you don’t know the reason why, play around with the CSS rules and check out this post: Using CSS to Fix Anything: 20+ Common Bugs and Fixes as well.

If that doesn’t work, you can fix it up with one of the 12 javascript solutions listed below and your Web pages should look great across all browsers!

In this article, we’ll demystify 12 javascript solutions for the most common CSS issues that you’ll encounter when building web applications.

You might be interested to check other CSS related posts.

1. Setting Equal Heights

jQuery Plugins


Creating the visual effect of equal-height columns or content boxes has been a challenge ever since we abandoned table-based layouts.

1.1 Setting Equal Heights with jQuery

This jQuery plugin “equalize” the heights of boxes within the same container and create a tidy grid — with little overhead. From a usability and performance standpoint to use a simple JavaScript workaround: equalHeights() function determines the heights of all sibling elements in a container, and then sets each element’s minimum height to that of the tallest element.

How it works

equalHeights() loops through the top-level child nodes of a specified element and sets their min-height values to that of the tallest.

  • Demo can be found here.
1.2 Equal height columns with jQuery

Another jQuery plugin “equalize” the heights of boxes.

$("#col1, #col2").equalizeCols();

Will equalize the columns as expected

$("#col1, #col2").equalizeCols("p,p");

Will equalize the columns and add the extra space after the p tag in #col1 or #col2 (whichever is shorter).

2. IE6 PNG Alpha Transperancy support

IE versions below 6 do not support png transparency. With the use of hacks, support has been available in Internet Explorer 5.5 and 6, but the hacks are non-ideal and have been tricky to use. Lets take a look at what we can do to support IE6 users whilst taking full advantage of transparency for the majority of a site’s visitors.

2.1 Force IE6 To Support Alpha Transparency

IE7 is a JavaScript library created by Dean Edwards to force MSIE(IE6, IE5) behave like a standards-compliant browser. It fixes many CSS issues and makes transparent PNG work correctly under IE5 and IE6. It also allows for advanced CSS selectors.

  • Demo can be found here.
  • Download source file here
2.2. iFixPng improved

png fix


Fix problems with PNG images in IE6 and below, works for both img-elements and css-background-images. This plugin is an improvement to the original iFixPng plugin. Features include: The image or element with a background image doesn’t have to be visible, background-position is now supported, including an IE absolute position fix. (bottom: -1px || bottom: 0px)

  • Demo can be found here.
  • Download source file here

3. Changing CSS Classes in JavaScript

javascript to fix css issues


Here is a handy JavaScript function that changes any element of class oldClass to newClass in the current document. This is especially useful for changing styles on the fly using CSS classes instead of hard-coded style values.

function changeClass(oldClass, newClass) {
    var elements = document.getElementsByTagName("*");
    for( i = 0; i < elements.length; i++ ) {
        if( elements[i].className == oldClass ) elements[i].className = newClass;
    }
}
  • Demo can be found here.
  • Download source file here

4. Browser selectors in CSS

What if you could just type a special selector, where you could write some javascript that sets a class name on, say, the element based on the name of the current browser.

javascript to fix css issues


4.1 CSS Browser

This is a very small javascript with just one line and less than 1kb which empower CSS selectors. It gives you the ability to write specific CSS code for each operating system and each browser. You could write some javascript that sets a class name on, say, the element based on the current browser.

  • Demo can be found here.
  • Download source file here
jQuery browser selectors

Here is another solution on how to do these browser selectors so easily with jQuery, all you have to do is include the jQuery file, and the following piece of code:

$(document).ready(function(){ 
$('html').addClass($.browser); 
});

Now you can preprend your styles with .msie, .mozilla, .opera, .safari or .other depending on the targeted browser.

  • Demo can be found here.

5. min-/max- height & width support

Looking for CSS min-width, min-height, max-width, max-height, border-*-width, margin, and padding properties, here are some good jQuery fixes.

5.1 jQMinMax

This is a jQuery plugin that adds support for min-width, max-width, min-height and max-height where they are not natively supported.

  • Demo can be found here.
  • Download source file here
5.2 JSizes

This small jQuery plugin adds support for the CSS min-width, min-height, max-width, max-height, border-*-width, margin, and padding properties. Additionally it has one method for determining whether an element is visible. Because all the size methods return numbers, it is safe to use them in calculating DOM element dimensions.

The example below shows that chaining can be used on methods that do not return values.

jQuery(function($) {
   var myDiv = $('#myDiv');

   // set margin-top to 100px and margin-bottom to 10em
   myDiv.margin({top: 100, bottom: '10em'});

   // displays the size of the top border in pixels
   alert(myDiv.border().top);

   // displays true if the element is visible, false otherwise
   alert(myDiv.isVisible());

   // set padding-right to 10px and margin-left to 15px using chaining
   myDiv.padding({right: 10}).margin({left: 15});
});
  • Demo can be found here.
  • Download source file here

6. Center Elements Vertically / Horizontally

You might have come across this problem before : centering elements vertically or horizontally. Vertical centering is rather difficult in CSS, especially if you aim to support all major web browsers. Fortunately, there are solutions that work, one solution takes the value for the left and right marginsfrom the height and width values, divided by two.

Center Elements Vertically and Horizontally


6.1 Center element plugin

This plugin center any element in page, horizontal and vertical using the css minus margin method.

$("element").center(); //vertical and horizontal
$("element").center({
horizontal: false // only vertical
});
  • Demo can be found here.
  • Download source file here
6.2 How Can I Vertically Center An Element?

In this video tutorial, Jeffrey Jordan Way will show you how you can vertically center an image in your browser by combining CSS with jQuery’s power.

7. Display Q tags in Internet Explorer

Quotation marks are supposed to render with use of the Q tag but not with use of the blockquote tag. However, IE/Win does not render these quotation marks, and because of this, most web authors choose not to use the Q tag.

7.1 QinIE

When you add this script to the head of your document to automatically sweep the page for Q tags in IE and display them properly (including nested quotes). When (if) IE supports Q tags in the future, this will have to be updated with a browser version check.

  • Download source file here

8. Increase the size of click targets and get more call-to-action conversions

jQuery Plugins


Say goodbye to boring ‘Read More…’ links by turning your entire content block into a clickable target!

  • Download source file here

9. Lazy loader

Lazy loader is a jQuery plugin written in JavaScript. It delays loading of images in (long) web pages. Images outside of viewport (visible part of web page) wont be loaded before user scrolls to them. This is opposite of image preloading.

  • Demo can be found here.
  • Download source file here

10. bgiframe

Helps ease the pain when having to deal with IE z-index issues.

IE z-index


  • Demo can be found here.
  • Download source file here

11. ieFixButtons

ieFixButtons is a jQuery plugin that fixes the buggy behavior of the <button> element in Internet Explorer 6 and 7.

  • Demo can be found here.
  • Download source file here

12. Fix Overflow

Fixes the horizontal overflow in IE. In particular, IE will place the scroll bar inside the overflowing element, and if the element is only one line, the scroll bar will cover the line. This plugin will adjust the padding to fix the issue.

IE z-index


  • Demo can be found here.
  • Download source file here
About the Author

The jungle is alive: Be it a collaboration between two or more authors or an article by an author not contributing regularly. In these cases you find the Noupe Editorial Team as the ones who made it. Guest authors get their own little bio boxes below the article, so watch out for these.

Homepage

Comments and Discussions
  • Simon from Otooo, 12 October 2008

    This list is so helpful – I’m still learning CSS and come across troubles everyday, so this list has answered a couple of my questions :)

  • Allan, 12 October 2008

    Nice I like it… really helpful. Thanks

  • insicdesigns, 12 October 2008

    brilliant post, this is indeed solve all the problems in browsers. Very helpful.

  • Predrag Krstic, 12 October 2008

    ’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.

  • Janko, 13 October 2008

    Very useful links for beginners – or maybe not only for beginners? :)

  • gwawr, 13 October 2008

    @Predrag Krstic – users may not look at your markup, but machines will. If the goal of web page coding is to create well-structured, semantic markup, then using tables to lay out non-tabular data is a fail.

    While I don’t advocate piling post-fixes upon post-fixes and adding weight and dependencies to your pages like some of these examples, there are nonetheless some good workarounds here. I’m particularly liking the improved png support plugin which makes using PNGs for CSS-Sprites more viable in IE6. Thanks for the list.

  • Vladimir, 13 October 2008

    Great post! Maybe one day standard CSS will become reality and we will not use java script for bug fix.

  • liam, 13 October 2008

    #1 Alone would have made my day, the other 11 points just make it better. Brilliant post.

  • Aaron Irizarry, 13 October 2008

    Thanks!!! This is a very useful list.

    ~ Aaron I

  • Dan S, 13 October 2008

    I’ve been very happy with using this for browser selection:
    http://rafael.adm.br/css_browser_selector/
    It’s under 4KB and works without jQuery – and it works in browsers that jQuery doesn’t support.

  • Designer, 13 October 2008

    thanks… quite useful.

  • ChaosKaizer, 13 October 2008

    Wonderful stuff, thanks sharing.

  • Arnold - Mr.Gadget, 13 October 2008

    Got anything that permanently deletes IE6 from history?

  • Thomas | Santhos, 14 October 2008

    One of the most usefull posts I’ve seen in a while!
    I like point 1 and point 4 in particular!

    Great post!

  • Noupe, 14 October 2008

    I am glad you found some useful tips and script that could really make your day :)

    I don’t advocate using all these hacks or using hacks at all, its just we might find it the only option or the best option depending on what we need.

    Clean CSS and markup would do the trick but if you have a large site with tons of elements floating around you will need a small hack to fix all those issues nicely without having to change your markup.

    @Predrag Krstic- All i can say about tables is they are used to display tabular data. There are tons of reasons why we should stop using them for our layouts, i am sure you heard this before ;)

    @Arnold – I think you are right, we should start developing a hack for this. It will be much easier that using the scripts listed in this post.

  • Martin Kliehm, 14 October 2008

    Nice hacks, and I have used a few of them myself. Though I would object to any form of browser sniffing as it is unreliable. Also there are more elegant forms of setting (fake) equal height columns with CSS alone. Another issue to keep in mind is text resizing: if your script-prettyfied blows up as soon as the text size changes you need to include custom event listeners – that’s why I prefer CSS only. And some of the scripts can be very memory intensive, always try to keep CPU usage as low as possible, so rather use less universal selectors in jQuery.

  • Max, 14 October 2008

    Modern browsers do NOT have proper support of CSS, which is reason for your statement:
    “Sometimes however, certain page elements will appear differently in different browsers.”

    And a requirement for this entire post. I wish people would stop making CSS out to be this amazing thing when really it has a LONG way to go.

  • Curdin, 14 October 2008

    The learning never ends :) And its good that way.

  • Robin, 15 October 2008

    @Predrag Krstic: display:table-cell works fine if you don’t care about IE and keeps the styling in the stylesheets.

  • Jack, 15 October 2008

    In most of these cases Javascript will give a flash of unstyled content. CSS is the better way to fix most of these problems.

    A bit to much jQuery for my taste, jthis and jthat all over the place is giving me a hard time reading, better balance that out with some other frameworks.

  • Jamie Thompson, 15 October 2008

    I’d strongly advise against ‘fixing’ css problems using browser-sniffed classes. For one thing browser-sniffing isn’t reliable enough for this and secondly, you’re wide-open to your entire layout falling apart just because someone has javascript turned off. I’m all for using javascript to help a page layout along but wont’t somebody think of the children!!?

  • Nope, 15 October 2008

    Re: “Setting Equal Heights” and “Center Elements Vertically / Horizontally”–gee, this can be done, trivially, with, umm, HTML tables. This (and most of the other ‘fixes’) can be done–usually easily–with: Flex, Swing, .Net WinForms, etc.

    I’ve been designing and developing Browser-based applications for over ten years now and I refuse to spend one more hour of my work life on dealing with the appalling limitations and idiosyncrasies of Browser technology. And, sorry, but the ‘fixes’ listed in the article aren’t nearly sufficient to solve the (voluminous) problems of Browsers.

    FWIW, I transitioned my projects to Flex a few years ago and now I enjoy my work again!

  • Zach, 16 October 2008

    Javascript is as useful as duct tape and way more fun to play with. Using JavaScript to wrangle CSS design problems, i.e. browser flaws, is less unseemly at this moment than it was perhaps a couple of years ago. Browsers are more secure against script-based attacks. I am interested in any thoughts on why someone might purposely browse all the time with Javascript turned off…

  • Ahmed, 16 October 2008

    Great list. I love this http://rafael.adm.br/css_browser_selector/ .

  • Adam Hepton, 17 October 2008

    Thanks for the article. Just a short note; you have mistyped “transparency” in the heading for #2.

  • Dainis Graveris, 17 October 2008

    Excellent posts..I feel my headaches going avay! :)))

  • Amber Weinberg, 19 October 2008

    Some of these are pretty good, but I think they’re easier ways of doing some of these.

  • Razvan Puscasu, 28 October 2008

    very useful tips, thx

  • weblizzer, 29 October 2008

    This is a good way of learning the css and javascript combo, you may use the javascxript library such jquery and mootools which i used to work on them, they are such a good tools, for editing, i love to used aptana, as it shows error if there something missing most specially for javascript.

  • James, 29 October 2008

    Very useful indeed Nouper!

  • GM, 30 October 2008

    This looks very interesting and useful. To those people who said that there is a better way of handling vertical and horizontal centering using plan CSS, please share those ways with the rest of us. I am not interested in the tables solution, eventhough I have had to resort when nothing else seemed to work. If there is a better way using just CSS don’t just talk about it show us.

  • Magicien, 11 November 2008

    Great post, Thanks

  • lalacan, 22 November 2009

    Excellent post.
    Thank you for taking the time to post this

  • CSSHunt, 30 August 2010

    very helpful thanks for posting

  • Estefana Helliwell, 10 August 2011

    All in all, these diagrams appear to be easy to adhere to and they are vast guides also in behalf of do it yourself work.

  • JJ-Gadgetman, 23 June 2012

    I wish people would stop making CSS out to be this amazing thing . but it can be difficult adjusting to opera i got to test i t out

  • digitalfrog, 23 June 2012

    certain page elements will appear differently in different browsers
    Thats what i am worried about

search form
 
image description image description