Log in

View Full Version : Centering in Firefox.


Merciless
02-14-2007, 02:45 AM
Hey, this is probably a very simple question for most of you super uber coders, and i feel stupid for asking this, but how do i center stuff in firefox? when i center stuff on my website it only centers for IE. =\ thanks.
superjadex12
02-14-2007, 04:05 AM
I don't think this is the 'proper' way, because <center> is depreciated.
But if you just:



<body>
<center>
----content-----
</center>
</body>


Then you'll have a centered web page. You can also use css:


style="text-align:center;"
codeexploiter
02-14-2007, 04:18 AM
HTML Code:

<body>
<center>
----content-----
</center>
</body>



The center element was deprecated in HTML 4.01.

The center element is not supported in XHTML 1.0 Strict DTD.

The deprecation of the <center> element done in favour of CSS.
superjadex12
02-14-2007, 05:13 AM
<body style="text-align:center;">
<div>
----content-----
</div>
</body>



does not center the <div>. So i guess I'm with original poster here, how do you do it ?
codeexploiter
02-14-2007, 05:52 AM
<body>
<div style="width:100&#37;;">
<div style="text-align:center;">
This is a test
</div>
</div>
</body>


The above code will do what you want.

Checked it with IE 7 and Firefox 2.0.0.1
Twey
02-14-2007, 09:41 AM
You need to understand the difference. The <center> element does two things as seen from the perspective of CSS: it applies equal margins to both sides of the element and centres the text within that element.


