Center one span inside another

Center one span inside another - Redux

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Mr. Clean - 28 Oct 2004 16:46 GMT

Why would this work:
<html>
<head>
<title>Page 1</title>
</head>
<body style="background:#C2BFA5;">
<span style="text-align: center;
border:thin inset;
position:absolute;
left:14px;
top:310px;
height:53px;
width:185px;
background-color:#800000;">
<span style="font-family:'MS Sans Serif';
font-size:8px;
vertical-align: middle;
line-height: 53px;">
Panel
</span>
</span>
</body>
</html>

But this doesn't:

<html>
<head>
<title>Page 1</title>
</head>
<style>
Panel1 {
background-color:#800000;
font-family:'MS Sans Serif';
font-size:8px;
position:absolute;
left:14px;
top:310px;
width:185px;
height:53px;
text-align: center;
border:thin inset;
}

Panel1Label {
line-height:53px;
}

body {
background:#C2BFA5;
}
</style>
<body>
<span class="Panel1">
</span>
<span class="Panel1Label">Panel1</span>
</body>
</html>

Reply to this Message

Alexander Fischer - 28 Oct 2004 17:15 GMT

Hello Mr. Clean,

> <style>
> Panel1 {
[quoted text clipped - 8 lines]
> text-align: center;
> border:thin inset;

Wrong syntax.
If you want to use "Panel1" as a class, define it like this:
.Panel1{
...
}
- you forgot the leading point.

Next time, we'd appreciate, if
* you posted your example to an online webpage, and
* you ran a validator on it to spot the most obvious errors.

HTH,
Alex

PS: In addition, your second example - the not working one - did not
nest the spans, as the first example did...

Reply to this Message

Mr. Clean - 29 Oct 2004 13:17 GMT

<SNIP>

> Wrong syntax.
> If you want to use "Panel1" as a class, define it like this:
[quoted text clipped - 12 lines]
> PS: In addition, your second example - the not working one - did not
> nest the spans, as the first example did...

Not withstanding the admonishment, oh Guru, thank you.

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / October 2004

Center one span inside another - Redux