Why does paragraph display weirdly inside div

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Markus
    Recognized Expert Expert
    • Jun 2007
    • 6092
    #1

    Why does paragraph display weirdly inside div

    I'm a new designer and pretty young - 16.
    I've recently encountered a problem with the paragraph tag inside a div.
    I have a div within a div (both with id selectors) when i place a paragraph tag within the second div the line moves into a different posistion. Without the p tag the text is displayed properly.
    Please help, it would be much appreciated.
    Code:
    <body bgcolor="#999999">
<div id="content">
<div id="content-top-bar"><p>This text appears a line down as to where you would expect it to be.<p/></div>
</div>
</body>
body{
background-color: #999999;
margin: 0;
padding: 0;
}

#content{
background-color: #ffffff;
margin: 0 15% 0 15%;
height: 600px;
padding: 4px;
}

#content-top-bar{
background-color: #ffffff;
height: 40px;
border-width: 2px 2px 6px 2px;
border-style: solid;
border-color: #999999;
}
    Tags: None
    • Markus
      Recognized Expert Expert
      • Jun 2007
      • 6092
      #2
      It happens with any tag i use inside the div. :( This is so annoying. I've searched for hours and it's such a small script. I feel like such a damn failure, i've got no chance if i can't even suss this out. >=[

      here's the example
      Last edited by Markus; Jun 24 '07, 09:49 PM. Reason: add link

        Comment

        • drhowarddrfine
          Recognized Expert Expert
          • Sep 2006
          • 7434
          #3
          You need to be more specific. What line? Which tags? Also, you declare Xhtml but some of your markup does not exist in Xhtml and is incorrect in html.

            Comment

            • nathj
              Recognized Expert Contributor
              • May 2007
              • 937
              #4
              Originally posted by markusn00b
              I'm a new designer and pretty young - 16.
              I've recently encountered a problem with the paragraph tag inside a div.
              I have a div within a div (both with id selectors) when i place a paragraph tag within the second div the line moves into a different posistion. Without the p tag the text is displayed properly.
              Please help, it would be much appreciated.
              Code:
              <body bgcolor="#999999">
<div id="content">
<div id="content-top-bar"><p>This text appears a line down as to where you would expect it to be.<p/></div>
</div>
</body>
body{
background-color: #999999;
margin: 0;
padding: 0;
}

#content{
background-color: #ffffff;
margin: 0 15% 0 15%;
height: 600px;
padding: 4px;
}

#content-top-bar{
background-color: #ffffff;
height: 40px;
border-width: 2px 2px 6px 2px;
border-style: solid;
border-color: #999999;
}
              One possible option is to set up a specific p class in the css that sets the padding and margins exactly as you want them.

              Also try setting the position of the nested div to relative. I've had similar issues myself recently and this sorted me out. Unfortunately my development is currently all local so I can't show you that.

              Finally, playing around with this stuff is often the name of the game, you are not a failure - be more positive.

              Cheers
              Nathan

                Comment

                • Markus
                  Recognized Expert Expert
                  • Jun 2007
                  • 6092
                  #5
                  Originally posted by nathj
                  One possible option is to set up a specific p class in the css that sets the padding and margins exactly as you want them.

                  Also try setting the position of the nested div to relative. I've had similar issues myself recently and this sorted me out. Unfortunately my development is currently all local so I can't show you that.

                  Finally, playing around with this stuff is often the name of the game, you are not a failure - be more positive.

                  Cheers
                  Nathan
                  I tried the posistion: relative but nothing changed. I also changed the declaration to html - nothing happened. It looks as though there's something pushing the text down from the top andalso it isn't even being contained inside the div. It's just floats past it exceeding the div. - This was because of the height: 30px;
                  I've tried and tried all i can think of - which, in all honesty, isn't much.

                  - it's giving a blank line-break before and after the actual tag. This happens with most tags and all the line breaks are relative to the size of the text.

                  Could this be something to do with block elements?

                  Where can i find the CSS HTML God?

                  <3

                    Comment

                    • Markus
                      Recognized Expert Expert
                      • Jun 2007
                      • 6092
                      #6
                      Originally posted by drhowarddrfine
                      You need to be more specific. What line? Which tags? Also, you declare Xhtml but some of your markup does not exist in Xhtml and is incorrect in html.

                      Line 3, sorry. I changed the declaration to no avail. I'll just keep trying with it, somethings got to give, right?

                      <3

                        Comment

                        • Markus
                          Recognized Expert Expert
                          • Jun 2007
                          • 6092
                          #7
                          Ok, it appears it's only in Opera. Sorry.

                          Opera is no-longer my favourite browser.

                          <3

                            Comment

                            • nathj
                              Recognized Expert Contributor
                              • May 2007
                              • 937
                              #8
                              Originally posted by markusn00b
                              I'm a new designer and pretty young - 16.
                              I've recently encountered a problem with the paragraph tag inside a div.
                              I have a div within a div (both with id selectors) when i place a paragraph tag within the second div the line moves into a different posistion. Without the p tag the text is displayed properly.
                              Please help, it would be much appreciated.
                              Code:
                              <body bgcolor="#999999">
<div id="content">
<div id="content-top-bar"><p>This text appears a line down as to where you would expect it to be.<p/></div>
</div>
</body>
body{
background-color: #999999;
margin: 0;
padding: 0;
}

#content{
background-color: #ffffff;
margin: 0 15% 0 15%;
height: 600px;
padding: 4px;
}

#content-top-bar{
background-color: #ffffff;
height: 40px;
border-width: 2px 2px 6px 2px;
border-style: solid;
border-color: #999999;
}
                              Just spotted something- line 3 the closing paragraph tag is written as <p/>, this should be </p>.

                              Does that make any difference?

                              nathj

                                Comment

                                • Markus
                                  Recognized Expert Expert
                                  • Jun 2007
                                  • 6092
                                  #9
                                  Originally posted by nathj
                                  Just spotted something- line 3 the closing paragraph tag is written as <p/>, this should be </p>.

                                  Does that make any difference?

                                  nathj

                                  Nope. I really can't suss what the problem is. I've given up now but thanks anyway :)

                                  xx

                                    Comment

                                    Previous template Next
                                    Working...