CODEWITHSUNDEEP
cssinternet-explorer-8internet-explorer-7
Erol
Erol

Reputation: 370

Using multiple-class selectors in IE7 and IE8

I know IE7 & IE8 supposedly have support for using multiple CSS class selectors, but I can't seem to get it to work.

CSS:

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

HTML:

<div class='two column'>Two Columns</div>
<div class='three column'>Three Columns</div>
<div class='four column'>Four Columns</div>

It always end up using the .four.column rule. Any ideas on what I'm doing wrong?

Upvotes: 15

Views: 19101

Answers (2)

Nathan Fox
Nathan Fox

Reputation: 4023

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">
<html xmlns="http://www.w3.org/1999/xhtml">
<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>

Upvotes: 37

Phil.Wheeler
Phil.Wheeler

Reputation: 16848

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.

Upvotes: 3

Related Questions