[Eclug] OT: What is up with the span tag

Wed Aug 16 20:51:05 EDT 2006

Hi,

         again I need to pick your brains. While trying to finally get a 
clue about how CSS works I looked at the W3C schools tutorial (not the best 
one for a dummy like me). In order to make things easier and try out new 
kewl tool I got the Amaya web editor as well.

         Now, I created the CSS half by hand, half by using Amaya and come 
up with this for starters:
p.centertitle {
   font-family: times;
   font-size: medium;
   font-style: normal;
   font-weight:normal;
   font-variant: normal;
   text-align: center;
   text-decoration: none;
   text-transform: none;
}

I then created a simple XHTML page with Amaya and that resulted into this:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
   <title>Login</title>
   <meta
name="generator" content="amaya 9.51, see http://www.w3.org/Amaya/" />
   <link href="styles.css" rel="stylesheet"
type="text/css" />
</head>
<body>
<p> <span class="centertitle">This is a title line with some basic information
such as host name, file last viewed, image size, etc.</span></p>
</body>
</html>

So far so good. Dumping this into the htdocs folder of my Apache server and 
using Firefox to look at the page gives quite a surprise. That line of text 
is nowhere near of being centered. Based on what the W3C schools tutorial 
states it should have been like this:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
   <title>Login</title>
   <meta
name="generator" content="amaya 9.51, see http://www.w3.org/Amaya/" />
   <link href="styles.css" rel="stylesheet"
type="text/css" />
</head>
<body>
<p class="centertitle">This is a title line with some basic information
such as host name, file last viewed, image size, etc.</p>
</body>
</html>

Again with some surprise, this works as I expect it. The single line is 
stuck right in the middle of the page. I looked at the various descriptions 
of this wierd SPAN tag that snuck upon me many times, but none of the 
descriptions was conclusive. Also, Amaya is created by the W3C and I guess 
they know their stuff.
So, all of you wise men and women, can someone explain to me in simple 
terms why the SPAN stuff fails and what this SPAN stuff is about anyhow 
(yea, I read too many of Bob Pease's columns).

Next up in the "David Krings tries to do something crazy" is my description 
on how to hammer Ubuntu into an IBM NetVista miditower. This will be 
another bizarre experience.

                 Thanks for all your help in the present and the past for 
some ECLUG lurker like me.

David K.