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

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

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.

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.

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

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

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.

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

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.

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

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.

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

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.

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

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

Download source file here

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

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

Demo can be found here.

Download source file here

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

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.