Image does not fit correctly in a div frame

  • Thread starter Thread starter AAaron123
  • Start date Start date
A

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
 
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
Click to expand...

You defined width and height by javascript: divWidth and divHeight

Did you check if divWidth and divHeight have correct values in FF?
 
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...
Click to expand...

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
 
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
 
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
Click to expand...

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
 
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
Click to expand...

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





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
Click to expand...

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
 
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
Click to expand...

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
 
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 -
Click to expand...

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