Text-bottom in Opera

Hi,

The following doesn’t work in Opera:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
p {font:10pt Arial; background:green; height:16px;}
img {width:16px; height:16px; vertical-align:text-bottom;}
</style>
</head>
<body>
<p>An <img src="https://ssl.gstatic.com/images/icons/gplus-16.png" alt=""> image with a text-bottom alignment.</p>
</body>
</html>

Is it a bug or am I missing something?
Thanks!

Vertical-align is can be buggy. Can you just set vertical-align:bottom?

Hi,
Opera does have a bug with vertical-align and I believe you are missing something too.

Actually vertical-align:text-bottom works fine in Opera, but it does have a bug when vertical-align:bottom is applied to an IMG.
I remember coming across the problem before and set up a test case here.

The problem I see with your test case is the fixed height set on your <p>.

Remove the height and the pt. font-size, then crank up the img size a little bit and you will see that vertical-align:text-bottom works fine in Opera.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>V-A Test</title>
<style type="text/css">
p {
    background: green;
}
img {
    width: 36px;
    height: 36px;
    vertical-align: text-bottom;
}
</style>
</head>
<body>
<p>An <img src="https://ssl.gstatic.com/images/icons/gplus-16.png" alt=""> image with a text-bottom alignment.</p>
</body>
</html>

Now take that code above and simply change it to vertical-align:bottom; then watch Opera fall to pieces. (:
As I pointed out in the test case I linked to, the problem occurs when an <img> adjoins anonymous inline boxes.

It might help, but what if I want to use a small image? I chose a small image, a fixed height for the parent element, and the background color to demonstrate the difference between Opera and other major browsers.

Hi,
Yes, I see the difference in the way Opera handles text-bottom. It places it farther down in the parent’s content area than it should.

For x-browser consistency my suggestion would be to use baseline and then tweak the image with a negative margin.
Of course this will only work with a fixed font-size/line-height. Though it is not recommended to set font-size in px. or pt. for the web but it will give you the same results for your test case.

I set the line-height at 16px (same as img height) then used a -3px bottom margin on the img. That lines the img bottom up with the text-descenders, which is what text-bottom is supposed to do.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>V-A Test</title>
<style type="text/css">
p {
    font: 14px/16px Arial;/*16px line-height to simulate fixed height*/
    background: lime;
    text-decoration: underline;
}
img {
    width: 16px;
    height: 16px;
    /*vertical-align: text-bottom;*/
    vertical-align: baseline;/*best choice for x-browser consistency*/
    margin-bottom:-3px;/*now tweak it to fake text-bottom*/
}
</style>
</head>
<body>
    <p>An <img src="https://ssl.gstatic.com/images/icons/gplus-16.png" alt=""> image with a text-bottom alignment.</p>
</body>
</html>

Hi,

You need to set the line-height and then contain the other items on the same line within inline elements so that the img has something to align against.

This looks the same in Opera Firefox and chrome.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
p {
	font:10pt Arial;
	background:green;
	height:16px;
	line-height:16px
}
img {
	width:16px;
	height:16px;
	vertical-align:text-bottom;
}
span { vertical-align:text-bottom; }
</style>
</head>
<body>
<p><span>An</span> <img src="https://ssl.gstatic.com/images/icons/gplus-16.png" alt=""> <span>image with a text-bottom alignment.</span></p>
</body>
</html>


Brilliant! span {vertical-align:text-bottom;} is the key point and seems to be enough to resolve the issue even if you remove the line-height.

Thank you so much! :slight_smile:

It’s a shame that you have to introduce new elements just to make Opera behave though.
I did point the use of a span in the test case I linked to in my first reply. :slight_smile:

All other browsers are able to to align with the anonymous line boxes.

Yes, but to tell you the truth I didn’t carefully study your test case as it was about vertical-align:bottom. You might want to change its title and the following sentence:
Opera honors all vertical-alignment on images except BOTTOM

Thanks anyway! :slight_smile:

Hi Ray,

There’s always been a problem with anonymous inline boxes and vertical-align has been buggy in one way or another from day one in quite a few browsers. I always make sure that where alignment is critical I contain the inline elements in a span or similar. It’s a pain to add extra elements when not really needed but it does seem to make it more stable. There are still many other bugs though to catch us out :slight_smile: