<img> placed in unexpected position

#1 August 18th, 2008, 06:15 AM

Hey, I've come across a strange behaviour that shows itself in IE 7.0
and Firefox 3 and probably other browsers.

In the code below, which is a complete HTML document which validates
as XHTML 1.0 Strict, I display an image named Images/DivLine1.jpg
(which is a simple 1x5 pixel blue line) inside two divs across 100% of
their width, the first of which has 50px height and the second of
which has 100px height. In both cases, I set the image to vertical-
align:bottom, and I expect the image to rest against the bottom of the
div box. But in each case, the bottom of the image is displayed at
(apparently) exactly 20 pixels from the top of the div. What is going
on?

--------------------code--------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>Test</title>
</head>

<body>

<div style="background-color:red; height:50px;"><img src="Images/
DivLine1.jpg" alt="DivLine1" width="100%" height="5px" style="vertical-
align:bottom" /></div>
<div><br /></div>

<div style="background-color:red; height:100px;"><img src="Images/
DivLine1.jpg" alt="DivLine1" width="100%" height="5px" style="vertical-
align:bottom" /></div>

</body>

</html>
--------------------code--------------------

Thanks,

bgold12

#2 August 18th, 2008, 07:15 AM

In article
<93336c00-d7db-4614-8f04-3b76a2802748@m73g2000hsh.googlegroups.com>,
bgold12 <bgold12@gmail.comwrote:

Quote:

Hey, I've come across a strange behaviour that shows itself in IE 7.0
and Firefox 3 and probably other browsers.
>
In the code below, which is a complete HTML document which validates
as XHTML 1.0 Strict, I display an image named Images/DivLine1.jpg
(which is a simple 1x5 pixel blue line) inside two divs across 100% of
their width, the first of which has 50px height and the second of
which has 100px height. In both cases, I set the image to vertical-
align:bottom, and I expect the image to rest against the bottom of the
div box. But in each case, the bottom of the image is displayed at
(apparently) exactly 20 pixels from the top of the div. What is going
on?
>
--------------------code------

There are many things to puzzle about with inline images, what quite is
puzzling you about

<http://netweaver.com.au/alt/inlineImages/twoDivs.html>

It will help you to see what is going on if you keep changing the text
size (up the point of the text wrapping)

--
dorayme

#3 August 18th, 2008, 08:35 AM

In article <doraymeRidThis-D46922.16130318082008@web.aioe.org>,
dorayme <doraymeRidThis@optusnet.com.auwrote:

Quote:

In article
<93336c00-d7db-4614-8f04-3b76a2802748@m73g2000hsh.googlegroups.com>,
bgold12 <bgold12@gmail.comwrote:
>

Quote:

Hey, I've come across a strange behaviour that shows itself in IE 7.0
and Firefox 3 and probably other browsers.

In the code below, which is a complete HTML document which validates
as XHTML 1.0 Strict, I display an image named Images/DivLine1.jpg
(which is a simple 1x5 pixel blue line) inside two divs across 100% of
their width, the first of which has 50px height and the second of
which has 100px height. In both cases, I set the image to vertical-
align:bottom, and I expect the image to rest against the bottom of the
div box. But in each case, the bottom of the image is displayed at
(apparently) exactly 20 pixels from the top of the div. What is going
on?

--------------------code------

>
>
There are many things to puzzle about with inline images, what quite is
puzzling you about
>
<http://netweaver.com.au/alt/inlineImages/twoDivs.html>
>
It will help you to see what is going on if you keep changing the text
size (up the point of the text wrapping)

make that

<http://netweaver.com.au/alt/inlineImages/twoDivs.html>

for an extra one with a div given a height. Remember that an inline
image is a bit like a bit of type, it will start whee the text line
boxes start in a div, left and top and the div will normally grow height
to accommodate. If you give the div a height, the height is not
necessirly used. The vertical-align instruction is not with respect to
the div but to the line box in which text sits. Images can be very tall
(like a big capital P).

--
dorayme

#4 August 18th, 2008, 08:45 AM

Alright, I solved it.

Apparently the CSS statement "vertical-align:bottom;" aligns the image
to the bottom of the element's line-height, not it's height. Although
I set the height of the first div to 50px and the height of the second
div to 100px, the line-height of each div was 20px, so when I set the
image to vertical-align:bottom, it aligned the bottom edge of the
image to 20px from the top of the div (i.e. at the line-height).

bgold12

#5 August 18th, 2008, 10:45 AM

On 18 Aug, 06:09, bgold12 <bgol...@gmail.comwrote:

Quote:

In the code below, which is a complete HTML document which validates
as XHTML 1.0 Strict,

Quote:

* * * * <div style="background-color:red; height:100px;"><img src="Images/
DivLine1.jpg" alt="DivLine1" width="100%" height="5px" style="vertical-
align:bottom" /></div>

It might be valid, but it doesn't conform to the HTML recommendation.
width and height attributes on an image are a legacy from old
presentational HTML and use their own way of indicating units, not the
same as CSS lengths. width="100%" is OK, but height="5px" should just
be height="5" Once you're using non-conformant code like this,
anything could happen. The first step in investigating such issues,
particularly when there's a variation across browsers, is to make sure
the code is _perfect_.

What is Bytes?

Popular Articles