Unwanted Break in Divs

[nizzleworkz]

I am battling with a problem I've encountered with all my new sites lately. (I'm fairly new to web designing and coding, but not a total newbie)

I use Dreamweaver CS3 and all my sites have there own style sheets attached.

For some reason, the first <p> tag in all my divs gives this unwanted break (so there is a massive gap between the top of the div and the beginning text). Usually, I have to go in and delete the first <p> tag in every page in every div to avoid this, its driving me nuts.

I can post my style sheet coding upon request. Thanks for any help!

[D_Blackwell]

Welcome to WebmasterWorld.

the first <p> tag in all my divs gives this unwanted break (so there is a massive gap between the top of the div and the beginning text).

Stripping down the code should pretty readily identify where the issue is coming from. Have you got some padding-top: or margin-top: in the <div>s? Only the first <p> makes me want to look really hard at what is being declared in the <div>

If that doesn't work, post enough CSS and HTML to replicate the problem. I'm betting that that process will most likely expose the problem pretty quickly in this instance.

Usually, I have to go in and delete the first <p> tag in every page in every div to avoid this

That does not sound good. Are you closing an unopened <p>? What of the first 'true' <p>? How does it render? Have you validated the HTML?

W3C HTML Validation [validator.w3.org]

[piskie]

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

This will make the paragraph have Zero margin and Zero padding on all four sides. You can then introduce either exactly where you need it.

The order of the four values is Top Right Bottom Left.

[D_Blackwell]

This will make the paragraph have Zero margin and Zero padding on all four sides.

That p declaration will have to be classed or it will be a global and affect all.

p.hack {
margin: 0;
padding: 0;
}

Also, it is just a different hack around the cause of the problem.

[piskie]

Obviously that's right.

However in some designs, it can be an advantage to set all to zero and reintroduce as you see the layout evolve. That's why I suggested starting that way with it easy to introduce in each of the four directions in whatever degree is required.

Then the global p can be set as well as any p classes.

[nizzleworkz]

Wow, thank you two for the quick responses! To just get through and briefly reply to all the suggestions:

I tried setting margin and padding to 0, I experimented with line height, nothing worked unless I deleted the p tag which I shouldn't have to, right? So I tried your two suggestions, and that seems to work for the first time. My argument now, whether I use the global or the class, is I shouldn't have to do this either way. I would still like to try find the problem. Here is my style sheet followed by the HTML (it is small because I just started building the site and it isnt live, thats why I couldn't validate)

STYLE SHEET:
body {
background-color: #fbd3d3;
margin: 0px 0px 0px 0px;
}

#wrapper {
background-image: url(images/bkg_image.gif);
background-repeat: repeat-y;
margin-top: 0px;
margin-bottom: 0px;
margin-right: auto;
margin-left: auto;
padding-top: 0px;
padding-right: 25px;
padding-bottom: 20px;
padding-left: 25px;
position: static;
width: 530px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #f26a69;
text-align: left;
z-index: 0;
}

#header {
background-image: url(images/nizzleworkz_header.jpg);
background-repeat: no-repeat;
margin-left: 0px;
margin-top: 0px;
height: 95px;
width: 530px;
}
#header {
background-image: url(images/nizzleworkz_header.jpg);
background-repeat: no-repeat;
margin-left: 0px;
margin-top: 0px;
height: 95px;
width: 530px;
}

#link_home {
background-image: url(images/link_bkg.gif);
background-repeat: no-repeat;
width: 75px;
height: 23px;
margin-top: 0px;
margin-left: 290px;
text-align: center;
padding-top: 4px;
position: absolute;
}

#link_portfolio {
background-image: url(images/link_bkg.gif);
background-repeat: no-repeat;
width: 75px;
height: 23px;
margin-top: 0px;
margin-left: 370px;
text-align: center;
padding-top: 4px;
position: absolute;
}

#link_contact {
background-image: url(images/link_bkg.gif);
background-repeat: no-repeat;
width: 75px;
height: 23px;
margin-top: 0px;
margin-left: 450px;
text-align: center;
padding-top: 4px;
}

#content {
margin-top: 10px;
width: 530px;
overflow: auto;
}

#colA {
width: 345px;
float: left;
}

#colA_header {
height: 23px;
}

#colA_content {
background-color: #fef5f5;
padding: 3px 3px 3px 3px;

}

#colB {
width: 174px;
margin-left: 10px;
float: right;
}

#colB_header {
height: 36px;
}

#colB_content {
background-color: #fef5f5;
padding: 3px 3px 3px 3px;
}

And here is my HTML:

<div id="wrapper">

<div id="header">
<div id="link_home"><a href="index.html">home</a></div>
<div id="link_portfolio"><a href="portfolio.html">portfolio</a></div>
<div id="link_contact"><a href="contact.html">contact</a></div>
</div>


<div id="content">

