1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Spaces Between Images In FireFox

Discussion in 'HTML & Website Design' started by snotb4ll, Aug 8, 2009.

  1. #1
    Ok I've been working at this for a long time now and it's getting me mad l:mad:

    My site looks fine in IE however in FireFox for some reason it is putting a white space between each image. I've tried just about everything I can think of and nothing works.

    Here is a link to the page....

    http://www.nobsshowmethemoney.com/updated-cart.html

    If you know how to fix this please let me know so I can stop going crazy lol.

    Thanks,
    Chris
     
    snotb4ll, Aug 8, 2009 IP
  2. abmathur

    abmathur Member

    Messages:
    211
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    30
    #2
    Your error is relatively simple you have added '#' instead of '3' in top line. Swap your first line with the one given below and spaces will be fixed.

    Code (Text):
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    Have fun !
     
    abmathur, Aug 8, 2009 IP
  3. Stomme poes

    Stomme poes Peon

    Messages:
    3,197
    Likes Received:
    135
    Best Answers:
    0
    Trophy Points:
    0
    #3
    You have an incomplete doctype, and it is appearing several times on your page (you need to have only one).

    But that aside, your problem is probably the normal space that appears below images while they're inlines. You can eliminate it by adding, in your <style> tag section, something like this

    img {
    vertical-align: bottom;
    }
     
    Stomme poes, Aug 8, 2009 IP
  4. abmathur

    abmathur Member

    Messages:
    211
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    30
    #4
    Style won't be needed it will get straight once doctype is fixed and to OP I'd suggest you not to use double tags (body tag is there twice, html,head), instead use div ids to swap content.
     
    abmathur, Aug 8, 2009 IP
  5. Stomme poes

    Stomme poes Peon

    Messages:
    3,197
    Likes Received:
    135
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Sorry but Firefox is doing what it's supposed to do with images, and it will do that even with a correct doctype. That space belongs there. Removing it means writing a style against the browser default. That IE isn't showing the space as it should is just IE being IE again.
     
    Stomme poes, Aug 9, 2009 IP
  6. abmathur

    abmathur Member

    Messages:
    211
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    30
    #6
    Sorry my friend but you are wrong it will work simply by changing doctype and you can go ahead and check if for yourself.
     
    abmathur, Aug 9, 2009 IP
  7. Stomme poes

    Stomme poes Peon

    Messages:
    3,197
    Likes Received:
    135
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Take a look at this, to see what I mean:
    http://stommepoes.nl/Tests/lilbellas.html

    There's a bit of CSS commented out there (all one page). If you copy that code (and stuff whatever images you want in the three images sections), and uncomment that code, the yellow space under the images magically vanishes. Even though the yellow belongs to the container of the images, it's the space under the images stretching the height of their container (the dd's).

    It's not my code (and I didn't agree with the guy's choice of tags), but a page from someone who was dealing with the same problem (though he did not also have the error of the multiple doctypes, and I agree with you, if the OP fixes that it will fix many problems). So I made that page for him to show him what vertical-align does.

    Setting the image to a block would also fix it (and I see some of the OP's images have been set to position: absolute, which also gives them block context).

    If you take a look here: http://dbaron.org/css/2000/01/dibm-20000113
    the first visible example he gives, where there's a logical box, font box and baseline... there's a space between the baseline (and that's where inline images' bottoms sit by default) and the bottom of the font-box. Even though images aren't text, they do have a bottom of a font-box, because they're inlines.

    Notice my example has a decent doctype, even if the rest of the code is a little shoddy. Firefox shows the space, while Opera and Konqueror don't. IE only seems to show the space when there's whitespace between image tags (so, actually a different bug). It can also come from an image being smaller than its containers' font size (another IE bug).
    Bleh. Bugs.
     
    Stomme poes, Aug 11, 2009 IP