IE CSS Hacks

May 1, 2009 17:09 by rob

While working on a few websites this week I came across two really useful techniques.

Two Column Float Variable Widths

The first was a simple two column layout using float left on both div's without any width set. This proved a bit of a challenge for both div's wanted to sit underneath eachother or the second column would wrap under neath the first div.

Our solution was to use float left on the first div with the second div set with no float but but using display:table instead. This worked perfectly for firefox and other browsers apart from IE... For IE we just had to add the float:left property in a conditional css hack i.e. * html #div { float:left }. This allowed us to achive two columns with flexible widths, see the image below.


Backslash IE hack

The second little niffty css hack I came across was similar to the underscore IE hack i.e. _height:100px;

Using two backslashes (//) instead of the underscore works across all IE's.
IE ignores the two backslashes as where all other browsers see this as comments. Genius!!


Currently rated 4.5 by 2 people

  • Currently 4.5/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Related posts

Comments

September 26. 2009 09:49

Using two backslashes (//) instead of the underscore works across all IE's.
IE ignores the two backslashes as where all other browsers see this as comments. Genius!!

Tiffany Bracelets

October 3. 2009 07:28

Nice trick!

games

Add comment


 

[b][/b] - [i][/i] - [u][/u]- [quote][/quote]



Live preview

July 31. 2010 20:24

Calendar

July 2010
SuMoTuWeThFrSa
27282930123
45678910
11121314151617
18192021222324
25262728293031
1234567