You are currently browsing the tag archive for the ‘css’ tag.

When I ‘m creating a website, I like to use width and height and min-height to block the elements out on a layout. Well unfortunately when my IE clients would go see it, they’d be very confused and disappointed and I’d be embarrassed. I’ve since learned my lesson, and I found a few great hacks for IE.

Most important for me is conditional comment code. It is used in headers and it can apply any header code to any browser. I usually only need it to apply CSS to IE pages.

<!--[if IE 6]>
<style type="text/css">
/* detailed styles go here */

I place itemized, specific CSS styles in here, usually margins or padding styles to make up for IE’s box model problems. And of course it’s much more effective if you just link to an IE-specific style sheet rather than have to change styles on all pages.

But even more effective than separate styles to handle IE problems are using the built-in CSS hacks. For example, for the height and min-height problems, IE does not recognize the min-height element. But it does read a style that starts with an underscore, such as _height. So in this instance you can forgo the separate style definitions and use code like the following:

div#box {

An excellent reference for CSS hacks is this interactive spreadsheet from Centricle. This shows standard Mac and Windows browsers and their compatibility with CSS rules. It can even follow your mouse and highlight the row and column you are hovered over. A great bookmark!


One of the biggest problems with table-less CSS layouts is the problem with floats and their heights. When you float an inner element, the outer element no longer knows about the height of the inner element. This can wreck havoc when the outer text is shorter than the inner – the elements after the outer div are pulled next to the inner when they should be below both. And this is most problematic when the outer div has a background or border styling that needs to extend to the bottom.

The way to fix this is to “clear” the parent element by posting something invisible after it that clears the float. The easiest code I found for this problem is at PositionIsEverything. They in turn link to an article with a better explanation at SitePoint. The code that I use is below.

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

Apparently, as mentioned in the SitePoint article, all you have to do is add overflow:auto to the parent element. Wahuu? Really? Apparently it works, though I haven’t tested it. Apparently there might be some scrollbar problems, and anything that crosses both elements afterwards (such as a footer) does still need to have clear:both in its styling.


September 2017
« May