Keep text in the box

[williamrouse]

William Bradley Rouse

[williamrouse]

This seems to work for the first part of my question. Is this the way to do it?

William Bradley 
 Rouse 

[Wickham]

You don't need to use separate classes in span tags unless you want the two words to have different styles.

 

The reason the words are below the box is because of the default top margins which browsers use, they are different in each browser and because your font size is large, the margin is also larger than normal, so add margin-top: 5px; to the class:-

 

.branding{ margin-top: 5px;

font-family: Constantia,

"Lucida Bright", Lucidabright,

"Lucida Serif", Lucida,

"DejaVu Serif", "Bitstream Vera Serif",

"Liberation Serif", Georgia, serif;

font-style: italic;

font-size: 30pt;

color: red;

font-weight: bold;

text-decoration: none;

text-align: left;

}

 

If you want the words to center, change text-align: left; to text-align: center;

 

using your original markup:

William Bradley Rouse

 

For flush left bottom of the box, leave text-align: left; and adjust the top margin (margin-bottom is unreliable, using a bottom fix often doesn't work).

 

IE7, IE8 and Firefox and other browsers should be the same if you state the margin-top.

[williamrouse]

Thank you.

I have another question relating to the same style. I wanted to use this description:

text-shadow:4px 4px 8px blue;

This works only in Safari, but not in Chrome, IE or Firefox. Does anyone know why?

Regards!

[Wickham]

Text-shadow; see the note top right here:-

http://www.quirksmode.org/css/textshadow.html

 

Works in Safari, Opera, and Konqueror

[jlhaslip]

Text-shadow is a CSS3 implementation and is not available for all Browsers yet.

Just that simple.

 

http://www.css3.com/css-text-shadow/

[williamrouse]

OK, thanks!