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">→</span> R<sub>2</sub>NCH<sub>3</sub> +
CO<sub>2</sub> + H<sub>2</sub>O (1)</p>
</body>
</html> 8  4057 
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; }
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.
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>
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?
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
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/
[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? This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
by: Kai Grossjohann |
last post by:
I have a table which contains a top-aligned table cell:
....
<tr style="height:40">
...
<td colspan="1" rowspan="2" align="left" valign="top"
style="overflow:hidden;">...
|
by: Poonam |
last post by:
Hi
Can we align an image or content vertically middle in a DIV.
tks poonam
|
by: FL |
last post by:
Hi Everyone,
I know howto center a block using
margin-left: auto ;
margin-right: auto ;
but I'm trying to center vertically a box, any idea to solve this?
|
by: john T |
last post by:
Is there anyway to vertically center a html table using css in such a
way it does not alter the html table. When I tryied it just screws up.
|
by: Daniel Kaplan |
last post by:
Hi All,
Am trying to vertically center a table, and failing miserably at it.
Have tried everything with this:
<table border=1 width=100% valign=MIDDLE>
taking out width, etc. I just...
|
by: Peter Lapic |
last post by:
I have to create a image web service that when it receives an imageid
parameter it will return a gif image from a file that has been stored on the
server.
The client will be an asp.net web page...
|
by: Jason |
last post by:
Is that possible? How?
<td >
<asp:Label ID="StartDateLabel" runat="server" Text="Start Date:">
<asp:imagebutton ID="Imagebutton1" width=18 Height=18
CommandName=SetDate imageUrl="../cal.jpg"...
|
by: ashkaan57 |
last post by:
Hi,
I am trying to put text on left and right side of the page and used:
<div>
<span>blah blah</span>
<span style="float:right">blah blah</span>
</div>
The 2nd text does go to the right but the...
|
by: Atli |
last post by:
Hi.
I'm setting up a small photo-album-type thing, where I use PHP to set up a list of images for visitors to click through.
That's all simple enough.
However, I'm having a weird bug in IE8.
...
|
by: Charles Arthur |
last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
|
by: emmanuelkatto |
last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud.
Please let me know.
Thanks!
Emmanuel
|
by: nemocccc |
last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
|
by: Hystou |
last post by:
There are some requirements for setting up RAID:
1. The motherboard and BIOS support RAID configuration.
2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new...
| |
