SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict sparkdigital's Avatar
    Join Date
    Feb 2005
    Location
    Kendal, Cumbria - The Lake District, UK
    Posts
    249
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy How do I display this image properly in an iFrame?

    Hi,

    I'm using an iFrame on one of my client's websites to act as a mini gallery - a few thumbnails under the main image link to a new main image in the frame.

    This works fine, however, I can't seem to align the image nicely so it uses the full 250 x 250 pixels. Instead IE creates a 10 pixel margin at the top and the left hand side and FF creates a 10px border all the way around.

    See http://www.sparkdigital.co.uk/tgle/ for the example.

    Any ideas on how I can solve this? Many thanks,

    Konrad

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's the default margin and/or padding on the body of the document loaded into the iframe.

    Why are you using an iframe?
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    SitePoint Addict sparkdigital's Avatar
    Join Date
    Feb 2005
    Location
    Kendal, Cumbria - The Lake District, UK
    Posts
    249
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah, yes of course, I was trying to change things in the settings for the iFrame, not for the displayed item.

    Re: Why are you using an iframe? - Because it's a straight forward solution. But I'm open to suggestions!

    Thanks,

    Konrad

  4. #4
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Straight-forward... yes, I suppose, but it also requires that you use a Transitional doctype instead of Strict.

    I can think of three possible solutions:
    1. use a server-side script, written in a language like PHP or ASP, to show the image in an HTML document that has a stylesheet to set the body's padding and margin to 0.
    2. remove the iframe and use JavaScript to switch images.
    3. use JavaScript to set the padding and margin of the body of the document loaded into the iframe to 0. (this one seems silly, so I wouldn't use this one myself)


    P.S. I suggest you learn how semantics apply to X/HTML. Semantics is really a very important subject when it comes to X/HTML.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  5. #5
    SitePoint Addict sparkdigital's Avatar
    Join Date
    Feb 2005
    Location
    Kendal, Cumbria - The Lake District, UK
    Posts
    249
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Kravvitz,

    I'll look into some of your suggetsions. I do try to 'convert' myself to using more and more CSS with valid markup but find it still takes me much more time to do this and so for the little sites for clients with small budgets I still use tables and the odd iFrame etc.

    I suppose I'll just have to schedule more time for training and keep at it.

    Thanks,

    Konrad

  6. #6
    SitePoint Addict sparkdigital's Avatar
    Join Date
    Feb 2005
    Location
    Kendal, Cumbria - The Lake District, UK
    Posts
    249
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Problem sorted - simply created a HTML page with 0 margin with the image in this rather than linking straight to the image. Maybe not the most beautiful solution but it gets results...


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
  •