Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Mar 2011
    Thanked 0 Times in 0 Posts

    Better to use a blank image spacer or empty div?

    Is it better to use a transparent PNG spacer to help position photoshop slices on a webpage, or to just use a div with set height, width and disply:block set in an external style sheet?

    I figure the blank image could make the page load slower...or excess css for the div could make page load slower (though the difference is probably negligable), or one could have more browser compatibility issues than the other...which is best practice? Both methods work fine in firefox.

    Let me know your thoughts!

  2. #2
    New Coder
    Join Date
    Jul 2011
    Thanked 3 Times in 3 Posts
    If you used a Transparent PNG image, the browser would still have to load the image regardless what the image was of or what colour it was.
    Also you'd probably still have to define the width and height of the image so that while the page is loading the image the structure wouldn't be broken up. Otherwise, the page structure will look just as if there is nothing there while the image isn't loaded.

    As for a div with a defined height/width or margins/paddings, that would be much quicker to load ... a page with purely just HTML/CSS elements loads very fast... so any slight extra time the page takes to load an empty div would be hard pressed to notice/measure such time.

    However, I do have a suggestion ... is it possible for you to just add a margin to one or two of the elements you want spaced instead of adding an extra div?

    If not, I'd suggest if it's speed of the page you are worried about, especially if you intend using a lot of spacers... then you may want to use the div elements, as images do take longer to load than HTML/CSS ... especially noticeable by people with slower connections than yourself.
    Remember, the cheapest broadband plans are almost as slow as the fastest dial-up was.

    Last edited by Asher01; 09-30-2011 at 04:51 AM.
    “Opinion is the medium between knowledge and ignorance.”
    “The old believe everything; the middle aged suspect everything: the young know everything.”

  3. Users who have thanked Asher01 for this post:

    shmoomoo (09-30-2011)

  4. #3
    Regular Coder
    Join Date
    Sep 2011
    United Kingdom
    Thanked 4 Times in 4 Posts
    Or you just us an empty div and give it a height and a width. Don't need to be "display: block" . Maybe try as well float: left; or float right;

  5. #4
    New Coder
    Join Date
    Sep 2011
    Thanked 1 Time in 1 Post
    I would use a div with clear:both and one height.


Posting Permissions

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