Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jul 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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
    Last edited by jeff b; 07-07-2005 at 05:41 PM. Reason: incorrect title

  • #2
    New Coder
    Join Date
    Feb 2005
    Location
    Ontario Canada
    Posts
    44
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:

    Code:
    <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
    Channy

    I would love to change the world, but they won't give me the source code...

  • #3
    New to the CF scene
    Join Date
    Jul 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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 =)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •