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 7 of 7
  1. #1
    New Coder
    Join Date
    Feb 2004
    Posts
    54
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS Float Question

    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>

  • #2
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    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?
    Code:
    <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>

  • #3
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by koyama View Post
    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).

    Code:
    <!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>
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #4
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    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.

    Quote Originally Posted by Arbitrator View Post
    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.

    Quote Originally Posted by Arbitrator View Post
    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:
    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>

  • #5
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by koyama View Post
    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
    Your 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.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #6
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    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.

  • #7
    New to the CF scene
    Join Date
    Feb 2007
    Location
    upstate SC, USA
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Helped me as well

    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.


  •  

    Posting Permissions

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