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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Browser differences displaying text using absolute position

    I'm trying to understand why the browsers IE, Mozilla & Chrome display absolute positioned text differently. In the example below I'm using absolute positioning to render two lines such that each is approximately centered horizontally and together, the two lines are approximately centered vertically as well.

    There are two scenarios:

    1) If you cut the code below and render in the browsers you'll find that all three browsers display it the same way, and as expected, so that's good.

    2) Now if you wrap the text portions "BANNER TITLE" and "STATEMENT:" in paragraph tags like this <p>BANNER TITLE</p> and <p>STATEMENT:</p> you'll find that IE renders it the same way, but Mozilla & Chrome move the text well down the containing div and completely messes up the vertical format.

    A couple of questions:

    1) What is causing these differences between IE and Mozilla/Chrome in #2? Is it one of the well publicized IE css bugs? If so which one? It seems to me that IE is doing it right, but since two others do it the same way, that's likely incorrect. Why does Mozilla & Chrome move the text down?

    2) What's the best way of dealing with the problem? I suppose I could just go with option option #1, but I'd really like to understand what's going on here. I was thinking that I could get 'round any IE bugs and have them at least all behave the same way by explicitly setting values for the p tags (that's what the commented ".StatementPos p" and ".TitlePos p" styles are for, but it made no difference; same result as #2 above.

    Thanks
    Deiter

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
       <head>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
       <style>
          .banner
          {
             display: block;
             position: absolute;
             width: 163px;
             height: 28px;
             top: 0px;
             left: 0px;
             background:#FF0000;
          }
          .TitlePos
          {
             display: block;
             position: absolute;
             top:1px;
             left:45px;
          }
          /*.TitlePos p
          {
             display: block;
             position: absolute;
             width: 163px;
             height: 14px;
             top:0px;
             left:0px;
          }*/
          .BannerText
          {
             color:#FFFFFF;
             font-family:Arial, Helvetica, sans-serif;
             font:Arial, Helvetica, sans-serif;
             font-size:10px;
             font-weight:bold;
          }
          .StatementPos
          {
             display: block;
             position: absolute;
             top:12px;
             left:50px;
          }
          /*.StatementPos p
          {
             display: block;
             position: absolute;
             height: 14px;
             top:0px;
             left:0px;
          }*/
       </style>
       <title>Test</title>
       </head>
       <body>
          <div class="banner BannerText">
             <div class="TitlePos">
                BANNER TITLE
             </div>
             <div class="StatementPos">
                STATEMENT:
             </div>
          </div>
       </body>
    </html>

  • #2
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts
    Firstly, I believe that you should use lowercase for css. Unless you use camel code like .mainContent
    Secondly have you added margin: 0; padding: 0; to your divs.
    Last edited by quartzy; 02-24-2011 at 06:18 PM.

  • #3
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Didn't you already post this same exact question just a day or so ago? lol Which I think someone gave you an answer.
    Teed

  • #4
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Indeed you are right! I received an email admonishing me for posting in the wrong forum. There was no indication that a useful response had been left though, so I figured it had just been removed so I re-posted.

    The solution can be found in the original thread.

    Sorry for all the confusion... How to annoy the entire forum with just one problem!!


  •  

    Posting Permissions

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