View Full Version : trying to replicate the deprecated hspace/vspace commands w/ CSS- maddening! why?

jeff b
07-07-2005, 06:40 PM
hello all-

i'm new to these forums, and new to CSS in general. typically, all my past web design has utilized the <font> tag for font display purposes and hspace/vspace for setting the padding around my images.

recently, i noticed that IE was ignoring my hspace/vspace settings, and stumbled upon the fact that they've been deprecated, and stumbled upon CSS and the possibilities it entails. i've started creating my first website using CSS - right now i have the <style> settings in the <head>, although i think once i have everything figured out the way i want it i will switch to using an external style sheet before i get to work coding the rest of the site.

i have several 100dpi thumbnail .jpg images that link to images in a photo gallery. because this is the main content of the site (a photo gallery for friends and family back home), i didn't want to fuss with image maps and have the very small (~3 or 4kb) images load as individual thumbnails.

i'd like the images to have no padding/margin/borders around them. typically, in the past, this was very easy: add hspace=0 and vspace=0 inside the <img> tag, and you were good to go. the images would butt right up against each other on all sides, end of story.

however, i've been unable to replicate this effect using CSS. even with "img {margin: 0px; padding: 0px; border: 0px}" in my <style> block, something is overriding or ignoring these settings and creating a ~5px padding effect around all my images. you can see an example of this problem at http://www.salvationarmyofdarkness.com/housetest.html ...in IE, mozilla firefox, and safari these images are displayed as having some kind of padding or margin between them.

what do i do? it is a major aesthetic compromise for me to have the images separated by a border. is there something missing in my code? i presume there must be, as i've read in several css tutorials that the "margin" command should replace hspace/vspace entirely for this purpose.

any and all help is appreciated. the code on the housetest.html linked above is EXTREMELY simplified (nothing more than <html>, <head>, <style>, <body>, and a few <img>s) in order to narrow this issue down to its base elements. i can only presume that i am missing a command in my <style> block or using the incorrect syntax somewhere.

HELP! =)

-jeff B

07-07-2005, 07:03 PM
It could be that the browser is interpreting the hard returns in your code to create the spaces. Try having them as in the code block below, one after the other:

<IMG SRC="/garden05/0421-birdhouseTHUMB.jpg" /><IMG SRC="/garden05/0421-birdhouseTHUMB.jpg" /><IMG SRC="/garden05/0421-birdhouseTHUMB.jpg" />

Oh and you don't need the </img> tag... you can close the img tag with a simple /> at the end of it :)

jeff b
07-07-2005, 08:18 PM
whoa - that totally did it (removing the returns in the code and putting them on a single line). i haven't had the chance to test this yet with anything but IE (i'll check safari and mozilla once i can upload the revised code from home), but it appears that the returns were causing the spacing. i was able to remove the hspace/vspace lines as well without ill effect.

thank you! it's kind of annoying that the problem would be something like that becuase my code will now be exceptionally hideous...but we'll take it =)