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
  • 120 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

Different rendering between IE and Firefox usually comes from two things: browser default styles (a <p> has top/bottom margins and different line metrics), and whether you used an inline element (span) vs a block element (p). 's span trick works because inline elements don’t carry the block margins. is right to call out fixed pixels for fluid layouts, but the simplest, most robust fixes are layout techniques that don’t rely on exact pixel math.

Three practical approaches (pick one):

  • Flexbox — modern, clean, and handles multi-line content. Set the container to display: flex and change align-items for vertical position: center, flex-start (top) or flex-end (bottom). Keep the text flush-left with justify-content: flex-start and remove default paragraph margins.
.container {
  display: flex;
  align-items: center; /* center | flex-start | flex-end */
  justify-content: flex-start;
}
.container p { margin: 0; padding-left: 0.5rem; }
  • Line-height — simplest for single-line text only. Make the element’s line-height equal to the container height and reset margins. This is fragile if the text wraps or font metrics change.
.container { height: 3rem; }
.container p { margin: 0; line-height: 3rem; }
  • Table-cell or absolute fallback — use display: table-cell; vertical-align: middle; for older-browser compatibility, or position: relative on the container and position: absolute; top: 50%; transform: translateY(-50%); left: 0; on the child.

For cross-browser consistency also reset the default margins for the element you use (for example p { margin: 0; }) or include a small normalize/reset. For modern projects prefer Flexbox (see MDN on Flexbox) and use relative units (rem/em) for scalable typography.

Recommended Answers

All 2 Replies

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.