SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2004
    Location
    Denmark
    Posts
    94
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    h3 display inline issue

    I have the following code:

    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?

  2. #2
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    SitePoint Guru Chroniclemaster1's Avatar
    Join Date
    Jun 2007
    Location
    San Diego, CA
    Posts
    784
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Whatever you can do or dream you can, begin it.
    Boldness has genius, power and magic in it. Begin it now.

    Chroniclemaster1, Founder of Earth Chronicle
    A Growing History of our Planet, by our Planet, for our Planet.

  4. #4
    SitePoint Enthusiast
    Join Date
    Jun 2004
    Location
    Denmark
    Posts
    94
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by csswiz View Post
    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..

  5. #5
    SitePoint Enthusiast
    Join Date
    Jun 2004
    Location
    Denmark
    Posts
    94
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    You don't need to add extra html like that as you can sinply apply clear:both to the element itself.

    Code:
    #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.
    Code:
    <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).


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •