Problem with Box Header

I am having trouble with a new Box Header that I created.

The green “Online Indicator” image should be next to the Heading like this…

…but instead I get this…

I’m not sure how to “super-impose” my Online Indicator over my <h3> with its shaded background?! :-/

Here is my code…


	<div id="boxUser">
		<h3>DoubleDee</h3>
		<img src="/images/Light_Green_10.png" width="10" alt="" />
		<br />
		<img class="noborder" src="/community/uploads/f21190299a795e9cf3439f7f62c223f79e023ab7.jpg" width="100" alt="" />
		<ul>
			<li><a href="">Send Private Message</a></li>
			<li><a href="">Find Latest Posts</a></li>
		</ul>


#boxUser{
	width: 150px;
	margin: 20px 0;
	padding: 0 15px 15px 15px;														/* Create Gutter */
	border: 1px solid #AAA;		/**/
}


#boxUser h3{
	/* Next two lines needed or IE6&7 won't show negative margins properly. */
	position: relative;
	zoom: 1.0;
	margin: 0 -15px 0 -15px;
	padding: 0.4em 15px 0.2em 15px;
	text-align: left;
	font-size: 1.1em;
	font-weight: bold;
	color: #2323DC;									/* Steel Blue (darker) */
	background-color: #D7D3FF;							/* Blue Gray (lighter) */
}

#boxUser h3.subHeading{
	color: #2323DC;									/* Steel Blue (darker) */
	margin: 3em -15px 1em -15px;
}

#boxUser ul{
	font-size: 0.9em;
}

By the way, feel free to recommend ways to clean up my markup and styles. (I feel like things could be neater but am unsure of what to do…)

Thanks,

Debbie

This would be your easiest solution:

<h3>DoubleDee <img src="/images/Light_Green_10.png" width="10" alt="" /></h3>

Is there anything wrong or hokey about nesting an Image inside of a Header?

And assuming I am not breaking some sacred HTML Law, how would I write my CSS Style so that I have a space between the <h3> and my <img>?

What I mean is if there is a way to say, “When you see an IMG nested inside of an H3 then do this…”?

Thanks,

Debbie

It validates just fine and I’ve not noticed any weird problems using it.

To add some padding, I’d just use padding:

#boxUser h3 img { padding-left: 20px; }

:slight_smile:

Oops! Left my head at home today?! :blush:

For some reason, I have never seen another element nested inside of a Heading, so it threw me off…

Gee, you SitePoint Gurus make all of this stuff look sooo easy!!!

Thanks!!!

Debbie