<div id="colA">
<div id="colA_header"><img src="images/homepage_title.gif" alt="South African Web Designer" width="345" height="23" /></div>
<div id="colA_content">
<p class="hack">Designing, although arguable, is a modern form of art and is the quest for design solutions. It is still very new to South Africa, but a blooming success nonetheless. It has been my passion for many years now to beautify the web with my learned talent, as well as the world of design in advertising. Although it often seems as if the best ideas are the simplest, it never is. Designing is an entire process that requires careful thought and preparation, as well as a lot of patience... This is what I offer you. </p>
<p>I have my BA in Graphic Design and a good knowledge of website design that I have self-taught myself and learnt through the web design firm I currently work for. I offer the designing of websites, building them with XHTML and CSS coding languages, as well as animated extras through flash. My Graphic Design work is unlimited. Please browse through my portfolio and have a look at my designs. I can create new corporate identities or work with existing ones, advertising campaigns and email stationary/ newsletters, to name but a few.</p>
</div>
</div>

<div id="colB">
<div id="colB_header"><img src="images/latest_work_title.gif" alt="My Latest Projects" width="174" height="36" /></div>
<div id="colB_content">test</div>
</div>

</div>

</div>

I wasnt sure how much was needed so I hope this isnt overwhelming. The problem occurs in colA_content

[nizzleworkz]

Sorry ignore double header id >.< It was put in twice while I was going through what to include.

[D_Blackwell]

So, you really just want to remove the margin-top: from the first <p> in each col_content.

I would just class it and call for the first <p> in each. This will work.
p.hack (
margin-top: 0;
}

This will also work:
#colA_content p.hack, #colB_content p.hack {
margin-top: 0;
}

This will work when you are ready to abandon support for IE6. Then you won't have to class the <p> at all. There should be a lot more CSS power available when IE at least catches up halfway and we can actually use that power for more than developing skills.

.colA_content p:first-child, .colB_content p:first-child {
margin-top: 0;
}

[pinterface]

As a note of caution, blank space between tags is often problematic.

<div><p>

and

<div> <p>

are not the same thing!

So when you write

<div id="colA_content">
<p class="hack">

what you are really writing is not

<div>

<p>

but

<div>
blank line!

<p>

Try instead

<div
><p>

or

<div><p>

to eliminate that blank line.

[swa66]

pinterface: where in w3.org did you find that there is supposed to be a blank line ?
(links to www.w3.org are ok, so feel free to point to the right page)

What I think you're referring to is one of the many bugs in IE, but if the standards would say otherwise, I'll gladly retract that comment.

The day we'll finally get rid of IE6, we could do better than the first child pseudo selector and start to use other selectors too:

h1, h2, p {
 margin: 0; 
}
h1+h2 {
 margin-top: 0.3em;
}
p+h2 {
 margin-top: 0.9em;
}
h2+p, p+p { 
 margin-top: 0.6em;
}

Well, we can only hope the market share for IE6 goes downhill soon and fast.

For the impatient: there's IE7.js to "fix" this somewhat for IE6.

More info on adjacent selectors: [w3.org ]

[SuzyUK]

As a note of caution, blank space between tags..

sorry pinterface but that is a MYTH. As swa66 has said. It's all here somewhere already, that particular point you are making about HTML whitespace *is* an IE bug, already covered here IIRC, if you want we can try to help find the threads. (WebmasterWorld search is pretty poor) or if you do have some new info, then do share, we're usually in danger of trying to keep IE users happy, but we maybe have missed a new 'development'?

[edited by: SuzyUK at 7:28 am (utc) on Sep. 12, 2008]

[pinterface]

Whoops! You guys are right, I'm not only wrong, I'm provably wrong:
From [w3.org ]:

SGML (see [ISO8879], section 7.6.1) specifies that a line break immediately following a start tag must be ignored, as must a line break immediately before an end tag. This applies to all HTML elements without exception.

Hopefully I'm just thinking of XML and haven't completely lost it. :)

[swa66]

I'm not that familliar with the XML specs, but I'm afraid it will classify the line breaks and spaces in

 <one>
  <two />
 <one> 

as insignificant white space (unless otherwise defined), much like html does.

[nizzleworkz]

Thank you all for the response, I can tell you it is not an IE6 problem. The problem I have appears in Dreamweaver itself, and all the browser I test it in (IE, FF, Opera, etc etc). I appreciated your response D_Blackwell, but I still shouldn't have to put coding in to remove this error (you know what Im saying?) and out of my entire web company I am the only one having this problem. (Trust me, the just <p> or <p class=...> still make the break, I have tried everything.)

Can it be my software?

[swa66]

nizzleworks:

I pasted your CSS and HTMl in a little xhtml framework and looked at what FF3 does with your stuff. I don't see it's doing anything abnormal or unsuspecting.

You do have a lot of white space there, but it's contributed by:

• padding of 3px on the div
  
• default margins on the <p>

If you remove the padding on the div, the margins of the <p> will collapse with the margins of whatever is on top of it, so that would make a big difference.

In order to not get bitten by default margins and padding, whenever I start a CSS from scratch, the very first thing I add is

* { 
  margin:0;
  padding:0;
}

I then add padding and margins where I need them (esp. lists will need something to function again).

Tip get yourself firebug and/or the webmaster toolbar (they are plug-ins for Firefox) and learn to use them, it'll help you a lot in understanding where your elements are and how and why things go where they do.

So since we now know it's margins that you want to remove in your hack class, I guess the quick fix could be:

.hack {
  margin-top:0;
}

[nizzleworkz]

Thank you for your suggestion. I think the global margin and padding 0 is a good idea, either way. Thank you all for the wonderful response, I have a good place to get help from now on!~