Multiple Classes 3

[jimmyshoes]

Is it ok to apply multiple styles to a div. For example

<div class="style1 style2">

Will behaviour be consistent across all browsers?

 

[BillyRayPreachersSon]

Yes you can, and possibly, depending on your CSS.

All modern browsers support multiple class names. However, IE6 (and possibly earlier) has a bug to do with incorrectly applying one class or another.

See my first post here for more details: thread215-1387166

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[Vragabond]

Yup, multiple class notation is fully supported by all modern browsers. The only thing you might not want to use is the css notation that requires both classes to be present

.style1.style2 {
  color: red;
}

This will not be supported in IE6.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[BigRed1212]

I do this for layout as an example:

css:

.left { float: left; }
.right { float: right; }
.column { width: 365px; }

html:

<div class="column left">

Stole it from somewhere.

 

[jimmyshoes]

Thanks

 

[jimmyshoes]

Having read the thread mentioned by BillyRayPreachersSon I've decided that I'll only be using one class per tag (ie class="important" even if this means that the 'important' definition may be very similar to another style 'quiteImportant' and some info will be repeated

If you use multiple styles for each tag then if you want to make a change you may have to start going through the html and altering each tag which would be very time consuming. I ony want to have to make changes to my stylesheet.

One question though, is it ok to have styles in 1 external style sheet that duplicate information. For example

.important{font-size:12px; color:#c00; font-weight:bold}
.quiteImportant{font-size:12px; color:#c00;}

or would the following be better

.quiteImportant{font-size:12px; color:#c00;}
.quiteImportant .important{font-weight:bold;}

and then...
<div class="quiteimportant"><div class="important">Text</div></div>

I'm thinking that I'd prefer
.important{font-size:12px; color:#c00; font-weight:bold}
.quiteImportant{font-size:12px; color:#c00;}
because it is easy to follow

 

[BillyRayPreachersSon]

I wouldn't steer clear of using multiple classes - just be aware that is can cause an issue in that specific case, and if that case arises, know how to work around it.

To answer your latest question, I would do neither. Why duplicate code if you don't need to. So, to that end, I would change this:

.important {
	font-size: 12px;
	color: #CC0000;
	font-weight:bold;
}

.quiteImportant {
	font-size: 12px;
	color: #CC0000;
}

to this:

.important,
.quiteImportant {
	font-size: 12px;
	color: #CC0000;
}

.important {
	font-weight:bold;
}

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[BigRed1212]

.important {
    font-size: 12px;
    color: #CC0000;
}

.quite {
    font-weight:bold;
}

For fun, I like it this way so that it just cries out for multiple clases...

<div class="important"> some text</div>
<div class="quite important"> some other text</div>

 

[Vragabond]

I know it's a bit late (been on holiday) but you might also consider simply using the <strong> element in the above scenario. It is styled, by default as a bolded text and has a semantic meaning of more important text.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]