h3 display inline issue

[mrsam]

I have the following code:

#section_box {
padding: 0px;
margin: 0px;
}

#section_box h3 {
background: url(images/box_headline.gif) repeat-x;
color: #FFFFFF;
font-size: 11px;
display: inline;
height: 18px;
padding-left: 2px;
padding-right: 2px;
}

I'm trying to style a h3 tag inside of #section_box, however i'm having some issues displaying the background graphics correctly. If I don't use display: inline on my h3 tag, the background will display correct height wise, however it will not wrap around the text, but just repeat itself for a long width.

Adding display: inline, makes the h3 wrap around my text, however the height seems to be ignored, so I can only see part of the background which is wrapped around the text., the bottom is to say, cut off because of the wrapping.

I'm wondering what would be the right approach for this?

[DaveWoods]

height/width and margin cannot be applied to inline elements or those which have their display set to inline.

It sounds like you may need to float: left; the h3 instead although without seeing the HTML that goes with this then I can't advice you with the correct solution as you'll probably need to use a "clear" method after this as well.

If you want to display an element next to another then float is usually the solution but if you need any other advice as to how this can be achieved in context of the rest of your page then we'll need the HTML and the rest of your CSS.

Hope that helps though and gives you an idea.

[Chroniclemaster1]

It's hard without seeing the XHTML, do you have a link to the site? This could be aggravated by a semantic issue as well. Is this really an h3? Or are you trying to use a heading for a particular effect. If so, you should mark up the file by what it is. The CSS is already handling the appearance, so it may simplify things to avoid the innate styling of a header.

[mrsam]

It sounds like you may need to float: left; the h3 instead

That's exeactly what I needed to do. Stupid of me not to think of that. Thanks alot for the response everyone..

[mrsam]

Actually, floating the h3 gave me a break problem, which I can't seem to figure out. Seems to be displaying correct in Firefox though. I've cleared the float with <div style="clear: both;"></div>..

http://www.sbeinati.net/laks/about.php

[Paul O'B]

You don't need to add extra html like that as you can sinply apply clear:both to the element itself.

#box_bg {
background:  images/box_bg.gif) repeat-y;
width: 616px;
padding-top: 5px;
padding-bottom: 5px;
border-bottom: 1px solid #ccc6c6;
border-top: 1px solid #b0a8a8;
clear:both
}

Then remove the div that has clear:both applied.

<h3 class="section_box_head">Headline test</h3>
                    <div id="box_bg"> <span> Lor

You only have to add an empty clearer when there are no other elements present or when you want the parent to encompass the floating content although there are other methods for this anyway that don't need extra html mark up (see faq on floats).