...

View Full Version : Text align center not working in Firefox.



Doctor_Varney
01-12-2010, 03:42 PM
Why?

The div with the magenta border is supposed to occur in the center. It does in IE, but not in Firefox.

I thought CSS code was supposed to cascade? To me, this means if we place rules in the body, those rules should be inherited (obeyed) by anything in the body!?

I know the div is not technically a 'text' element, but the body text centering rule was put there to center the site in IE.


/*Body*/
*{margin:0;padding:0;}
body{text-align:center;background:#ccc url(../interface/body_background.jpg) center top repeat-x;font-size:85%;font-family:Arial, Helvetica, Sans serif;color:black}
/*structure---------------*/
#wrapper {width:710px;margin-top:80px;margin-left:auto;margin-right:auto;padding:20px}
#masthead{height:120px}
#column_1{width:40%;position:relative;top:5px;left:20px}
#column_2{width:40%}
#footer{clear:both;height:60px;margin-top:20px}
/*Text Formatting---------------*/
#masthead blockquote{font-size:1em;margin-top:20px;margin-right:190px}
#masthead h1{font-size:2em}
#title_1{font-size:1em;margin-top:20px;margin-bottom:10px}
p{font-size:1em;text-align:justify;margin-right:20px;width:40%}



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Welcome to Blinding Horror</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style/sheet-2.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper" class="border_R">
<div id="masthead" class="border_G">
<blockquote>
Welcome To
</blockquote>
<h1>
BLINDING HORROR
</h1>
</div>
<h2 id="title_1">
Central Page Title
</h2>
<div id="column_1" class="border_M">
&nbsp;
</div>
<div id="footer" class="border_G">
&nbsp;
</div>
</div>
&nbsp;
</body>
</html>

abduraooft
01-12-2010, 03:56 PM
The div with the magenta border is supposed to occur in the center. It does in IE, but not in Firefox. There's no such rule in the above posted CSS. :confused:

If you are talking about the div having class="border_M", you need to change your CSS like

#column_1{width:40%;position:relative;top:5px;
/*left:20px;*/
margin:0 auto;
}

Excavator
01-12-2010, 07:02 PM
The <center> tag is supported in all major browsers. However, it is deprecated and should be avoided! (http://www.w3schools.com/TAGS/tag_center.asp)

Doctor_Varney
01-13-2010, 05:01 AM
The <center> tag is supported in all major browsers. However, it is deprecated and should be avoided! (http://www.w3schools.com/TAGS/tag_center.asp)

I see, so the center tag is depreciated now. Great! Just when I having SO much fun with it...

Dr. V

Doctor_Varney
01-13-2010, 05:10 AM
There's no such rule in the above posted CSS. :confused:

If you are talking about the div having class="border_M",

Yes, that's exactly what I am talking about. The div with the magenta border.


you need to change your CSS like

#column_1{width:40%;position:relative;top:5px;
/*left:20px;*/
margin:0 auto;
}

Yes but I might not want the div to sit centrally, eventually. The point is, the center rule does not cascade in Firefox - but then this div is now stuck in the center in IE. Now I'm presuming Firefox will not recognise the rule for anything other than text? The whole purpose of me using text-align:center, is so the site will center in IE, because it wasn't recognising the margin:auto rule.

Edit: I have removed the text aligning from the body. Let's hope these margins work...

Regards

Dr. V

Doctor_Varney
01-13-2010, 05:59 AM
And surprise, surprise... They don't!

You'll notice I've taken out this ('depreciated' but very useful) tag called 'text-align:center; and introduced margins to the H1 & H2 elements, yet the auto-margin is ignored in both browsers. Fantastic!!! :confused::confused::confused::confused:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Welcome to Blinding Horror</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style/sheet-2.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper" class="border_R">
<div id="masthead" class="border_G">
<blockquote>
Welcome To
</blockquote>
<h1>
BLINDING HORROR
</h1>
</div>
<h2 id="title_1">
Something In The Middle By Way Of A Title
</h2>
<div id="column_1" class="border_M">
&nbsp;
</div>
<div id="column_2" class="border_M">
&nbsp;
</div>
<div id="footer" class="border_G">
&nbsp;
</div>
</div>
&nbsp;
</body>
</html>
/*CSS Document by Ade Varney 2008*/
/*Body*/
*{margin:0;padding:0;}
body{background:#ccc url(../interface/body_background.jpg) center top repeat-x;font-size:85%;font-family:Arial, Helvetica, Sans serif;color:black}
/*structure---------------*/
#wrapper {width:710px;margin-top:80px;margin-left:auto;margin-right:auto;padding:20px}
#masthead{height:120px}
#column_1{margin-left:auto;margin-right:auto;width:40%}
#column_2{margin-left:auto;margin-right:auto;width:40%}
#footer{clear:both;height:60px;margin-top:20px}
/*Text Formatting---------------*/
#masthead blockquote{font-size:1em;margin-top:20px;margin-right:190px}
#masthead h1{margin-left:auto;margin-right:auto;font-size:2em}
#title_1{font-size:1em;margin-left:auto;margin-right:auto;margin-top:20px;margin-bottom:10px}
p{font-size:1em;text-align:justify;margin-right:20px;width:40%}
/*Temporary Borders-------------*/
.border_R{border:1px solid red}
.border_G{border:1px solid green}
.border_B{border:1px solid blue}
.border_C{border:1px solid cyan}
.border_M{border:1px solid magenta}
.border_Y{border:1px solid yellow}
.border_K{border:1px solid black}
.border_E{border:1px solid gray}
.border_H{border:1px solid white}
/*End CSS*/Now to go back and look at the code you suggested earlier, Abdura...

Thanks

Dr. V

Excavator
01-13-2010, 06:24 AM
The CSS Text Align Property (http://www.w3schools.com/CSS/pr_text_text-align.asp) is not deprecated. text-align:center; is perfectly valid.

HTML <center> (http://www.w3schools.com/TAGS/tag_center.asp) tag is deprecated.

CSS is for styling your content - so it makes perfect sense that <center> does not belong in the markup.

Doctor_Varney
01-13-2010, 07:05 AM
Of course... I confused the word tag with CSS property. Thanks, Excavator, for elucidating.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum