Forum Moderators: not2easy
The HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="eng">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>On's Photography</title>
<link rel="stylesheet" type="text/css" media="screen" href="test_style.css" />
</head>
<body>
<div id="header">
<h1>On</h1>
</div>
<div id="content">
<a href="test_link.html">Cheese it, the cops!</a>
<p>testing</p>
</div>
</body>
</html>
The CSS
#header {
border: #009900 1px solid;
margin: 0px;
padding: 0px;
}
#content {
border: #000099 1px solid;
margin: 0px;
padding: 0px;
}
I don't see the gap dissappearing like you do but it's caused by margin on the <h1>.
h1 {margin: 0;}
Will fix it.
Nick
I should have come here sooner. ;)
When I first came across it I stripped the html down until it was just the two divs, and of course it was still happening. I must have spent the next hour trying everything I could think of in regards to the divs, whilst never even considering the <h1> tags. If I'd been smarter I would have taken them out too.
Nick
If I remove the <h3> and the <p> the gap disappears. But I need those elements inside the div.
What I don't understand is that a <div> is a block element. So it should generate a line below it, yet the other main browsers beside Opera have the divs touching.
Yet inside the divs, the paragraphs have a gap below them except in Opera. Again, a paragraph is a block element, so shouldn't there be a gap after it?
<edit>Solved it. I removed the divs! I wanted a line between them by giving a bottom border to each div. Instead I am adding a top border to the <h3> along with 15 pixels of top padding. Looks great!</edit>
Try this..
<div style="border: 1px solid red;">
<p>some text</p>
<p>blah blah</p>
</div>
<div style="border: 1px solid red;">some footer text</div>
..when viewed in IE6 and NN7 it renders as a div containing two paragraphs, with another div directly below it containing the footer text. The borders of the divs touch.
But in Opera the final paragraph has no bottom margin and is hard up against the bottom of the div. Plus a gap has appeared between the divs.
In other words the first div is not containing the paragraph and its bottom margin properly - instead the bottom margin of the paragraph is appearing outside its containing div! Very odd.
Solution
Well setting margin:0 on your paragraphs is going to make them all bunch together. So you'll just have to add that space between them using
padding-bottom: 1em;Of course if your doing something bizarre like drawing boxes around your paragraphs then this will look a little weird, but otherwise it should be okay.
I wanted a line between them by giving a bottom border to each div. Instead I am adding a top border to the <h3>
Why not just use the <hr> tag?
What I don't understand is that a <div> is a block element. So it should generate a line below it,
check you assumptions: Block elements do not cause 'lines to be generated' anywhere.
Some block elements (like <form> for instance) have a default value for
margin-bottommargin:0
Divs are by default block level elements. They are also aligned to the baseline of other elements, if displayed in line with these.
Paragraphs are by default block level elements. As such, they have a margin, below the baseline of the contained text block. The are also aligned to the baseline of other elements, if displayed in line with these.
Obviously, and for some odd reason, Opera 7 gives precedence to the baseline alignment when a paragraph resides inside a div. If the div has no borders or background colors, this oddity doesn't really matter - the space between the text block in the paragraph and the element immediately following the div remains the same.
However, Opera 7 draws the div border in line with the baseline of the paragraph, causing the paragraph margin to appear "outside" the div.
Simply giving margin-bottom its default value (1em) adds space inside the div, but the space after the div still remains. Of course, applying padding, like grahamstewart suggests, solves the problem. However, the margin has to be set to zero.
The same phenomenon happens if the paragraphs are replaced with headings.
<div style="border: 1px solid red;">
<h1>Test</h1>
<h2>Test</h2>
</div>
<div style="border: 1px solid red;">Test</div>
Opera 7.1x has a bug that causes it to repeat the margin of a final paragraph, "outside" the containing box.
The behavior was noted on the Opera Forums not long after the version release, I supplied a fix to the user, and the margin bug was reported to Opera Soft. The next release should contain the fix.
p.end {
margin-bottom: 0;
padding-bottom: *some value*;
}
Replace the normal bottom margin with padding...
With tight, multiple container layouts this can be a real pain. The solution is simple enough.. the elimination of the bug is forthcoming.
Again, it occurs when the "normal" bottom margin of an element is repeated when that element is the final element within a div. What makes this so annoying is that the 'repeated' bottom margin is rendered 'outside' the containing element.
- papabaer
note: I don't think the behaviour I was seeing was a repeated bottom margin - because the final <p> was hard up against the bottom of the div.
Rather it looked like the paragraph margin was actually leaking outside the div.
Whatever. Workaround known. Solution coming. Everyone happy. :) :)
Why not just use the <hr> tag?
h3 {font-size:20px; padding-top:15px; border-top:1px solid #000;}
Because, as we all know, that produces an ugly shaded line that differs in style between browsers. I much prefer a professional thin black line
A thin black line you say?
You mean sort of like this one?
[pre]
hr {
border: none;
border-bottom: 1px solid black;
height: 1px;
}
[/pre]
<hr> has the slight advtantage that it will still display on PDAs etc that don't have full CSS support. (e.g. Try Operas small screen view - Shift+F11)
