ansaurus

Question

Answer 1

+1 A:

CSS can be applied to any "tag" but you use of <div> is just not correct. A div tag always needs a closing tag:

<div><!-- HTML here --></div>

And what is happening is that you give the div a width and height of 100 pixels and a black border which is 1 pixel wide.

Maybe you want to read some CSS tutorials.

You can also try

<img src="path/to/some/image" style="border:5px solid black;" />

to see that it works with self-closing tags ;)

A list of valid self-closing tags in XHTML.

Felix Kling 2010-01-31 11:30:37

Incorrect — it doesn’t always need a closing tag. `<div/>` or `<div />` is perfectly valid XHTML, which will create an empty, self-closing `div` element. http://stackoverflow.com/questions/2171471/is-css-for-pair-tags-only/2171499#2171499

Mathias Bynens 2010-01-31 11:36:51

You're both half right. `<div />` is fine in XHTML but **not** in HTML-compatible XHTML (where it needs an end tag, although it doesn't need content).

David Dorward 2010-01-31 11:42:25

@David: You are right, I mixed up the notations e.g. `<br>` with `<br />`.

Felix Kling 2010-01-31 11:56:07

Answer 2

A:

I'm not sure that your DIV problem is based on CSS, I think it's more a case of browser interpretation. Browsers expect DIVs to have content and maybe don't render those correctly. XHTML is XML compatible, but isn't itself (meaning it doesn't abide by ALL the rules of), XML.

CSS does work for self-closing tags - e.g. IMG or HR.

Your second question seems right. The browser effectively caches the stylesheet and applies the styles whenever it sees a relevant tag within the DOM. You never really see all this happening because it's generally done before any drawing is done to the page. If you dynamically add a DOM Tag, with a CSS reference, it would automatically take on that style defined in your stylesheet.

Amadiere 2010-01-31 11:32:15

Answer 3

+1 A:

<div>s are supposed to have content, so they are not self closing tags. Your CSS properties are fine, but your markup is incorrect.

kemp 2010-01-31 11:33:33

Answer 4

+1 A:

As mentioned, a div element needs start and end tags… Unless you do what you did in some of your examples:

<div />

Or…

<div/>

This is a self-closing (empty) div.

So, for your CSS tests, you probably don’t wanna use <div /> — use <div>Foo</div> instead.

Mathias Bynens 2010-01-31 11:35:37

no I actually want just void box with no text :) and thus it's a bit illogical self-closing tag isn't enough, I'll have to get used though :)

stupid_idiot 2010-01-31 11:40:23

Which browser are you using? It should work in modern browsers: http://jsbin.com/ugehu3

Mathias Bynens 2010-01-31 11:43:15

I use mozilla, in the first case I described, it shows me the black box and the red box on the same place but one pixel shifted in each direction displayed over the black one. In the second case which is what I really desired, the red box is under the black one.

stupid_idiot 2010-01-31 11:49:10

@stupid_idiot: You should have explained what you see in your question. Just from giving CSS code and *i thought there should be no difference* it is hard to guess what problem you face. A screenshot would have been nice.

Felix Kling 2010-01-31 12:02:45

Answer 5

+5 A:

You are, no doubt, serving your XHTML with a text/html content-type.

This is a hack designed to ease the transition from HTML to XHTML, so people can start using XHTML before browsers support it. After a decade, Internet Explorer still doesn't support it and I've gone back to HTML.

Since you are using this hack, you must write your XHTML to be compatible with HTML parsers as well as XML parsers. This means following the HTML Compatibility Guidelines which include:

If an element permits content (e.g., the div element) but an instance of that element has no content (e.g., an empty section), DO NOT use the "minimized" tag syntax (e.g., <div />).

Elements which do not permit content are defined as "EMPTY" and can be easily spotted on the HTML list of elements.

David Dorward 2010-01-31 11:47:18

thx for the refrences. It will come handy

stupid_idiot 2010-01-31 11:56:36

Answer 6

+1 A:

If you really want self-closing DIVs:

Serve your content as XHTML. This includes using the correct mime-type (application/xhtml+xml), but be aware that you'll need to handle browsers that still don't understand XHTML.
Use a valid XHTML doctype and namespace,

e.g.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;

This will then display your DIVs as you expect but, in my experience, serving good old HTML 4 strict is a lot less hassle.

Bobby Jack 2010-01-31 12:11:01

ansaurus

tags:

views:

answers:

is css for pair tags only?

related questions