Image does not fit correctly in a div frame

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
 
G

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

AAaron123

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
 
A

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
 
G

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

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

AAaron123

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

Guest

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
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Clickable Div Block 1
Image not changing between "mute" & "un-mute" images. 5
Help with my responsive home page 2
Image shifts to the right when export the page to pdf 4
Slideshow not working properly 2
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
Please help,i dont know why the image doesnt follow the image rules 1
How to make a div select work? 5

Members online

No members online now.
Total: 30 (members: 0, guests: 30)
Robots: 226

Forum statistics

Threads
473,766
Messages
2,569,569
Members
45,042
Latest member
icassiem

Latest Threads

Top