HTML and CSS

Keeping it in the box

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

Thread Solved

•

Join Date: Dec 2007

Posts: 54

Reputation: rouse is an unknown quantity at this point

Solved Threads: 1

rouse

Offline

Junior Poster in Training

Keeping it in the box

Mar 2nd, 2009

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:

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
<!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>
<!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

•

Join Date: Dec 2007

Posts: 54

Reputation: rouse is an unknown quantity at this point

Solved Threads: 1

rouse

Offline

Junior Poster in Training

Re: Keeping it in the box

Mar 3rd, 2009

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

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
            <div id='branding'>
                <span class='branding'>William Bradley </span>
                <span class='branding_non_i'> Rouse </span>
            </div>
            <div id='branding'>
                <span class='branding'>William Bradley </span>
                <span class='branding_non_i'> Rouse </span>
            </div>

•

Join Date: Jan 2007

Posts: 3,210

Reputation: MidiMagic has a spectacular aura about

Solved Threads: 164

MidiMagic

Offline

Nearly a Senior Poster

Re: Keeping it in the box

Mar 5th, 2009

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.

Daylight-saving time uses more gasoline