Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Smokes a Lot
    Join Date
    Jul 2003
    Location
    CA, USA
    Posts
    1,594
    Thanks
    5
    Thanked 20 Times in 20 Posts

    Center in Firefox

    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.

    Code:
    <!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
    Helping to build a bigger box. - Adam Matthews

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.
    Last edited by _Aerospace_Eng_; 05-21-2005 at 12:57 AM.

  • #3
    Smokes a Lot
    Join Date
    Jul 2003
    Location
    CA, USA
    Posts
    1,594
    Thanks
    5
    Thanked 20 Times in 20 Posts
    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.

    sigh. This was in the sticky FAQ.

    Thanks Again,
    Basscyst
    Last edited by Basscyst; 05-21-2005 at 02:10 AM.
    Helping to build a bigger box. - Adam Matthews


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •