Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > ASP .Net > <div ... /> and <div ...></div>

Reply
Thread Tools

<div ... /> and <div ...></div>

 
 
K Viltersten
Guest
Posts: n/a
 
      03-29-2009
I experince different behavior when i organize my div's.

My styles are as follows.

<style type="text/css">
.style1{ display: inline-table; height: 250px; width: 400px;
background-color: #ffcccc; }
.style2{ display: inline-table; height: 250px; width: 400px;
background-color: #ccccff; }
</style>

And the code is like this.

<div id="stuff">
<div class="style1" id="container1"></div>
<div class="style2" id="container2"></div>
</div>

The above example renders as supposed to. It gets me
two rectangles placed on one row. The below example
renders to one rectangle only. My guess is that the first
rectangle is behind the last one.

<div id="stuff">
<div class="style1" id="container1" />
<div class="style2" id="container2" />
</div>

Why on Earth does it happen?!

--
Regards
K Viltersten

 
Reply With Quote
 
 
 
 
Scott M.
Guest
Posts: n/a
 
      03-30-2009
Closing the <div> tag is not optional. You must always use </div> to close
an opening div tag.

What's happening is that the browser doesn't encounter an end to your fist
div tag so it is thinking that your second div is a child of your first one
and simply putting it inside of the first one.

The only tags that you can self-terminate are ones that do not have a
closing tag (i.e. <br />, <img />, <hr />, <link />, <meta />).

You can't just self-terminate any old tag just because it doesn't have any
content.

-Scott


"K Viltersten" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
>I experince different behavior when i organize my div's.
>
> My styles are as follows.
>
> <style type="text/css">
> .style1{ display: inline-table; height: 250px; width: 400px;
> background-color: #ffcccc; }
> .style2{ display: inline-table; height: 250px; width: 400px;
> background-color: #ccccff; }
> </style>
>
> And the code is like this.
>
> <div id="stuff">
> <div class="style1" id="container1"></div>
> <div class="style2" id="container2"></div>
> </div>
>
> The above example renders as supposed to. It gets me
> two rectangles placed on one row. The below example
> renders to one rectangle only. My guess is that the first
> rectangle is behind the last one.
>
> <div id="stuff">
> <div class="style1" id="container1" />
> <div class="style2" id="container2" />
> </div>
>
> Why on Earth does it happen?!
>
> --
> Regards
> K Viltersten
>



 
Reply With Quote
 
 
 
 
K Viltersten
Guest
Posts: n/a
 
      03-30-2009
Oh, i thought that

<anything ... />

was just a syntactic sugar for

<anything ...></anything>

and that's why the confusion. Well, you learn
something new every day. Thanks!

--
Regards
K Viltersten




> Closing the <div> tag is not optional. You must always use </div> to
> close an opening div tag.
>
> What's happening is that the browser doesn't encounter an end to your fist
> div tag so it is thinking that your second div is a child of your first
> one and simply putting it inside of the first one.
>
> The only tags that you can self-terminate are ones that do not have a
> closing tag (i.e. <br />, <img />, <hr />, <link />, <meta />).
>
> You can't just self-terminate any old tag just because it doesn't have any
> content.
>
> -Scott
>
>
> "K Viltersten" <(E-Mail Removed)> wrote in message
> news:(E-Mail Removed)...
>>I experince different behavior when i organize my div's.
>>
>> My styles are as follows.
>>
>> <style type="text/css">
>> .style1{ display: inline-table; height: 250px; width: 400px;
>> background-color: #ffcccc; }
>> .style2{ display: inline-table; height: 250px; width: 400px;
>> background-color: #ccccff; }
>> </style>
>>
>> And the code is like this.
>>
>> <div id="stuff">
>> <div class="style1" id="container1"></div>
>> <div class="style2" id="container2"></div>
>> </div>
>>
>> The above example renders as supposed to. It gets me
>> two rectangles placed on one row. The below example
>> renders to one rectangle only. My guess is that the first
>> rectangle is behind the last one.
>>
>> <div id="stuff">
>> <div class="style1" id="container1" />
>> <div class="style2" id="container2" />
>> </div>
>>
>> Why on Earth does it happen?!
>>
>> --
>> Regards
>> K Viltersten
>>

>
>


 
Reply With Quote
 
Scott M.
Guest
Posts: n/a
 
      03-30-2009
Nope.

Making a tag self-terminatings is done to satisfy XHTML's requirement that
all opening tags have a closing tag. If the tag is already defined to have
a closing tag (such as div), then you continue to use that. You only add
the self-termination to tags that under HTML's rules never had a closing
tag.

-Scott


"K Viltersten" <(E-Mail Removed)> wrote in message
news:Ow7B$(E-Mail Removed)...
> Oh, i thought that
>
> <anything ... />
>
> was just a syntactic sugar for
>
> <anything ...></anything>
>
> and that's why the confusion. Well, you learn
> something new every day. Thanks!
>
> --
> Regards
> K Viltersten
>
>
>
>
>> Closing the <div> tag is not optional. You must always use </div> to
>> close an opening div tag.
>>
>> What's happening is that the browser doesn't encounter an end to your
>> fist div tag so it is thinking that your second div is a child of your
>> first one and simply putting it inside of the first one.
>>
>> The only tags that you can self-terminate are ones that do not have a
>> closing tag (i.e. <br />, <img />, <hr />, <link />, <meta />).
>>
>> You can't just self-terminate any old tag just because it doesn't have
>> any content.
>>
>> -Scott
>>
>>
>> "K Viltersten" <(E-Mail Removed)> wrote in message
>> news:(E-Mail Removed)...
>>>I experince different behavior when i organize my div's.
>>>
>>> My styles are as follows.
>>>
>>> <style type="text/css">
>>> .style1{ display: inline-table; height: 250px; width: 400px;
>>> background-color: #ffcccc; }
>>> .style2{ display: inline-table; height: 250px; width: 400px;
>>> background-color: #ccccff; }
>>> </style>
>>>
>>> And the code is like this.
>>>
>>> <div id="stuff">
>>> <div class="style1" id="container1"></div>
>>> <div class="style2" id="container2"></div>
>>> </div>
>>>
>>> The above example renders as supposed to. It gets me
>>> two rectangles placed on one row. The below example
>>> renders to one rectangle only. My guess is that the first
>>> rectangle is behind the last one.
>>>
>>> <div id="stuff">
>>> <div class="style1" id="container1" />
>>> <div class="style2" id="container2" />
>>> </div>
>>>
>>> Why on Earth does it happen?!
>>>
>>> --
>>> Regards
>>> K Viltersten
>>>

>>
>>

>



 
Reply With Quote
 
JM
Guest
Posts: n/a
 
      03-31-2009
> <anything ... />
>
> was just a syntactic sugar for
>
> <anything ...></anything>


No way!

Whatever the document type definition (DTD) says goes..

John


 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
if and and vs if and,and titi VHDL 4 03-11-2007 05:23 AM



Advertisments