www.webdeveloper.com
Results 1 to 8 of 8

Thread: No Bottom Margin on Image

  1. #1
    Join Date
    May 2004
    Location
    Sinking Spring, OH, USA
    Posts
    40

    No Bottom Margin on Image

    I've built a page with images that have margins of 20px. The selectors (see below) are identical except for one being left and one being right. One image (an img class="left") has 0 bottom margin. It's the only image on the page that does that (there are other class="left" images that are okay). What am I missing?

    <style type="text/css">
    img.left {
    float:left;
    margin:20px
    }
    img.right {
    float:right;
    margin:20px
    }

  2. #2
    Join Date
    Dec 2002
    Location
    Manchester, UK
    Posts
    6,275
    And your website is... where?
    Every fight is a food fight when you’re a cannibal.

  3. #3
    Join Date
    May 2004
    Location
    Sinking Spring, OH, USA
    Posts
    40
    The page in question is not published yet. But if it would help, I guess I could make it go live.

  4. #4
    Join Date
    Dec 2002
    Location
    Manchester, UK
    Posts
    6,275
    Or you could just upload it as a .zip if it's small enough with all the images.
    Every fight is a food fight when you’re a cannibal.

  5. #5
    Join Date
    May 2004
    Location
    Sinking Spring, OH, USA
    Posts
    40
    I've never zipped a file or attached a file to a forum post before, so I hope I did it right.

    Keep in mind the page is far from finished.

    Thanks much!
    Attached Files Attached Files

  6. #6
    Join Date
    Dec 2002
    Location
    Manchester, UK
    Posts
    6,275
    First thing that I spotted was the id="block" all over the place, id's are unique, ie: use them once and once only.

    Just so you know, the margin is there but because you have floated the image it is "allowed" to break out of the element that contains it. This is a feature not a bug and is what allows text to flow around it.

    It would be better to have the text floated rather than the image I think, I'll work on something tomorrow. I'm a bit tired now.

    Remember to always validate as you progress. And also test in other browsers.
    Every fight is a food fight when you’re a cannibal.

  7. #7
    Join Date
    May 2004
    Location
    Sinking Spring, OH, USA
    Posts
    40
    Thank you, lavalamp...I guess I've got a lot to learn.

    If IDs are unique, how do I approach a situation where the layout calls for a series of "boxes" or "blocks" ("boxes" or "blocks" being sections of colored "background" for text, separated by the spaces of white [actual] background of the page itself)?

    Sleep well.

  8. #8
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    When it needs to be reused on a page then that's a job for "class" rather than "id".

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles