Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Sep 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Extra space below image in IE

    Hi everyone,

    I am brand new to CSS (and haven't done HTML in a long time), and this board has been great.

    I am having a problem with my first site: www.studioofvocalarts.com. In IE6, There is a space between the bottom of the image in the masthead and the bottom border of the masthead. The masthead and the image are both 167px high. In every other browser I've tried, the image fits in the masthead perfectly. I've been working on it, but haven't figured out the problem yet. Here's the relevant parts of the CSS:

    * {
    padding:0;
    margin:0;
    }

    h1, h2, h3, h4, h5, h6, p, pre, blockquote, label, ul, ol, dl, fieldset, address {
    margin:1em 5%;
    }

    body {
    min-width: 600px;
    }

    #masthead {
    background-color: #E8947D;
    height: 167px;
    margin: 0 0 10px 0;
    padding: 0px;
    border: 1px solid #000;
    }

    #masthead img {
    float: left;
    }

    And here's the HTML for the masthead:

    <div id="masthead">
    <img height="167" width="150" alt="Headshot of Kelliann Festa" src="images/kellheadshot.jpg"/>
    <br /><br /><h1>Kelliann Festa's Studio of Vocal Arts</h1>
    <h2>New Haven, Connecticut</h2>
    </div>

    Any guidance for me? Thank you!

  • #2
    Senior Coder twodayslate's Avatar
    Join Date
    Mar 2007
    Location
    VA
    Posts
    1,042
    Thanks
    67
    Thanked 39 Times in 39 Posts
    twitter | Quality Hosting - $5.95/mo*
    Feel free to PM me!

  • #3
    New to the CF scene
    Join Date
    Sep 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you twodayslate. I read through the page you linked to but couldn't find an answer. Maybe you're pointing out how to make the footer stay at the bottom of the page? (Which I'm going to fix next -- thanks!) I'm talking about the image in the masthead. If I'm missing the obvious, I apologize.

    I did find this suggestion in one of the links from your page:

    img {display:block;}

    I've added that but still no go.

    BTW, I have the same problem in IE5.

  • #4
    Senior Coder twodayslate's Avatar
    Join Date
    Mar 2007
    Location
    VA
    Posts
    1,042
    Thanks
    67
    Thanked 39 Times in 39 Posts
    It is your whole code, you need to redo everything. Bonrouge is a great resource.
    Code:
    <div id="container"> <!-- this wraps all your elements -->
    <div id="header"> <!-- this is your header wrapper -->
    <img src="logo.gif" style="float: left;" />
    <h2>Name</h2><br /> <span>Discription</span>
    </div> <!-- this is closing the header -->
    
    <div id="contentwrapper">
    <div id="sidebar">
    nav here
    </div> <!-- end sidebar -->
    <div id="content">
    Text
    </div> <!-- end content -->
    </div> <!-- end content wrapper -->
    <div id="footer">&copy;</div>
    </div> <!-- end wrapper -->
    More info on floats: http://www.quirksmode.org/css/clearing.html
    twitter | Quality Hosting - $5.95/mo*
    Feel free to PM me!

  • #5
    New to the CF scene
    Join Date
    Sep 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for your help. Putting the image in as the background of #header as opposed to using <img> in the HTML solved it. I still don't know why it wasn't working before, though, and I'd love to understand. It seems like there was a padding or margin issue, but I zeroed out both padding and margin with:
    Code:
    * {
    	padding:0;
    	margin:0;
    	}
    at the beginning of my CSS.


  •  

    Posting Permissions

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