ansaurus

Question

Using multiple-class selectors in IE7 and IE8

Answer 1

+1 A:

Not that you're necessarily doing anything wrong, but if you just have classes like:

.column {
  float: left;
  display: block;
  margin-right: 20px;
  width: 60px;
}
.two {
  width: 140px;
}
.three {
  width: 220px;
}
.four {
  width: 300px;
}

Then you should still get the rendering you want when you apply those classes in the right order:

<div class='column two'>Two Columns</div>

If you think of the css classes being like programming classes, the .two class extends the base .column class, over-riding its width property.

This way, you can also apply your .two, .three and .four classes to other page elements whose width you want to fix to those sizes, without having to be reliant on their position or container on the page.

Phil.Wheeler 2009-11-04 01:28:00

Answer 2

+6 A:

You want to make sure and use a doc type so you do not render in quirks mode. For example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
<title>Test Page</title>
<style type="text/css">
.column {
  float: left;
  display: block;
  margin-right: 20px;
  width: 60px;
  border: 1px solid;
}
.two.column {
  width: 140px;
}
.three.column {
  width: 220px;
}
.four.column {
  width: 300px;
}
</style>
</head>
<body>
<div class="two column">Two Columns</div>
<div class="three column">Three Columns</div>
<div class="four column">Four Columns</div>
</body>
</html>

Nathan 2009-11-04 01:42:30

Crap, that was really careless of me. Thanks for the help!

Erol 2009-11-04 01:57:33

Thank you thank you.

Frank Schwieterman 2010-01-22 18:55:52

You saved my life !

Fabien Bernede 2010-07-19 17:43:26

ansaurus

tags:

views:

answers:

Using multiple-class selectors in IE7 and IE8

related questions