Text-bottom in Opera

**Rain Lover** · Mar 31, 2012 12:20

Hi,

The following doesn't work in Opera:

Code:

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

**RyanReese** · Mar 31, 2012 13:11

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

**Rayzur** · Mar 31, 2012 13:15

Originally Posted by Rain Lover

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

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.

Code HTML4Strict:

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

**Rain Lover** · Apr 1, 2012 08:28

Originally Posted by Rayzur

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.

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.

**Rayzur** · Apr 1, 2012 09:58

Originally Posted by Rain Lover

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

Code HTML4Strict:

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

**Paul O'B** · Apr 1, 2012 11:06

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.

Code:

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

**Rain Lover** · Apr 1, 2012 11:32

Originally Posted by Paul O'B

contain the other items on the same line within inline elements so that the img has something to align against.

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!

**Rayzur** · Apr 1, 2012 11:49

Originally Posted by Paul O'B

Hi,
then contain the other items on the same line within inline elements so that the img has something to align against.

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.

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

**Rain Lover** · Apr 1, 2012 12:08

Originally Posted by Rayzur

I did point the use of a span in the test case I linked to in my first reply.

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!

**Paul O'B** · Apr 1, 2012 14:21

Hi Ray,

Originally Posted by Rayzur

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

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

User Tag List

Thread: Text-bottom in Opera

Thread Tools

Display

Text-bottom in Opera

Bookmarks

Bookmarks

Posting Permissions