P width not 100% on AppleWebKit/537.36

Discussion in 'CSS' started by xms, Mar 14, 2016.

  1. #1
    Hello,

    Sometimes the width of a text paragraph (p tag) is not 100% of the width of its parent div. Why is that so?

    When a p tag has background-color:#FFFFFF, the width is 100%, but if there is background-color:transparent or no background-color, the width is not 100%.

    Help me, please.

    <html>

    <head>
    <title>Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <meta http-equiv="Content-Language" content="fi" />
    </head>

    <body style="background-color:blue">
    <div style="width:600px; margin-left:auto; margin-right:auto; background-color: #FFFFFF;">
    <p>This width is not 100% - This width is not 100% - This width is not 100% - This width is not 100%</p>

    <p style="background-color:transparent">This width is not 100% - This width is not 100% - This width is not 100% - This width is not 100%</p>

    <p style="background-color:#FFFFFF">This width is 100% - This width is 100% - This width is 100% - This width is 100%</p>
    </div>
    </body>

    </html>
     
    xms, Mar 14, 2016 IP
  2. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,278
    Likes Received:
    1,696
    Best Answers:
    31
    Trophy Points:
    475
    #2
    Don't forget to add <!DOCTYPE html> to your page(s).

    Why are you using style tags? Make classes, put them into a .css page and update your html page.

    Try this, see if it works:

    .css (save it as a style.css file)

    
    body {
    font-family: Arial, sans-serif;
    background-color:blue;
    }
    . container {
    width:600px;
    margin-left:auto;
    margin-right:auto;
    background-color: #FFFFFF;
    }
    p.new {
    width: 100%;
    background-color: #FFFFFF;
    }
    
    Code (markup):
    Your new html:
    
    <!DOCTYPE html>
    <html>
    <head>
    <title>Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <meta http-equiv="Content-Language" content="fi" />
    <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
    <div class="container">
    <p class="new">Some text goes here...</p>
    </div>
    </body>
    </html>
    
    Code (markup):
    You can change that p.new in your .css to whatever you want.
     
    qwikad.com, Mar 14, 2016 IP
  3. xms

    xms Active Member

    Messages:
    169
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    53
    #3
    Yes, that works, but unfortunately it does not make any difference.

    In other words, when there is...

    p.new {
    width: 100%;
    }

    ...it does not work on AppleWebKit/537.36. The width of the text is not 100%.

    Any
    ideas?
     
    xms, Mar 14, 2016 IP
  4. Zoti Media Group

    Zoti Media Group Notable Member

    Messages:
    1,599
    Likes Received:
    113
    Best Answers:
    2
    Trophy Points:
    265
    Digital Goods:
    2
    #4
    Or this:

    
    <p style="background-color:#FFFFFF"; width:"100%";>
    Code (markup):
     
    Zoti Media Group, Mar 14, 2016 IP
  5. xms

    xms Active Member

    Messages:
    169
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    53
    #5
    Does not help.
     
    xms, Mar 14, 2016 IP
  6. Zoti Media Group

    Zoti Media Group Notable Member

    Messages:
    1,599
    Likes Received:
    113
    Best Answers:
    2
    Trophy Points:
    265
    Digital Goods:
    2
    #6
    Now I see your problem. You have a div 600px. So every <p> you add into that div can be max 600px. You can not use 100% on width. Try using px ex. 850px.
     
    Zoti Media Group, Mar 14, 2016 IP
  7. xms

    xms Active Member

    Messages:
    169
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    53
    #7
    Have you tested your idea on AppleWebKit/537.36?
     
    xms, Mar 14, 2016 IP
  8. Zoti Media Group

    Zoti Media Group Notable Member

    Messages:
    1,599
    Likes Received:
    113
    Best Answers:
    2
    Trophy Points:
    265
    Digital Goods:
    2
    #8
    Thats a general rule. So it will be the same everywhere. If you add <div> with 600px it will be 600px.
     
    Zoti Media Group, Mar 14, 2016 IP
  9. xms

    xms Active Member

    Messages:
    169
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    53
    #9
    I believe I have tried that way. My problem might have something to do with zoom level. It happens on AppleWebKit/537.36.
     
    xms, Mar 14, 2016 IP
  10. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,278
    Likes Received:
    1,696
    Best Answers:
    31
    Trophy Points:
    475
    #10
    I am not sure why it's not working but upon reading online it appears to be some kind of a bug.

    Did you try adding:

    display: block;

    or

    display: table;
     
    qwikad.com, Mar 14, 2016 IP