By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,154 Members | 1,031 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,154 IT Pros & Developers. It's quick & easy.

How can I display a right arrow in IE aligned vertically in the middle?

P: n/a
The right arrow in IE is displayed aligned to the bottom of the line.
Is there any way I can display it aligned vertially in the middle?

Example:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css"><!--
sub {vertical-align: text-bottom; font-size: smaller}
..arr {font-family: Verdana, sans-serif; vertical-align: top }
-->
</style>
</head>
<body>
<p>R<sub>2</sub>NH + CH<sub>2</sub>O + HCO<sub>2</sub>H <span
class="arr">&rarr;</span> R<sub>2</sub>NCH<sub>3</sub> +
CO<sub>2</sub> + H<sub>2</sub>O (1)</p>
</body>
</html>
Oct 16 '05 #1
Share this Question
Share on Google+
8 Replies


P: n/a
Harry Haller wrote:
The right arrow in IE is displayed aligned to the bottom of the line.
Is there any way I can display it aligned vertially in the middle?
This is really about CSS and not HTML, isn't it?
sub {vertical-align: text-bottom; font-size: smaller}
.arr {font-family: Verdana, sans-serif; vertical-align: top }


Why do you try to align the subscripts to text bottom? Vertical
alignment of text is inconsistently supported in CSS implementations. On
IE 6, for example, the alignment seems to produce a _worse_ result than
the default. Moreover, setting font size to smaller hardly helps
anything: it's probably the default for sub elements anyway, so what you
get is just some extra possibilities of meeting browser bugs.

Using Verdana for the arrow is part of the problem. Don't change font
within text without good reason. If you use the same font throughout, or
let the browser use its font, the arrow character matches the font
design, at least reasonably.

If you really, really want to move a character up inside text, it's
probably safest to use an explicit value, e.g.
..arr { vertical-align: 0.2em; }
Oct 16 '05 #2

P: n/a
On Sun, 16 Oct 2005 19:21:52 +0300, "Jukka K. Korpela"
<jk******@cs.tut.fi> wrote:
Harry Haller wrote:
The right arrow in IE is displayed aligned to the bottom of the line.
Is there any way I can display it aligned vertially in the middle?
This is really about CSS and not HTML, isn't it?


Outside of the context of HTML, CSS is meaningless to me. This is
about how browsers display the information. I noticed that Firefox
displays the arrow in the middle when I use this instead:

.arr {vertical-align: top }

IE still wants to display it aligned to the bottom.
sub {vertical-align: text-bottom; font-size: smaller}
.arr {font-family: Verdana, sans-serif; vertical-align: top }


Why do you try to align the subscripts to text bottom?


When subscripts are not aligned to text bottom the line spacing
varies. When one has a lot of sub- and super-scripts that looks very
ugly. I want the same line spacing throughout. In my real documents I
have many sub- and super-scripts within the body of paragraph text.
Vertical
alignment of text is inconsistently supported in CSS implementations. On
IE 6, for example, the alignment seems to produce a _worse_ result than
the default. Moreover, setting font size to smaller hardly helps
anything: it's probably the default for sub elements anyway, so what you
get is just some extra possibilities of meeting browser bugs.
I think the browsers don't make sub- and superscripts small enough
which is why I am setting them smaller myself. Here is my amended
style, which I prefer for Firefox:

<style type="text/css"><!--
body, p {font-family: Bookman Old Style, serif, font-size: 11pt}
sub {vertical-align: text-bottom; font-size: 8pt}
..arr {vertical-align: top }
-->
</style>
Using Verdana for the arrow is part of the problem. Don't change font
within text without good reason. If you use the same font throughout, or
let the browser use its font, the arrow character matches the font
design, at least reasonably.
I have removed the change in font family. The reason I did that is
that once upon a time I noticed that there was one particular font I
tried which resulted in the arrow looking OK in IE. I can't remember
what font it was!!
If you really, really want to move a character up inside text, it's
probably safest to use an explicit value, e.g.
.arr { vertical-align: 0.2em; }


Thank you, IE likes that but it looks awful with Firefox. I sense a
bit of JavaScript coming on here.

Oct 17 '05 #3

P: n/a
On Mon, 17 Oct 2005, Harry Haller wrote:
This is really about CSS and not HTML, isn't it?


Outside of the context of HTML, CSS is meaningless to me.