<div style="margin: auto;"> will do the former (although this will not be noticeable unless you also apply a fixed width to the element, since by default block-level elements take up all available width.
<div style="text-align: center;">will do the latter, but not affect the position of the <div> itself.
<div style="text-align: center; margin: auto;">will apply both styles and make the <div> behave as if it were <center>.
djr33
02-14-2007, 10:26 AM
As a simple attribute, you can just use:
<div align="center">

I'm pretty sure this is the same as <center>, so it would include both, but... not positive on that one.
codeexploiter
02-14-2007, 11:21 AM
As a simple attribute, you can just use:
<div align="center">

I'm pretty sure this is the same as <center>, so it would include both, but... not positive on that one.

The above code is deprecated one in favor of CSS based aligning methods.
Titan85
02-14-2007, 02:42 PM
The above code is deprecated one in favor of CSS based aligning methods.When did that happen, the last time I tested that (about a month ago) it validated as XHTML 1.0 transitional without an issue.
Twey
02-14-2007, 04:17 PM
XHTML Transitional is based on HTML 4.01 Transitional, which in turn is based on HTML 3.2. Great care has been taken to avoid progress in each lest something break.

Just because it's valid Trans (of any format or version) doesn't necessarily mean it hasn't been deprecated in the real DOCTYPEs.
Merciless
02-14-2007, 11:11 PM
my firefox browser still wont listen to me, i used both div align and the normal <center> command and when i preview it in browser in IE it is centered, but in Firefox it is left aligned. here is the coding. as you can see center and div align are both included, but still nothing, :mad:

<script type="text/javascript" src="flashobject.js"></script>

</div>
<div id="flashcontent3" style="width: 681px; height: 141px" border="0"></div>

<center> <div align="center">
<script type="text/javascript">
var fo = new FlashObject("bannerflash.swf", "animationName", "681", "141", "8");
fo.addParam("allowScriptAccess", "sameDomain");
fo.addParam("wmode", "transparent");
fo.addParam("quality", "high");
fo.addParam("scale", "noscale");
fo.addParam("loop", "false");
fo.write("flashcontent3");
</script>
</center>
mburt
02-14-2007, 11:22 PM
<script type="text/javascript" src="flashobject.js"></script>

</div>
<div id="flashcontent3" style="width: 681px; height: 141px" border="0"></div>

<center> <div style="text-align:center">
<script type="text/javascript">
var fo = new FlashObject("bannerflash.swf", "animationName", "681", "141", "8");
fo.addParam("allowScriptAccess", "sameDomain");
fo.addParam("wmode", "transparent");
fo.addParam("quality", "high");
fo.addParam("scale", "noscale");
fo.addParam("loop", "false");
fo.write("flashcontent3");
</script>
</center>
div is by default, a block-level element, so width:100&#37; is pointless. In FF 100% sets the width passed the margins/padding, so it will overlap the page, causing a scrollbar. In IE however it just sets the width 100% ignoring the margins/padding.
Titan85
02-14-2007, 11:23 PM
it seems that you never ended your div tag:
<script type="text/javascript" src="flashobject.js"></script>

</div>
<div id="flashcontent3" style="width: 681px; height: 141px" border="0"></div>

<div align="center">
<script type="text/javascript">
var fo = new FlashObject("bannerflash.swf", "animationName", "681", "141", "8");
fo.addParam("allowScriptAccess", "sameDomain");
fo.addParam("wmode", "transparent");
fo.addParam("quality", "high");
fo.addParam("scale", "noscale");
fo.addParam("loop", "false");
fo.write("flashcontent3");
</script>
</div>
EDIT: sorry mburt, I was typing as you posted
Merciless
02-14-2007, 11:25 PM
hey mburt, i dont need to text align because its an image/javascript/flashanimation , theres no text in it 0.0 .i think.
mburt
02-14-2007, 11:25 PM
Yeah sorry about that. And yes, you're right, the OP forgot to close the div.
mburt
02-14-2007, 11:26 PM
How about:

<script type="text/javascript" src="flashobject.js"></script>

</div>
<div id="flashcontent3" style="width: 681px; height: 141px" border="0"></div>

<div style="display:inline;position:absolute;left:xpx;top:ypx">
<script type="text/javascript">
var fo = new FlashObject("bannerflash.swf", "animationName", "681", "141", "8");
fo.addParam("allowScriptAccess", "sameDomain");
fo.addParam("wmode", "transparent");
fo.addParam("quality", "high");
fo.addParam("scale", "noscale");
fo.addParam("loop", "false");
fo.write("flashcontent3");
</div>
</script>
Merciless
02-14-2007, 11:38 PM
px wont work, but % might, thanks for the idea, can i just replace the px with % so its like,


<script type="text/javascript" src="flashobject.js"></script>

</div>
<div id="flashcontent3" style="width: 681px; height: 141px" border="0"></div>

<div style="display:inline;position:absolute;left:x%">
<script type="text/javascript">
var fo = new FlashObject("bannerflash.swf", "animationName", "681", "141", "8");
fo.addParam("allowScriptAccess", "sameDomain");
fo.addParam("wmode", "transparent");
fo.addParam("quality", "high");
fo.addParam("scale", "noscale");
fo.addParam("loop", "false");
fo.write("flashcontent3");
</div>
</script>
mburt
02-14-2007, 11:43 PM
You know you have to put in your own values for x and y, like 50 and 100.
Merciless
02-14-2007, 11:51 PM
yeah i know, but will that code even work if i just replace the "px" with "&#37;" was my question.

EDIT: when i try that code, even after replacing the X, the flash animation not only doesn't display properly, it doesn't display at all...
mburt
02-15-2007, 12:11 AM
Yes, but &#37; is different from px. It's basically px/100, or how it's positioned on the page divided into 100ths.
BLiZZaRD
02-15-2007, 12:39 AM
Who taught you how to embed FO's? :D
bugboy
02-21-2008, 04:25 PM
Just set all your DIV elements to "margin: 0 auto" and your elements will center in firefox correctly
boogyman
02-21-2008, 04:38 PM
welcome to the forums bugboy


Just set all your DIV elements to "margin: 0 auto" and your elements will center in firefox correctly

if you look at the timing of this thread, it was from a year and 1 week ago.

also, just putting


margin: 0 auto

on all the elements will do nothing unless the developer has set the width of that element to something less than 100% (default).