IE Paragraph (p) Problem

Discussion in 'HTML & Website Design' started by wd_2k6, Apr 20, 2008.

0
  1. #1
    Hi, I have a paragraph within a nested div with some padding, this works OK, apart from the bottom div, theres no difference between the 2? It displays fine in FF but not in IE, I belive it's something to do with the paragraph settings in IE. Here Check out this example:

    HTML:

    <div id="div1">

    <div class="nested">
    <p>This is fine</p>
    </div>
    <div class="nested">
    <p>This is fine</p>
    </div>
    <div class="nested">
    <p>This isn't fine, what's so different? Wheres the 20px red below this that shows in FF?</p>
    </div>

    </div>

    CSS:

    p {
    margin: 0;
    padding: 10px;
    }

    #div1 {
    background-color: red;
    padding: 10px;
    }

    .nested {
    background-color: pink;
    margin: 10px;
    }

    Many Thanks in advance to anybody who can help in any way.
     
    wd_2k6, Apr 20, 2008 IP
  2. Xezor1324

    Xezor1324 Peon

    Messages:
    13
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    It worked the same for me in both. I don't understand what the problem is?
     
    Xezor1324, Apr 20, 2008 IP
  3. itcn

    itcn Well-Known Member

    Messages:
    795
    Likes Received:
    31
    Best Answers:
    0
    Trophy Points:
    118
    #3
    The problem is only in IE 6. Try adding a clear BR after the P:

    <br clear="all">

    like this:

    <div class="nested">
    <p>This isn't fine, what's so different? Wheres the 20px red below this that shows in FF?</p>
    <br clear="all">
    </div>
     
    itcn, Apr 21, 2008 IP
  4. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Hey, the problem is definatley in IE 7 also i just copied the code exactly from this thread to double check, the problem is that the last (third) div at the bottom does not close off properly.
    A solution to this would be to add 10px padding to all the Div's rather than the paragraphs I reckon but this would cause more hassle and more CSS.

    I tried the <br clear="all" /> and it worked fine, however this then produces an unwanted space at the bottom of the div, from the line break. Simply putting a space (&nbsp ;), after the closing </p> tag works, but this again produces unwanted space. It seems it is nothing to do with clearing as theres nothing to clear, but it requires some text after the closing </p> for the padding to work properly for some reason!!

    Here is an extreme example of the problem just to point of the problem in IE:

    
<!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" />
<title>Untitled Document</title>
<style type="text/css" media="screen">
p {
margin: 0;
padding: 10px;
}

#div1 {
background-color: red;
padding: 10px;
}

.nested {
background-color: pink;
margin: 100px;
}

</style>
</head>

<body>
<div id="div1">
<div class="nested">
<p>This div doesn't close off properly, it should only have 10px padding at the bottom.</p>
</div>
</div>
</body>
</html>
    Code (markup):
    I've solved it at the moment by just adding some text that i didn't really want to add underneath the div which forces it to close, however it would be interesting to know why this happens.
     
    wd_2k6, Apr 21, 2008 IP
  5. itcn

    itcn Well-Known Member

    Messages:
    795
    Likes Received:
    31
    Best Answers:
    0
    Trophy Points:
    118
    #5
    Ah, I see now. I fixed it in IE6 by defining the P tag:

    .nested p {
    padding: 0px;
    margin: 0px;
    }
     
    itcn, Apr 21, 2008 IP