Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > ASP .Net > Image does not fit correctly in a div frame

Reply
Thread Tools

Image does not fit correctly in a div frame

 
 
AAaron123
Guest
Posts: n/a
 
      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


 
Reply With Quote
 
 
 
 
Alexey Smirnov
Guest
Posts: n/a
 
      06-28-2009
On Jun 28, 1:56*pm, "AAaron123" <(E-Mail Removed)> 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?
 
Reply With Quote
 
 
 
 
AAaron123
Guest
Posts: n/a
 
      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


 
Reply With Quote
 
AAaron123
Guest
Posts: n/a
 
      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


 
Reply With Quote
 
Alexey Smirnov
Guest
Posts: n/a
 
      06-29-2009
On Jun 29, 3:07*am, "AAaron123" <(E-Mail Removed)> 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
 
Reply With Quote
 
AAaron123
Guest
Posts: n/a
 
      07-10-2009

"Alexey Smirnov" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
On Jun 29, 3:07 am, "AAaron123" <(E-Mail Removed)> 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





 
Reply With Quote
 
AAaron123
Guest
Posts: n/a
 
      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" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
On Jun 29, 3:07 am, "AAaron123" <(E-Mail Removed)> 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

 
Reply With Quote
 
AAaron123
Guest
Posts: n/a
 
      07-12-2009

"Alexey Smirnov" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
On Jun 28, 1:56 pm, "AAaron123" <(E-Mail Removed)> 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

 
Reply With Quote
 
Alexey Smirnov
Guest
Posts: n/a
 
      07-13-2009
On Jul 12, 8:01*am, "AAaron123" <(E-Mail Removed)> wrote:
> "Alexey Smirnov" <(E-Mail Removed)> wrote in message
>
> news:(E-Mail Removed)...
> On Jun 28, 1:56 pm, "AAaron123" <(E-Mail Removed)> 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
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


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



Advertisments