Please refer to <news:comp.infosystems.www.authoring.stylesheets >
for questions on CSS. Thank you!

--
Netscape 3.04 does everything I need, and it's utterly reliable.
Why should I switch? Peter T. Daniels in <news:sci.lang>

Oct 17 '05 #4

P: n/a
On Sun, 16 Oct 2005, Harry Haller wrote:
The right arrow in IE is displayed aligned to the bottom of the line.

font-family: Verdana, sans-serif;
Specifying a typeface is a bad idea!
http://ppewww.ph.gla.ac.uk/~flavell/...onts.html#dont
&rarr;


→ is more widely supported.
http://ppewww.ph.gla.ac.uk/~flavell/...t/checklist#s6

--
Netscape 3.04 does everything I need, and it's utterly reliable.
Why should I switch? Peter T. Daniels in <news:sci.lang>

Oct 17 '05 #5

P: n/a
On Mon, 17 Oct 2005, Harry Haller wrote:
IE still wants to display it aligned to the bottom.


Is that IE6 ? Is it in Quirks or Standards mode?

Oct 17 '05 #6

P: n/a
On Mon, 17 Oct 2005, Alan J. Flavell wrote:
On Mon, 17 Oct 2005, Harry Haller wrote:
IE still wants to display it aligned to the bottom.


Is that IE6 ? Is it in Quirks or Standards mode?


Actually, looking back to your posting which started this thread, you
would be getting Quirks mode, see http://hsivonen.iki.fi/doctype/

Although I wouldn't recommend that in general, it seems that in this
specific case it isn't making much difference, if any. I adjusted
your DOCTYPE to a standards-mode one before trying anything else.

Taking your CSS out seems to effect a noticeable improvement to the
visual result i.e the browser's natural settings seemed to me to be
more appropriate than the ones which you have chosen. But maybe
you've got your own good reasons...

However, as to your question about the right-arrow: if you take no
specific action, you're getting it positioned where the font wants it
to be i.e in relation to the normal letters that are on either side of
it. If, in your opinion, that is too low, then it seems your
disagreement would be with the makers of the font.

If you want to raise it, relative to its natural position, maybe you
want to try a percentage vertical-align (that's treated as a
percentage of the line-height, see e.g
http://www.w3.org/TR/CSS21/visudet.h...vertical-align ).

For example, in your case:

..arr { vertical-align: 10%; }

hope this helps
Oct 17 '05 #7

P: n/a
On Mon, 17 Oct 2005 14:48:00 GMT, Harry Haller <Ha***@Steppenwolf.com>
wrote:
When subscripts are not aligned to text bottom the line spacing
varies. When one has a lot of sub- and super-scripts that looks very
ugly. I want the same line spacing throughout. In my real documents I
have many sub- and super-scripts within the body of paragraph text.


You could try this:

http://www.xs4all.nl/~sbpoley/webmat...erscripts.html

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/
Oct 17 '05 #8

P: n/a

[crossposted, and f'ups proposed]

On Mon, 17 Oct 2005, Harry Haller wrote:
When subscripts are not aligned to text bottom the line spacing
varies. When one has a lot of sub- and super-scripts that looks very
ugly. I want the same line spacing throughout.
Yes, this is a real problem. I tackled it for myself several years
ago, when CSS support in browsers was still a mess, and kludged a
partially acceptable solution (which by now isn't worth passing on)...

I'm sure one can do much better nowadays, but you should be raising
this on the stylesheets group - hence the crossposting. At any rate
you want to increase the line-height above its default value (but for
heaven's sake do it proportionally, not with fixed size units, so that
people who need to increase the text size also get increased
line-height in proportion).
I think the browsers don't make sub- and superscripts small enough
which is why I am setting them smaller myself.
When I displayed the markup from your original posting (though I
didn't try anything with it before changing it from quirks to
standards mode), your modified subscripts were distinctly *larger*
than their natural size, in either of Mozilla or IE6.
Here is my amended style, which I prefer for Firefox:

<style type="text/css"><!--
body, p {font-family: Bookman Old Style, serif, font-size: 11pt}
sub {vertical-align: text-bottom; font-size: 8pt}
*Don't* use absolute size units for general web use.

[...] Thank you, IE likes that but it looks awful with Firefox. I sense a
bit of JavaScript coming on here.


Oh dear. Are you using Standards mode yet?

Oct 17 '05 #9

This discussion thread is closed

Replies have been disabled for this discussion.