jeff b
07-07-2005, 05: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! =)
thanks
-jeff B
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! =)
thanks
-jeff B