Image does not fit correctly in a div frame

06-28-2009

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

06-28-2009

On Jun 28, 1:56*pm, "AAaron123" <aaaron...@roadrunner.com> 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?

06-29-2009

>
>> 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,res izable,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

06-29-2009

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

06-29-2009

On Jun 29, 3:07*am, "AAaron123" <aaaron...@roadrunner.com> 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

07-10-2009

"Alexey Smirnov" <> wrote in message
news:7980c8c4-8994-43d0-9db0-...
On Jun 29, 3:07 am, "AAaron123" <aaaron...@roadrunner.com> 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

07-12-2009

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:7980c8c4-8994-43d0-9db0-...
On Jun 29, 3:07 am, "AAaron123" <aaaron...@roadrunner.com> 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

07-12-2009

"Alexey Smirnov" <> wrote in message
news:e06b0686-e08f-42af-93f6-...
On Jun 28, 1:56 pm, "AAaron123" <aaaron...@roadrunner.com> 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

07-13-2009

On Jul 12, 8:01*am, "AAaron123" <aaaron...@roadrunner.com> wrote:
> "Alexey Smirnov" <alexey.smir...@gmail.com> wrote in message
>
> news:e06b0686-e08f-42af-93f6-...
> On Jun 28, 1:56 pm, "AAaron123" <aaaron...@roadrunner.com> 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

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
div box questions; float text around a box, fit box to image size	Gnarlodious	HTML	4	05-05-2010 11:30 AM
<div ... /> and <div ...></div>	K Viltersten	ASP .Net	4	03-31-2009 07:33 PM
NS/FF don't change div offsetWidth when div innerHTML is added toand div becomes wider	mscir	Javascript	3	06-26-2005 04:04 PM
Q: Div A inside Div B is larger than Div B	Dwayne Madsen	Javascript	1	06-01-2005 03:02 PM
Make wxListCtrl fit around contents and parent frame fit around listctrl	Piet	Python	0	07-18-2004 08:27 AM