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

    Different browser behaviours with absolute positioning and the p tag

    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 completly 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 publicised 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>
    [\code]

  • #2
    Gütkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    All browsers use default stylesheets that you can override with your custom stylesheets. Usually <p> elements have a default 1em top and bottom margin, and that's what you are seeing there. IE7 (why are you still using that?) apparently doesn't, and that's why it looks different there.

    The usual way to deal with those differences is to load up a reset stylesheet (just google that and you will find plenty of information) before adding any custom styles, so you can start with a clean slate in all browsers. After resetting all default styles, you will have to define them manually, though, so, for instance, <p> will still have a bottom margin, or <strong> will still show bold text.

    This is obviously a CSS problem. I moved the thread.

  • Users who have thanked venegal for this post:

    deiter (02-24-2011)

  • #3
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    It's worth noting that the renderings are the same between Firefox 4 Beta 11 and Internet Explorer 9 Release Candidate (1); they both exhibit the mentioned "Mozilla/Chrome" rendering.

    The mentioned issue can be ameliorated by simply adding #TitlePos p, #StatementPos p { margin: 0; } to your style sheet.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • Users who have thanked Arbitrator for this post:

    deiter (02-24-2011)

  • #4
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    OK thanks guys that explains it. I confirmed that adding { margin: 0; } fixes the problem and they all get rendered the same way now, with the desired layout.

    Thanks and sorry for posting in the wrong forum!

    P.S> I'm using IE 8.0, not IE 7.0... Doh!
    Last edited by deiter; 02-24-2011 at 10:16 PM.


  •  

    Posting Permissions

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