Image does not fit correctly in a div frame

Discussion in 'ASP .Net' started by AAaron123, Jun 28, 2009.

  1. AAaron123

    AAaron123 Guest

    Suppose to be a frame with an image that just fits inside.

    Works well in IE8 except the frame has more space between it and the window
    below than above.

    In FireFox the frame is too big for the image, but worst than that, the
    image is all the way to the top.



    openedWindow.document.write('<center><div style="width:' + divWidth + ';
    height:' + divHeight + '; border-color:white; border-style:ridge;
    border-width:15px;"><img width="' + w + '" height="' + h + '" src="' + path
    + '" /></div></center>');



    The more serious problem is FireFox.

    Do you know how to fix it?





    Thanks
     
    AAaron123, Jun 28, 2009
    #1
    1. Advertising

  2. On Jun 28, 1:56 pm, "AAaron123" <> wrote:
    > Suppose to be a frame with an image that just fits inside.
    >
    > Works well in IE8 except the frame has more space between it and the window
    > below than above.
    >
    > In FireFox the frame is too big for the image, but worst than that, the
    > image is all the way to the top.
    >
    > openedWindow.document.write('<center><div style="width:' + divWidth + ';
    > height:' + divHeight + '; border-color:white; border-style:ridge;
    > border-width:15px;"><img width="' + w + '" height="' + h + '" src="' + path
    > + '" /></div></center>');
    >
    > The more serious problem is FireFox.
    >
    > Do you know how to fix it?
    >
    > Thanks


    You defined width and height by javascript: divWidth and divHeight

    Did you check if divWidth and divHeight have correct values in FF?
     
    Alexey Smirnov, Jun 28, 2009
    #2
    1. Advertising

  3. AAaron123

    AAaron123 Guest


    >
    >> Do you know how to fix it?

    >
    > Make all your markup XHTML-compliant - no need to go Strict, Transitional
    > is good enough...
    >
    > Start by not using <center> - that's been deprecated for years:
    > http://www.w3schools.com/TAGS/tag_center.asp
    >
    > Make sure that the widths and heights have "px" suffixes...
    >
    >
    > --
    > Mark Rae
    > ASP.NET MVP
    > http://www.markrae.net


    Firefox centers the div in the window and horizontally centers the image in
    the div border, but it places the top of the image touching the top border
    rather than centering it vertically. As you can see below I added centering
    styles everywhere I could to see if it would help. But it didn't. IE8
    displays nicely.

    This is the result of the alerts.

    windowFeatures:width=404px,height=459px,status,resizable,left=598px,top=370px


    <div style="text-align:center; vertical-align:middle; width:354px;
    height:409px; border-color:white; border-style:ridge;
    border-width:15px;"><img style="text-align:center; vertical-align:middle;
    width:324px; height:379px;" src="Images/Man.jpg" /></div>

    This is the code.
    openedWindow.document.write('<html><head><title>' + name + '</title>');

    openedWindow.document.write('</head><body style="text-align:center;
    vertical-align:middle; background-color:black;">');

    openedWindow.document.write('<div style="text-align:center;
    vertical-align:middle; width:' + divWidth + 'px; height:' + divHeight + 'px;
    border-color:white; border-style:ridge; border-width:15px;"><img
    style="width:' + w + 'px; height:' + h + 'px;" src="' + path + '"
    /></div>');

    alert('<div style="text-align:center; vertical-align:middle; width:' +
    divWidth + 'px; height:' + divHeight + 'px; border-color:white;
    border-style:ridge; border-width:15px;"><img style="text-align:center;
    vertical-align:middle; width:' + w + 'px; height:' + h + 'px;" src="' + path
    + '" /></div>')

    openedWindow.document.write('</body></html>');



    Thanks again
     
    AAaron123, Jun 29, 2009
    #3
  4. AAaron123

    AAaron123 Guest

    Guess I found my problem.

    img {vertical-align: middle}
    Places the image in the middle of the baseline.



    But knowing doesn't help.



    <div><img></img></div>

    How do I get the img to center vertically in the div?



    Where is the baseline?





    Thanks
     
    AAaron123, Jun 29, 2009
    #4
  5. On Jun 29, 3:07 am, "AAaron123" <> wrote:
    > Guess I found my problem.
    >
    > img {vertical-align: middle}
    > Places the image in the middle of the baseline.
    >
    > But knowing doesn't help.
    >
    > <div><img></img></div>
    >
    > How do I get the img to center vertically in the div?
    >
    > Where is the baseline?
    >
    > Thanks


    There are few ways you can try. The easiest way is to set line-height
    for the div element

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
    TR/html4/strict.dtd">
    <html>
    <head>
    </head>
    <body>
    <div style="height:300px;border:solid 1px red;line-height:300px"><img
    style="vertical-align:middle;" src="http://groups.google.se/intl/en/
    images/logos/groups_logo.gif"></div>
    </body>
    </html>

    This method does not work nicely at all if image is higher than
    container.

    See more at http://www.student.oulu.fi/~laurirai/www/css/middle/

    I used "middle" to set vertical-align because the baseline is the
    "line" upon which a line of text rests (Characters such as g or p
    extend down below the baseline). Change my example to baseline and you
    will see that the image goes up a little.

    Hope this helps
     
    Alexey Smirnov, Jun 29, 2009
    #5
  6. AAaron123

    AAaron123 Guest

    "Alexey Smirnov" <> wrote in message
    news:...
    On Jun 29, 3:07 am, "AAaron123" <> wrote:
    > Guess I found my problem.
    >
    > img {vertical-align: middle}
    > Places the image in the middle of the baseline.
    >
    > But knowing doesn't help.
    >
    > <div><img></img></div>
    >
    > How do I get the img to center vertically in the div?
    >
    > Where is the baseline?
    >
    > Thanks


    There are few ways you can try. The easiest way is to set line-height
    for the div element

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
    TR/html4/strict.dtd">
    <html>
    <head>
    </head>
    <body>
    <div style="height:300px;border:solid 1px red;line-height:300px"><img
    style="vertical-align:middle;" src="http://groups.google.se/intl/en/
    images/logos/groups_logo.gif"></div>
    </body>
    </html>

    This method does not work nicely at all if image is higher than
    container.

    See more at http://www.student.oulu.fi/~laurirai/www/css/middle/

    I used "middle" to set vertical-align because the baseline is the
    "line" upon which a line of text rests (Characters such as g or p
    extend down below the baseline). Change my example to baseline and you
    will see that the image goes up a little.

    Hope this helps

    ========

    I just copied your div and stuck it in my code and got a red rectangle with
    "Google groups" at the top of the rectangle.

    So I made a new web form and inserted your entire code into it and again got
    "Google groups" not centered vertically.

    Tried in IE8 and Firefox.

    I noticed the site you referenced did not give code for using line-height so
    I assume you wrote it and tried it.

    Your comment about using baseline instead of middle make me think you ran it
    and "Google groups" was centered vertically. Is that correct?


    Thanks a lot


    PS he also had this but no reference to Firefox, IE7 or IE8

    Opera 7.51p1, 8b3; Mozilla 1.4.1; FF1; Konqueror 3.1.4-6; MacIE5; Safari
    1.1.1 Works
    IE5.5; IE6; Opera 6 Text centering works
     
    AAaron123, Jul 10, 2009
    #6
  7. AAaron123

    AAaron123 Guest

    I went to the site you suggested and did a show source and copied the source
    he used to display the example.
    Put it into my page and it worked OK.

    So I modified my code to be like his and now it works great!

    I wanted to thanks you again because I had this problem for months an had
    given up on it when I received your reply.

    So: Thanks again.

    PS

    Working on it raised a few questions so I put them in new post because they
    didn't appear to fit this subject.





    "Alexey Smirnov" <> wrote in message
    news:...
    On Jun 29, 3:07 am, "AAaron123" <> wrote:
    > Guess I found my problem.
    >
    > img {vertical-align: middle}
    > Places the image in the middle of the baseline.
    >
    > But knowing doesn't help.
    >
    > <div><img></img></div>
    >
    > How do I get the img to center vertically in the div?
    >
    > Where is the baseline?
    >
    > Thanks


    There are few ways you can try. The easiest way is to set line-height
    for the div element

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
    TR/html4/strict.dtd">
    <html>
    <head>
    </head>
    <body>
    <div style="height:300px;border:solid 1px red;line-height:300px"><img
    style="vertical-align:middle;" src="http://groups.google.se/intl/en/
    images/logos/groups_logo.gif"></div>
    </body>
    </html>

    This method does not work nicely at all if image is higher than
    container.

    See more at http://www.student.oulu.fi/~laurirai/www/css/middle/

    I used "middle" to set vertical-align because the baseline is the
    "line" upon which a line of text rests (Characters such as g or p
    extend down below the baseline). Change my example to baseline and you
    will see that the image goes up a little.

    Hope this helps
     
    AAaron123, Jul 12, 2009
    #7
  8. AAaron123

    AAaron123 Guest

    "Alexey Smirnov" <> wrote in message
    news:...
    On Jun 28, 1:56 pm, "AAaron123" <> wrote:
    > Suppose to be a frame with an image that just fits inside.
    >
    > Works well in IE8 except the frame has more space between it and the
    > window
    > below than above.
    >
    > In FireFox the frame is too big for the image, but worst than that, the
    > image is all the way to the top.
    >
    > openedWindow.document.write('<center><div style="width:' + divWidth + ';
    > height:' + divHeight + '; border-color:white; border-style:ridge;
    > border-width:15px;"><img width="' + w + '" height="' + h + '" src="' +
    > path
    > + '" /></div></center>');
    >
    > The more serious problem is FireFox.
    >
    > Do you know how to fix it?
    >
    > Thanks


    You defined width and height by javascript: divWidth and divHeight

    Did you check if divWidth and divHeight have correct values in FF?

    =======

    No. I will do that.
    But maybe the problem is that I don't know what the div width means.
    Inside the border?
    Includes the border?
    FF and IE agree on what it is?


    Thanks
     
    AAaron123, Jul 12, 2009
    #8
  9. On Jul 12, 8:01 am, "AAaron123" <> wrote:
    > "Alexey Smirnov" <> wrote in message
    >
    > news:...
    > On Jun 28, 1:56 pm, "AAaron123" <> wrote:
    >
    >
    >
    >
    >
    > > Suppose to be a frame with an image that just fits inside.

    >
    > > Works well in IE8 except the frame has more space between it and the
    > > window
    > > below than above.

    >
    > > In FireFox the frame is too big for the image, but worst than that, the
    > > image is all the way to the top.

    >
    > > openedWindow.document.write('<center><div style="width:' + divWidth + ';
    > > height:' + divHeight + '; border-color:white; border-style:ridge;
    > > border-width:15px;"><img width="' + w + '" height="' + h + '" src="' +
    > > path
    > > + '" /></div></center>');

    >
    > > The more serious problem is FireFox.

    >
    > > Do you know how to fix it?

    >
    > > Thanks

    >
    > You defined width and height by javascript: divWidth and divHeight
    >
    > Did you check if divWidth and divHeight have correct values in FF?
    >
    > =======
    >
    > No. I will do that.
    > But maybe the problem is that I don't know what the div width means.
    > Inside the border?
    > Includes the border?
    > FF and IE agree on what it is?
    >
    > Thanks- Hide quoted text -
    >
    > - Show quoted text -


    I don't know either :)

    You wrote you have

    .... <div style="width:' + divWidth + 'height:' + divHeight + ...

    And you didn't said what values divWidth and divHeight have.

    Glad that it works now
     
    Alexey Smirnov, Jul 13, 2009
    #9
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Crispy
    Replies:
    5
    Views:
    870
    e n | c k m a
    Aug 10, 2003
  2. Gnarlodious
    Replies:
    4
    Views:
    17,681
    elizas
    May 5, 2010
  3. Piet
    Replies:
    0
    Views:
    578
  4. active
    Replies:
    15
    Views:
    776
    active
    Jun 27, 2007
  5. F. Da Costa
    Replies:
    0
    Views:
    97
    F. Da Costa
    Jan 8, 2004
Loading...

Share This Page