ansaurus

Question

CSS, why does one thing work and not another?

Answer 1

+2 A:

Classes start with a dot!

.roundedCornerBox {
   background-color: #ccc;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   border: 1px solid #000;
   padding: 10px;
}

<div class="roundedCornerBox">

Without the dot, it's looking for a <roundedCornerBox /> element to style. The style= needs to be class= as well.

Nick Craver 2010-03-01 23:46:34

Still won't work. Check his code carefully. He's putting the class name in the style attribute.

D_N 2010-03-01 23:48:32

@DN - I have that correction as well...

Nick Craver 2010-03-01 23:48:53

@Tchalvak - Fair point, updated to be more explicit.

Nick Craver 2010-03-01 23:49:35

Answer 2

A:

You want class="roundedCornerBox" in the markup and .roundedCornerBox in your CSS.

D_N 2010-03-01 23:47:08

Answer 3

+7 A:

Are you sure you dont mean:

<div class="roundedCornerBox">
    testing 10,9,8,7
</div>

and

.roundedCornerBox {
   background-color: #ccc;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   border: 1px solid #000;
   padding: 10px;
}

You need the dot to identify a css class and to use that css class you need to place the class name in the class attribute on the dom element.

Mark 2010-03-01 23:47:45

http://www.w3.org/TR/REC-html40/present/styles.html#adef-style Definition of the style attribute.Less technical and for once more useful w3schools breakdown of the difference: http://www.w3schools.com/CSS/css_howto.asp

Tchalvak 2010-03-01 23:50:46

Answer 4

A:

The div tag is incorrect in your second example. It could be

<div id="roundedCornerBox">
    testing 10,9,8,7
</div>

and

#roundedCornerBox {
   background-color: #ccc;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   border: 1px solid #000;
   padding: 10px;
}

Steve 2010-03-01 23:48:16

He just forgot the `.` ;)

henasraf 2010-03-02 00:04:54

That is if `roundedCornerBox` is a `class`. Another syntactically correct option is to make it an `id`. (*Semantically*, perhaps it is better as a `class`. Either way.)

Steve 2010-03-02 01:20:15

ansaurus

tags:

views:

answers:

CSS, why does one thing work and not another?

related questions