Member Avatar for rouse

In this html file I created an area called “branding” where I wanted my name at least at first flush left in the middle of the branding area. The elements behave differently in IE Release candidate 1 than in Firefox. I assume Firefox is correct but how do I get both to behave like IE where the text is:
1) In the middle of the box.
2) Flush left top of box
3) Flush left bottom of the box.
I would be thankful for you assistance.
The code follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Untitled Document</title>
<style type="text/css">
/* Branding Text */
.branding{
    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;
}
body {
    background-color: #000000;    
}
#wrapper {
    margin: 0 auto;
    margin-top: 2px;
    padding: 0px;
    width: 800px;
    min-height: 800px;
    background-color: #000000;
}

#branding {
    padding: 0;
    width: 800px;
    height: 60px;
    clear: both;
    background-color: #CCCCCC;
    border: inset;
}
</style>        
	</head>
	<body>
        <div id='wrapper'>
            <div id='branding'>
                <p class='branding'>William Bradley Rouse</p>
            </div>
        </div>    
	</body>
</html>

WBR

  • 2 Contributors
  • 2 Replies
  • 102 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by MidiMagic
Member Avatar for rouse

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

<div id='branding'>
                <span class='branding'>William Bradley </span>
                <span class='branding_non_i'> Rouse </span>
            </div>
Member Avatar for MidiMagic

Stop using px for sizes, or it will behave totally different when the browser window or the screen resolution changes.

Where the object appears in the box depends on how much margin you give it on each side, and what else is in the box.

With some box objects (but not div), you can set the vertical-align attribute.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.