SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,383
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    wierd white space appears when I insert image

    When I insert an image into the branding area of this site:
    http://www.clickbasics.com/home/bhavanilorrainenelson/
    the space below the tag line in the grey area gets smaller in height and
    a white space of equal height appears between the branding and the main navigation areas. Without the image, there is no such space. Any ideas why?

    CSS is:
    Code:
    div#branding, div#nav_main, div#site_info {
        width : 100%;
        }
        
    #branding {
        position : relative;
        z-index : 10;
        min-height : 80px;
        background-color: #XXXXXX;
        color: #000;
        }
        
    #branding a:link, #branding a:visited {
        color: #XXXXXX;
        background-color: transparent;
        text-decoration: none;
        padding: 4px;
    }
    
    #branding h4 {
        color: #XXXXXX;
        background-color: transparent;
        }
        
    #branding .logo {
        float:left;
        margin-left:10px;
        margin-top:10px;
        }
        
    #nav_main { 
        position : relative;
        z-index : 1;
        min-height : 30px;
        background-color : #XXXXXX;
        color: #XXXXXX;
        padding-top: 4px;
        }
    HTML is:
    HTML Code:
    <div id="branding">
            <a href='/home/bhavanilorrainenelson/'><img src='/image_library/822.jpg' alt='Meditation bowl' class='std_img' /></a><h4>let your soul take flight with Bhavani's workshops and recordings</h4></div>
    
    <div id="nav_main">
       <ul>
          <li><a href="/home/bhavanilorrainenelson/">Home</a>&nbsp;&nbsp;</li>
          <li><a href='/page/bhavanilorrainenelson/412/'>About Bhavani&nbsp;&nbsp;</a></li>
      </ul>
    
        <!-- end main navigation -->
    </div>
    Paul C.
    ClickBasics
    http://www.clickbasics.com

  2. #2
    SitePoint Member
    Join Date
    Apr 2007
    Location
    Savannah
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Let me guess it happens In IE correct?

    This is the fix.

    HTML Code:
    <div id="branding"><!-- prevents IE extra spaces
            --><a href='/home/bhavanilorrainenelson/'><img src='/image_library/822.jpg' alt='Meditation bowl' class='std_img' /></a><h4>let your soul take flight with Bhavani's workshops and recordings</h4></div><!-- prevents IE extra spaces
            --><div id="nav_main">

    In IE if you have an image and there are any whitespaces it displays them.

    Also try setting the image to display: inline

  3. #3
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,383
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Let me guess it happens In IE correct?
    Actually no. It works fine in IE7. The problem shows up in Firefox 2.

    The white space appears not near the image, but below the tag line.

    Setting the display to inline had no effect.
    Paul C.
    ClickBasics
    http://www.clickbasics.com

  4. #4
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,383
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Also, the white space does not show up in IE6.
    Paul C.
    ClickBasics
    http://www.clickbasics.com

  5. #5
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Maybe the browser default margin for h4 is the problem?

    Test by set the #branding h4 {margin:0}
    Happy ADD/ADHD with Asperger's

  6. #6
    Web Enthusiast
    Join Date
    Jul 2000
    Location
    Western Massachusetts, USA
    Posts
    1,383
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Maybe the browser default margin for h4 is the problem?
    That was it! Many thanks.
    Paul C.
    ClickBasics
    http://www.clickbasics.com

  7. #7
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And this is precisely why I use a margin/padding reset on just about every element that can safely handle it at the very top of my screen media stylesheet, like so:

    Code CSS:
    html, body, address, blockquote, div, dl, fieldset, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul,
    dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object,
    a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span,
    strong, sub, sup, textarea, tt, var {
    	margin: 0;
    	padding: 0;
    }


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
  •