...

View Full Version : CSS Float Question



Wee Bubba
02-03-2007, 05:28 AM
Could some kind soul tell me why the content of the paragraph below renders how i want in IE7 but not in firefox. i am looking for the image to be aligned to the left and the text to the right with the whole thing centred thanks


<div style="text-align:center;">

... centred stuff

<p style="width:70%;text-align:left;font-size:x-small;color:#999999;clear:both;">
<a style="float:left;" href="http://www.macromedia.com/go/getflashplayer" target="_blank"><img src="images/getflash.gif" alt="Get Flash Player" width="88" height="31" /></a>
<span style="float:right;">In order to listen to the sound clip, you will need Flash&reg; Player
installed on your computer. Click the icons to download the player (it's&nbsp;FREE and only
takes a few seconds to&nbsp;install).</span>
</p>
<div>

koyama
02-03-2007, 08:00 AM
You cannot center block-level elements using text-align: center. The proper way is using margin: 0 auto
Try this instead: (remove the outer div)

IE erroneously also centers block-level elements when you declare text-align: center. Various sources on the web state that this only happens in quirks mode. It doesn't seem to fit with my observations. Seems that it is also the case in standards mode. Can anyone clarify this?


<p style="width: 70%; margin: 0 auto; text-align:left;font-size:x-small;color:#999999;clear:both;">
<a style="float:left;" href="http://www.macromedia.com/go/getflashplayer" target="_blank"><img src="images/getflash.gif" alt="Get Flash Player" width="88" height="31" /></a>
<span style="float:right;">In order to listen to the sound clip, you will need Flash&reg; Player
installed on your computer. Click the icons to download the player (it's&nbsp;FREE and only
takes a few seconds to&nbsp;install).</span>
</p>

Arbitrator
02-03-2007, 08:58 AM
IE erroneously also centers block-level elements when you declare text-align: center. Various sources on the web state that this only happens in quirks mode. It doesn't seem to fit with my observations. Seems that it is also the case in standards mode. Can anyone clarify this?According to a test with the following code, it applies to Internet Explorer 6 and 7ís standards‐compliance mode. I couldnít get the text-align: center declaration to center block‐level elements except when applied to the body element in either mode though; I also tried applying it to the html, div, and p elements. I think references that this only applies to quirks mode have something to do with it being the only CSS method of centering in that mode (the proper method fails).


<!doctype html public "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html lang="en-US">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="Author" content="Patrick Garies">
<title>CF 106615</title>

<style type="text/css">
* { margin: 0; }
html { background-color: white; color: black; padding: 1em; }
body { text-align: center; }
p { width: 500px; height: 500px; padding: 1em; background-color: pink; }

/* This is an intentionally invalid CSS declaration.
If in quirks mode, the background color will be red. */
html { background-color: ff0000; }
</style>

</head>
<body>

<p>The pink box should not be centered. The text inside should be centered, however.</p>

</body>
</html>

koyama
02-03-2007, 10:11 AM
Thank you very much Arbitrator,
I tried your code and it does show that IE6/7 centers the pink paragraph also in standards mode. Very glad you could verify this.


I think references that this only applies to quirks mode have something to do with it being the only CSS method of centering in that mode (the proper method fails).

I didn't even know that. And it sounds to me like a good explanation why there is double confusion.


I couldnít get the text-align: center declaration to center block‐level elements except when applied to the body element in either mode though. I also tried applying it to the html, div, and p elements.

strange... I seem to be able to center block-level elements also when I apply text-align: center to a <div> element cotaining a block element... or am I misunderstanding what you are saying? This means that I have still not found an example where IE6/7 doesn't center block elements under the declaration text-align: center

I used this code:


<!doctype html public "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>text-align: center ?</title>
<style type="text/css">
html { background-color: white; color: black; padding: 1em; }
div { text-align: center;}
p { width: 300px; height: 300px; padding: 1em; background-color: orange; }

/* This is an intentionally invalid CSS declaration.
If in quirks mode, the background color will be red. */
html { background-color: ff0000; }
</style>

</head>
<body>
<div>
<p>The orange box should not be centered. The text inside should be centered, however.</p>
</div>
</body>
</html>

Arbitrator
02-04-2007, 03:27 AM
strange... I seem to be able to center block-level elements also when I apply text-align: center to a <div> element cotaining a block element... or am I misunderstanding what you are saying? This means that I have still not found an example where IE6/7 doesn't center block elements under the declaration text-align: centerYour example clears things up. Apparently, I was misinterpreting how Internet Explorer uses text-align: center to center block‐level elements. I was applying it to the element to be centered, like I would with margin: 0 auto, rather than to the parent of the element. I havenít used that method of centering block‐level elements since I used Internet Explorer 5 on Windows 98 years ago, so I guess Iím a bit rusty.

koyama
02-04-2007, 02:22 PM
Thanks Arbitrator. I really needed help with understanding this. Now everything seems clear. Hopefully, others may benefit from the examples. Thank you again for your valuable input.

gaddygirl
02-05-2007, 07:08 PM
This was helpful to me as I'm struggling with my Suckerfish-style menu. I couldn't understand why the dropdown menus were aligning their left edge on the centerline of each main nav heading instead of left aligning - but ONLY in IE6... I took off the text-align and sure enough, they lined up right.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum