...

View Full Version : Center in Firefox



Basscyst
05-20-2005, 11:30 PM
I've had this issue before, and figured I'd get to the bottom of it. I often have a problem with centering in firefox. Displays fine in IE, but why does the text-align not seem to apply properly in FF.



<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<style type="text/css">
body
{
text-align:center;
background-color:#008080;
}
div
{
background-image:url();
background-repeat:no-repeat;
text-align:center;
border:solid 1px;
height:244px;
width:471px;
padding-top:100px;
}
table
{
text-align:left;
color:#000000;
}
.inp
{
font-size:10px;
height:18px;
width:100px;
font-weight:bold;
border:solid 1px;
}
</style>
</head>
<body onload="document.forms[0].elements[0].focus();">
<div>
<form method="post" action="login.asp">
<table>
<tbody>
<tr>
<td>Username:</td>
<td><input type="text" class="inp" name="login" /></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" class="inp" name="password" /></td>
</tr>
</tbody>
</table>
<input type="hidden" name="relog" value="" />
<input type="submit" class="inp" value="Log-In" /> <input class="inp" type="reset" value="Clear" />
</form>
</div>
</body>
</html>



Basscyst

_Aerospace_Eng_
05-20-2005, 11:46 PM
Often, the table will only be as wide as the content in it. The submit and reset buttons align correctly, but maybe you are trying to align the whole thing centered in firefox, div and all? Maybe you are trying to center the table in the div? add margin:auto; to the css for it. A table is a block level element, not an inline. text-align:center; would work for inline elements.

Basscyst
05-21-2005, 12:59 AM
Ha! Thanks! It was the fact that block level elements don't respond to the text-align. That was news to me. Seems they do in IE though, is that correct? I was trying to center the table in the div, and the div within the body. margin:auto did the trick. :thumbsup:

sigh. This was in the sticky FAQ. :o

Thanks Again,
Basscyst



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum