SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot ComposerRyan's Avatar
    Join Date
    Oct 2003
    Location
    USA
    Posts
    196
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Images side by side: IE7 shows a space in between! Why?

    Hey everyone, I am running into a slight problem. I have jpg images at the top of my web page (6 to be exact) that are acting as the menu for my website. They are all the same heights but different widths. I want to put them side by side so that there is NO space in between them.

    This is what it is supposed to look like:

    BUTTON 1 BUTTON 2 BUTTON 3 BUTTON 4

    But this is what I get:

    BUTON 1 (SPACE) BUTTON 2 (SPACE) BUTTON 3 (SPACE)
    BUTTON 4 (SPACE)

    Notice how BUTTON 4 has jumped to the next line as well, which is hidden because all of the buttons are contained in a DIV which is set to overflow: hidden.

    My images look like this (this is showing you two buttons side by side just as a reference:

    Code:
    <div class="buttonwrapper">
    <a href="http://www.mylink.com">
    <img class="buttontopimg" alt="Home" src="/images/home_button.jpg" height="43" width="109" /></a><a href="http://www.mylink.com">
    <img class="buttontopimg" alt="About Us" src="/images/home_aboutus.jpg" height="43" width="109" /></a>
    </div>
    And here's my CSS for "buttontopimg"

    Code:
    .buttontopimg {
    float: left;
    margin: 0px;
    padding: 0px;
    }
    Thanks for your help out here as always!

    Ryan

  2. #2
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,097
    Mentioned
    153 Post(s)
    Tagged
    2 Thread(s)
    Sometimes IE has the tendency to render whitespace, so

    Code:
    <img>
    <img>
    <img>
    <img>
    could have whitespace, while

    Code:
    <img><img><img><img>
    does not ...
    Rémon - Hosting Advisor

    SitePoint forums will switch to Discourse soon! Make sure you're ready for it!

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  3. #3
    SitePoint Zealot ComposerRyan's Avatar
    Join Date
    Oct 2003
    Location
    USA
    Posts
    196
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    But is that a "safe" way to display images side by side? And are they guaranteed to stay side by side in all browsers?

    Thanks for the help again!

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,870
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    The CSS solution to making sure that whitespace between the image tags doesn't render is:

    img {display:block;}
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">


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
  •