Styles not applying?

J741 · Oct 10, 2005

I am just learning to use CSS. My first objective is to apply a stlye to a box of text and graphics. Here's what I've done so far:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML><HEAD>
<TITLE="Test">
<STYLE type="text/css">
.MyItemBox
{ position:absolute; overflow:hidden;
top:1; left:50;
width:493; height:97;
background-color:green; visibility:visible;
border:1px solid black;
}
</STYLE></HEAD>
<BODY>
<DIV ID="FirstItemBox" STYLE="MyItemBox">
<IMG SRC="MyPicture.gif">
<P>My Text Goes Here</P>
</DIV>
</BODY></HTML>

Now the end result is that none of the style properties apply to the DIV element. The item box is not green or positioned correctly. However, if I put all of the style properties inline, instead of in the STYLE section, then it works. So why is it not working this way?

- James.

My memory is not as good as it should be, and neither is my memory.

I have forgotten more than I can remember

Vragabond · Oct 10, 2005

Ok, first the problems. Styles can be applied to elements, classes or ids. If it is the first, you simply name the element you want to change and that element will always look like that. For instance, here every div will have red colored text:

Code:

div {
  color: red;
}

Ids and classes work very much the same, the only difference is that ids can only be used for a single element on the page, because they uniquely define that element. So, if you know you will only have one element like that on the page, you can use id, but if many will have the same style, you must have a class. Other than that, the two are completely interchangeable.

Code:

/* this is a class */
.MyDiv {
  color: blue;
}

/* this is an id */
#MyDiv {
  color: green;
}

The codes should be self explanatory. However, you need to work with that in your html as well. In HTML, you can apply styles in three ways. You append an id, a class or inline style to the element. You do it with their respective names:

Code:

<div>This div has red colored text.</div>
<div class="MyDiv">This div has blue colored text.</div>
<div id="MyDiv">This div has green colored text.</div>
<div style="color: yellow;">This div has yellow colored text.</div>

This demonstrates nicely how you apply classes, ids and inline styles. In your code, you're using style and code expects you to write css declaration there, however you are referencing classes. Classes go to class attribute.

As for your css, it might work ok in IE, because it is forgiving, but other browsers will require you to put units next to your values. 1 what is your div from the top? 1px, 1cm, 1in, 1em, 1%? How do you expect the browser to know if you don't tell it? In HTML, the only possibilities were percentages and pixels but with css you have a myriad of options.

I would also suggest you do some more reading on css before you tackle problems, as it seems you're using too much absolute positioning when it is not needed.

J741 · Oct 11, 2005

Thank you for the info, however I'm a little confused (obviously). When you say "In your code, you're using style and code expects you to write css declaration there, however you are referencing classes.", what exactly do you mean by that? I am under the impression that the STYLE section is used to define the classes which can then be assigned to an object. Is this not correct? Is the syntax or declaration layout wrong?

Also, thank you for your info about the use of units next to values. I was unaware of that, and the instructional website I was reading did not mention that.

As for the Absolute positioning, it's because I will be doing some animation using multiple elements, and this was the simplest way I could thing of doing that, as the 'relative' positioning is based on the entire window, and not the containing DIV. But I may change this later anyways (that's why I want to use a style class).

- James.

My memory is not as good as it should be, and neither is my memory.

I have forgotten more than I can remember

rpgfan3233 · Oct 11, 2005

Thank you for the info, however I'm a little confused (obviously). When you say "In your code, you're using style and code expects you to write css declaration there, however you are referencing classes.", what exactly do you mean by that? I am under the impression that the STYLE section is used to define the classes which can then be assigned to an object. Is this not correct? Is the syntax or declaration layout wrong?

The term "class" refers to the HTML class:

Code:

<DIV ID="FirstItemBox" CLASS="MyItemBox">

The STYLE attribute is used in the same way the <STYLE> tag is used:

Code:

<DIV ID="FirstItemBox" STYLE="background-color:#ff0;">

J741 · Oct 11, 2005

O.K. Thanks for that info. Perhaps I should elaborate on the problem a bit more.

Here is another code snippet for testing:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML><HEAD>
<TITLE="Test">
<STYLE type="text/css">
P { color:red }
P.yellow { color:yellow }
.MyStyle1 { width:400px; height:100px; background-color:green }
.MyStyle2 { color:blue }
</STYLE></HEAD>
<BODY>
<P>This is a regular paragraph with an automatic reference</P>
<P STYLE="yellow">This is a Paragraph with a partially automatic reference</P>
<P STYLE="MyStyle2">This is a Paragraph with a manual style reference</P>
<DIV STYLE="MyStyle1"><P>This is a DIV with a manual style reference</P></DIV>
<P STYLE="color:blue">This is a Paragraph with an inline style<P>
<DIV STYLE="width:400px; height:100px; background-color:yellow"><P>This is a DIV with an inline style</P></DIV>
</BODY></HTML>

When viewed in IE, the only styles which do not apply are the ones assigned with a dot, Specifically 'P.yellow', '.MyStyle1', and '.MyStyle2'. My question is WHY? Did I create them wrong, or reference them wrong?

They match the instructions in the CSS tutorial on

http://www.w3schools.com

but they don't seem to work.

- James.

My memory is not as good as it should be, and neither is my memory.

I have forgotten more than I can remember

Vragabond · Oct 11, 2005

Reference them wrong. Do you even read our posts? When using as an attribute, style defines inline css and expects css declarations, not names of the classes. Classes defined in the stylesheet (within <style> tag) can be applied to an element using class attribute. This was nicely explained by me originally and now by rpgfan. I can't see where you are confused. To give you in idiot terms, change

Code:

<P STYLE="MyStyle2">This is a Paragraph with a manual style reference</P>

to

Code:

<P class="MyStyle2">This is a Paragraph with a manual style reference</P>

J741 · Oct 11, 2005

Thank you!

Apparently I didn't quite understand the earlier response, but now it's obvious. I whole heartly accept the title of 'idiot' on this one.

Thanks all!

- James.

My memory is not as good as it should be, and neither is my memory.

I have forgotten more than I can remember

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Styles not applying?

J741

Technical User

Vragabond

Programmer

J741

Technical User

rpgfan3233

Technical User

J741

Technical User

Vragabond

Programmer

J741

Technical User

Similar threads

Part and Inventory Search

Sponsor