SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Evangelist
    Join Date
    Jan 2001
    Posts
    478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Can't acheive more white space around images

    Hi,

    How do I achieve more padding to the right of my images.
    I used the float feature(float left) with padding 10 pixels to the right and 10 pixels below the image, but it didn't make any difference whatever no I entered (maybe this is a DW limitation)

    www.isitebuild.com/web-site-promotion3

    Please advise.
    Herman Drost
    http://www.isitebuild.com
    Affordable Web Site Design
    and Web Site Hosting

  2. #2
    Sultan of Ping jofa's Avatar
    Join Date
    Mar 2002
    Location
    SvÝ■jˇ­
    Posts
    4,080
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No, it's not a DW limitation, it's a bug in IE
    Works in Mozilla, and in IE6 too if you change doctype to HTML 4.0 Strict

    http://msdn.microsoft.com/workshop/a...ts/doctype.asp

  3. #3
    SitePoint Evangelist
    Join Date
    Jan 2001
    Posts
    478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thanks, that was a big help, however..

    In IE5 I still can't get space around the images. I think a lot of folks still use this browser.

    IE6 and Mozilla are fine now after adding the doctype tag.

    Also OPERA chops down the page.

    Please advise.

    Thanks
    Herman Drost
    http://www.isitebuild.com
    Affordable Web Site Design
    and Web Site Hosting

  4. #4
    Sultan of Ping jofa's Avatar
    Join Date
    Mar 2002
    Location
    SvÝ■jˇ­
    Posts
    4,080
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    How about putting the image in a div and specify the margin for the div.

    Something like:

    .imagespace {
    margin: 5px 150px 5px 5px;
    height: auto;
    width: auto;
    float: left;
    }


    <div class="imagespace">
    <img src="image.gif" width="93" height="20" />
    </div>

    It works in IE6 but I haven't got IE5 to test it on.

    Hope this helps.

    Paul

  6. #6
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hve you tried setting margin-left, margin-bottom etc on the image? You may need to set the image to "display: block" too.

    Douglas
    Hello World

  7. #7
    SitePoint Evangelist
    Join Date
    Jan 2001
    Posts
    478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thanks, I fixed it..

    Thanks for all your input - I changed the box padding to margins

    .imageleft { float: left; margin-right: 10px; margin-bottom: 10px}

    Now it renders well in IE5.5 as well as IE6.

    Best Wishes,
    Herman
    Herman Drost
    http://www.isitebuild.com
    Affordable Web Site Design
    and Web Site Hosting


Bookmarks

Posting Permissions

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