Topic: XHTML style tags that make a difference in apperance (Page 1 of 1) Pages that link to <a href="https://ozoneasylum.com/backlink?for=10919" title="Pages that link to Topic: XHTML style tags that make a difference in apperance (Page 1 of 1)" rel="nofollow" >Topic: XHTML style tags that make a difference in apperance <span class="small">(Page 1 of 1)</span>\
 
Michael
Maniac (V) Mad Scientist

From: *land
Insane since: Nov 2000

 posted posted 02-23-2003 00:18

Hokay...
Coding still isn't my bag... but i'm getting a little better.

I was hoping for an explaination to this little "issue" that I've stumbled upon.
I took the liberty of making a "colour friendly" version that should appeal to most.... =)

Here's the two pages that I'm comparing:



Now, both pages are using the same style sheet....
and both have identical mark-up for the most part.
The one and only difference between them is the usage of XHTML style closing tags...

from example 1:

code:
<div id="logo">

	<a href="http://www.ozoneasylum.com">

<img src="images/asylum_logo.jpg" width="299" height="84" alt="Home of the Mad Scientists" border="0"></a>

	</div>

	<div id="box">

	<a href="http://www.ozoneasylum.com/">OZONE Asylum, home of the Mad Scientists</a>

	</div>

	<div id="box1">

	bleh

	</div>

	<div id="box2">

	bloo

	</div>



and here's example 2:

code:
<div id="logo">

	<a href="http://www.ozoneasylum.com">

<img src="images/asylum_logo.jpg" width="299" height="84" alt="Home of the Mad Scientists" border="0"><a/>

	<div/>

	<div id="box">

	<a href="http://www.ozoneasylum.com/">OZONE Asylum, home of the Mad Scientists<a/>

	<div/>

	<div id="box1">

	bleh

	<div/>

	<div id="box2">

	bloo

	<div/>



btw, this is the DOCTYPE I'm using:

code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



So my question are...
why is there a difference in the way the boxes are shown? (i'm using IE 6)
what browsers is this making a difference in?
I've done some rummaging in the FAQ's, though I'll admit I haven't read all the possible applicable information in there...
I was wondering if this is a common issue/complaint..... and guidance how to remedy it would be nice as well.

If at all possible, when explaining... try to keep the crazy coder chatter to a minimum...
chances are it'll fly right by me otherwise.

Cheers folks.

edit: excuse my shotty spelling in the thread name.... my pathetic excuse is that i'm tired..... but the truth is ... well... I'm just a dipshit.

FAQs n' Bits: Michael
Michael
Maniac (V) Mad Scientist

From: *land
Insane since: Nov 2000

 posted posted 02-23-2003 00:29

okay... the reason i probably didn't spot it before is because people simply do not do it.

I was attempting to close the div's like so <div/> .... and apparently that simply isn't something that is done at all.... which would make sense as to why it's acting this way.
i'm just going to guess that the rendered version with the screwed up boxes is the result of all the div's that were created.... being left open.

FAQs n' Bits: Michael
Rooster
Bipolar (III) Inmate

From: the uterus
Insane since: Nov 2002

 posted posted 02-23-2003 01:14

You only put the forward slash at the end of element tags which don?t require a closing tag....

<br />
<hr />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="cad_viewer.css" />
<img src="img/bullet1.gif" alt="" />

etc.


Further more, elements such as <p> may not be coded like <p /> because the paragraph element actually has a closing tag available; so it must be written like...

<p>words here</p>
<div>some box</div>


Hope that helps.

[edit]
If you read this document it will explain the major differences between the HTML4 and XHTML.
[/edit]

[This message has been edited by Rooster (edited 02-23-2003).]
Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

 posted posted 02-23-2003 01:28

You're confusing the <tag/> syntax with the normal <tag>...</tag> syntax.

Let's review:

1. In XML or XHTML, *all* tags must be closed. <div>...</div>, <br></br>, and <img...></img>, for instance.
2. When a tag is empty, you're allowed to replace it with the simpler <tag/> syntax. For instance, <br/> replaces <br></br>, <img.../> replaces <img...></img>.
3. When using this shortcut, you're allowed to put an extra space before the trailing slash, so that older browsers don't choke: <br />, <img... /> for instance.

What you've done in index1 is this:

<div id="logo">
<a href="http://www.ozoneasylum.com"><img src="images/asylum_logo.jpg" width="299" height="84" alt="Home of the Mad Scientists" border="0"><a/>
<div/>
<div id="box">
<a href="http://www.ozoneasylum.com/">OZONE Asylum, home of the Mad Scientists<a/>
<div/>
...

which is equivalent to this:

<div id="logo">
<a href="http://www.ozoneasylum.com"><img src="images/asylum_logo.jpg" width="299" height="84" alt="Home of the Mad Scientists" border="0"><a/>
<div></div>
<div id="box">
<a href="http://www.ozoneasylum.com/">OZONE Asylum, home of the Mad Scientists<a/>
<div></div>

See? index2, however, was correct.

If a tag is not empty, you cannot use the <tag/> syntax with it in any way.
Michael
Maniac (V) Mad Scientist

From: *land
Insane since: Nov 2000

 posted posted 02-23-2003 01:32

thanks... both of you...
very helpful.


FAQs n' Bits: Michael


Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« Backwards — Onwards »

Show Forum Drop Down Menu