Social Buttons
  1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

P width not 100% on AppleWebKit/537.36

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

0
  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>
    SEMrush
    <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
    SEMrush
  2. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    6,138
    Likes Received:
    1,208
    Best Answers:
    22
    Trophy Points:
    400
    #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,572
    Likes Received:
    108
    Best Answers:
    2
    Trophy Points:
    215
    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,572
    Likes Received:
    108
    Best Answers:
    2
    Trophy Points:
    215
    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,572
    Likes Received:
    108
    Best Answers:
    2
    Trophy Points:
    215
    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:
    6,138
    Likes Received:
    1,208
    Best Answers:
    22
    Trophy Points:
    400
    #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