Skip navigation
Currently Being Moderated

Why does a strip of white space appear below my image in my pop-up window?

Jan 28, 2012 5:48 PM

Tags: #cs5 #dreamweaver #javascript

I have a website, www.glovesanddoves.com. On the news page there's a link highlighted in read in the text called 'Shot Circuit.' When you click the link a pop-up window opens with an image. That's great but why is there a strip of white space underneath it? I checked the dimensions of the image and set the pop-up window to the same size. Any ideas?

 

Thanks

 

Jack

 
Replies
  • Currently Being Moderated
    Jan 28, 2012 6:02 PM   in reply to Quadzilla_1111

    Quadzilla_1111 wrote:

     

    I have a website, www.glovesanddoves.com. On the news page there's a link highlighted in read in the text called 'Shot Circuit.' When you click the link a pop-up window opens with an image. That's great but why is there a strip of white space underneath it? I checked the dimensions of the image and set the pop-up window to the same size. Any ideas?

     

    Thanks

     

    Jack

     

    Don't see any links in the News page when viewing in FF 9.0.1 or in the source code.  Please be specific what you are talking about.  the news page is at this link:

     

    <http://www.glovesanddoves.com/html/news.htm>

     

    If this is not the page then please provide a correct link.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 28, 2012 6:56 PM   in reply to mytaxsite.co.uk

    Link is here

     

    dovesandgloves.png

     

    Not sure about the white strip (border) though unless it's related to automatic image resizing in Firefox.

     

    I don't get the popup window in IE at all - just a new tab containing the image.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 28, 2012 7:31 PM   in reply to Quadzilla_1111

    OK got the link and tanks to JW.  I was seeing all red and no links on the page.

     

    To check if there is anything wrong in the picture, I created a test page and the link is here:

     

    <http://www.mytechnet.talktalk.net/picture01.htm>

     

    There is no white line anywhere and so this would suggest that you are seeing everything in white background and thus the white line on the page.

     

    Also, you have linked directly to the picture instead of creating a page like I did.  Perhaps you may want to re-think about this.

     

    Good luck.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 30, 2012 5:07 PM   in reply to Quadzilla_1111

    I think the answer has already been posted by JTANNA and you missed it or ignored it:

    you have linked directly to the picture instead of creating a page

    normally you do NOT link directly to an image file in a .js popup window. You create an HTML page, place the image on it, style the page as needed, then set the display dimensions of the popup window to match. I'm confident that you will have much better results.

    Best wishes,

    Adninjastrator

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 31, 2012 11:05 AM   in reply to Quadzilla_1111

    It doesn't HAVE to be in a <div> but for me, it's a lot easier to size and position things if in a <div>.

    And remember, this will be a complete HTML Web page.....

    So yes, set body margin and padding to 0, give the container <div> the exact same dimensions as the photo. Then it's default position will be top left.

    Then set popup window dimensions to exact same as <div>.

    You may still need to adjust the popup dimensions slightly depending on the window chrome.... just test it and see... you can always adjust the size slightly to get the exact fit.

    Best wishes,

    Adninjastrator

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 26, 2013 4:09 AM   in reply to Quadzilla_1111

    The Solution:

     

    Go to Dreamweaver => Right Click on your Image (which has space under it) => Align => Middle / Center.

     

    DONE

     

    Enjoy!

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points