Tagline background/border issue

HTML & CSS
1

Hey guys

So I’m creating my first real website for someone else, following along with the Build Your Own Website The Right Way book, but modifying the code to suit my needs. Figured I’d learn better that way than following along with Ian’s code word-for-word.

Anyway, my tagline is doing something weird… the border and background are stretched vertically further than the book’s, but I can’t figure out why. I even tried removing all relevant code and entering it straight from the book, but it’s not working.

I’ve attached a snapshot of the issue, and here’s an except from my HTML/CSS:

<div id=“header”>
<div id=“sitebranding”>
<h1>CASARA YDF</h1>
</div> <!-- end of sitebranding div –>
<div id=“tagline”>
<h3>Civil Air Search And Rescue Association</h3>
</div> <!-- end of tagline div –>
</div> <!-- end of header div –>

#tagline {
font-style: italic;
font-family: Georgia, Times, serif;
background-color: #bed8f3;
border-top: 3px solid #7da5d8;
border-bottom: 3px solid #7da5d8;
padding-top: .2em;
padding-bottom: .2em;
padding-left: .8em;
margin: 0;
}

Any info would be helpful. Thank, guys!

2

Have you removed the margins associated with elements? <h3> for example, has default margins set on it.

Try adding h3{margin:0;}

The attachment is still pending approval so this is acomplete shot in the dark.

3

Perfect, exactly what I was looking for.

I had considered the default margins, so tried adding a <p> element instead of <h3>, but that didn’t change anything. I didn’t think to remove the margin.

4

<p> elements also come with default margins :).

It’s best to use a reset of some kind to make hte playing field even.

*{margin:0;padding:0;}

You’re welcome!

5

Why is that a H3 (being immediately after a H1 means it should be a H2, NOT that it appears to be a HEADING/start of a new content section?!?)

I’d have to see more of the site, but from your little picture you’ve got two or THREE times more markup than needed there… and the painfully bloated CSS isn’t helping matters either.

I mean really, for what I’m seeing you shouldn’t need more markup than:


<h1>
	CASARA YDF
	<small><span> - </span>Civil Air Search And Rescue Association</small>
</h1>

No classes or DIV needed with H1 being a perfectly good block level element that should be a UNIQUE on your page, no separate heading since it appears to all be ONE heading, small being for de-emphasis and the span being for CSS off users.

Just like the CSS…


h1 {
	font:bold 140%/150% georgia,times,serif;
	color:#FFF:
	background:#008;
}

h1 span {
	display:none; /* hyphen is in there for non screen.css users */
}

h1 small {
	display:block;
	padding:2em 0 2em 8px;
	font:italic 140%/120% georgia,times,serif;
	color:#000;
	background:#BDF;
	border:solid #7AD;
	border-width:3px 0;
}

Guessing a bit on the latter because again, snippets are cute, but we REALLY can’t weigh in with anything more than that without a better idea of the rest of your code – but from what you posted you are WAY over-thinking the number of DIV and elements needed for your layout. There are perfectly good semantic tags, use them properly BEFORE diving for extra wrappers.

– edit – also, your placing the comments AFTER the tag close could result in them ending up between sibling elements, which is why I suggest putting them BEFORE the closing tag so as to avoid SEVERAL IE and FF rendering bugs, including ‘disappearing content’ and ‘double render’. Admittedly, those usually only crop up once floats are involved, but it’s worth the simple change to commenting style to avoid them in the first place. Likewise </div> is the end of a div? REALLY? Never would have guessed. Avoid stating the obvious in your comments.