Image does not fit correctly in a div frame

28 Jun 2009 11:56 AM

AAaron123

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

28 Jun 2009 2:28 PM

Mark Rae [MVP]

Show quote Hide quote

"AAaron123" <aaaron***@roadrunner.com> wrote in message
news:e4Bd2d%239JHA.5040@TK2MSFTNGP04.phx.gbl...

> 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.

FireFox is (almost) completely standards-compliant - IE8 is getting there,
much more so than previous versions, but still has a fair way to go yet...

Using non-standard markup (like the above) is always going to be prone to
cross-browser issues.

> 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

29 Jun 2009 12:41 AM

AAaron123

Show quote Hide quote

>
>> 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

29 Jun 2009 1:07 AM

AAaron123

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