Castwide Developer's Resource

Two Helpful Tricks for Cross-Browser Compatibility

One of the biggest hassles in modern web development is cross-browser compatibility. If you've ever thought you were finished coding stylesheets for a complex web design before you tested it in IE 6, you probably know what I mean. Volumes have been written about how to gear code for the most compatibility possible. This article features two helpful tricks that are often overlooked.

Using overflow:hidden to Expand Elements That Contain Floats

Consider a page layout that contains two columns over a shared background; for example, a column with a red background and a column with a white background inside a blue container. The following code demonstrates it:

<style>
#container {
	background-color: blue;
}
#left {
	background-color: red;
	float: left;
	width: 49%;
}
#right {
	background-color: white;
	float: right;
	width: 49%;
}
</style>
<div id="container">
	<div id="left">
		This is the left column.
		<ul>
			<li>One</li>
			<li>Two</li>
		</ul>
	</div>
	<div id="right">
		This is the right column.
	</div>
</div>

This code might not behave as expected. Since the blue div contains nothing but floats, it will not expand over its containers; which means the blue background will not appear on the page. A common solution is to put an element in the container that clears the floats, like so:

<style>
#container {
	background-color: blue;
}
#left {
	background-color: red;
	float: left;
	width: 49%;
}
#right {
	background-color: white;
	float: right;
	width: 49%;
}
</style>
<div id="container">
	<div id="left">
		This is the left column.
		<ul>
			<li>One</li>
			<li>Two</li>
		</ul>
	</div>
	<div id="right">
		This is the right column.
	</div>
	<div style="clear:both;"></div>
</div>

It's also possible to use an :after pseudo-element, eliminating the need for a semantically meaningless element in the HTML:

<style>
#container {
	background-color: blue;
}
#left {
	background-color: red;
	float: left;
	width: 49%;
}
#right {
	background-color: white;
	float: right;
	width: 49%;
}
#container:after {
	content: '.';
	clear: both;
	width: 0;
	height: 0;
	visibility: hidden;
}
</style>
<div id="container">
	<div id="left">
		This is the left column.
		<ul>
			<li>One</li>
			<li>Two</li>
		</ul>
	</div>
	<div id="right">
		This is the right column.
	</div>
</div>

IE 6 does not understand the :after pseudo-element; but it coincidentally expands the containing element regardless, so the :after pseudo-element has been a useful trick in most instances. An even simpler solution, however, is to set overflow:hidden for the containing element:

<style>
#container {
	background-color: blue;
	overflow: hidden;
}
#left {
	background-color: red;
	float: left;
	width: 49%;
}
#right {
	background-color: white;
	float: right;
	width: 49%;
}
</style>
<div id="container">
	<div id="left">
		This is the left column.
		<ul>
			<li>One</li>
			<li>Two</li>
		</ul>
	</div>
	<div id="right">
		This is the right column.
	</div>
</div>

When overflow is set to hidden on an element of variable size, it expands to contain all of its relatively positioned elements, regardless of whether they float. Keep in mind, however, that if the containing element has both a fixed width and a  fixed height, overflow:hidden will behave as implied: anything in the container beyond those borders will not be visible.

Using invalid heights to fix disappearing elements in IE 6

Pages that use floats sometimes encounter a strange bug in Internet Explorer 6. Some elements on the page render invisibly. The element's contents can be selected with the cursor, in which case they will become visible, but unselecting them, then minimizing the browser or switching to a different window, can make them invisible again.

The easiest way to fix this problem is to give the containing element an invalid height, such as 0.01%. The invalid height forces IE 6 to recalculate the element and everything inside it. The code should be placed inside a conditional comment so it doesn't get applied to browsers that don't experience the problem:

<!--[if lt IE 7]>
<style>
#container {
	height: 0.01%;
}
</style>
<![endif]-->

More News