SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict
    Join Date
    May 2005
    Posts
    297
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Gaps between images

    Ok so I want a row of images in total the width should be 797px and the height 33px. But the images then don't all fit into that row and have spaces between them. How can I fix this so there are no spaces, I'm sure it's simple

    Thanks

  2. #2
    100% Windoze-free earther's Avatar
    Join Date
    Feb 2003
    Location
    Linuxland
    Posts
    2,788
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Need a URL to help you. Why a row of 797px? It will create a horizontal scrollbar at 800 x 600 and look very cramped.

  3. #3
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could try applying this CSS to them.
    Code:
    float: left;
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  4. #4
    100% Windoze-free earther's Avatar
    Join Date
    Feb 2003
    Location
    Linuxland
    Posts
    2,788
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I suspect they are in a table with cellspacing or cellpadding.

  5. #5
    SitePoint Addict
    Join Date
    May 2005
    Posts
    297
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok here's a link to the layout i'm trying to design http://www.designs22.com/index.php I know I could solve this by using tables but I would like to learn how to do it with a div.

    Thanks

  6. #6
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well if I did my math right you have 4px more in images than you have in that table ..... BTW, you should really have a width and height on all those images..

    Anways, I checked the properties on each photo and subtracted them from your overall table width of 797 when I got to the last image (the one thats dropped) I only had 115px left but that image is 119px!

    If Im right then just make the table width 801

    BTW, your probably going to have problems in IE even after you fix it. Its called the 3px jog bug.... happens when you float things like this. See the sticky by Paul in the CSS section to help beat that gremilin down.

  7. #7
    100% Windoze-free earther's Avatar
    Join Date
    Feb 2003
    Location
    Linuxland
    Posts
    2,788
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Whitespace in your code does make a difference. This fixed it on my desktop. Try tightening up the spaces in your code like this (I linked the images to your site so you'll probably want to change that):
    HTML Code:
    <div id="menu_links">
    <img border="0" alt="" src="http://www.designs22.com/images/menustart.gif"  /><a href="/index.php"><img border="0" alt="" src="http://www.designs22.com/images/home.gif"  /></a><a href="/forums/index.php"><img border="0" alt="" src="http://www.designs22.com/images/forums.gif"  /></a><a href="/contact.php"><img border="0" alt="" src="http://www.designs22.com/images/contact_us.gif"  /></a><span onmouseover="ypSlideOutMenu.showMenu('menu1');" onmouseout="ypSlideOutMenu.hideMenu('menu1')" class="menucursor"><img border="0" alt="" src="http://www.designs22.com/images/products.gif"  /></span><span onmouseover="ypSlideOutMenu.showMenu('menu2');" onmouseout="ypSlideOutMenu.hideMenu('menu2')"><a href="/services.php"><img border="0" alt="" src="http://www.designs22.com/images/services.gif"  /></a></span><a href="/portfolio.php"><img border="0" alt="" src="http://www.designs22.com/images/portfolio.gif"  /></a><a href="/customer/login.php"><img border="0" alt="" src="http://www.designs22.com/images/c_area.gif"  /></a>
    </div>
    Adding the dimensions of each button might also help.

    The page is still too wide to fit an 800 x 600 resolution. You need to reduce the size to about 760 to avoid a horoizontal scrollbar.

    Edit:

    Hey, DC . . . the images stacked fine. I couldn't see a 3px dif and the design didn't break. Using IE BTW.
    Last edited by earther; Sep 25, 2005 at 08:09.


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
  •