Ok I've been working at this for a long time now and it's getting me mad l 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
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. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> Code (markup): Have fun !
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; }
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.
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.
Sorry my friend but you are wrong it will work simply by changing doctype and you can go ahead and check if for yourself.
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.