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">&ra rr;</span> R<sub>2</sub>NCH<sub>3</sub> +
CO<sub>2</sub> + H<sub>2</sub>O (1)</p>
</body>
</html> 8  4065 
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.tu t.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.info systems.www.aut horing.styleshe ets>
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.lan g>
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***@Steppenw olf.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;">
...contents.explained.later...
</td>
...
|
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 can't get the table to be centered.
| | |
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 that calls the web service to render
a vertical strip of images.
After doing some research I am unable to find some vb.net code that can
assist...
|
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" runat=server />
</asp:Label>
</td>
<td >
|
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 next line. What am I doing
wrong?
TIA.
|
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.
Because the images can all be of different sizes (nothing I can do about that... outside my control), I use a CSS trick to get them all centered...
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...
|
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 effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it.
First, let's disable language...
| | |
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed.
This is as boiled down as I can make it. ...
|
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 Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then...
|
by: conductexam |
last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one.
At the time of converting from word file to html my equations which are in the word document file was convert...
|
by: TSSRALBI |
last post by:
Hello
I'm a network technician in training and I need your help.
I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs.
The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols.
I succeeded, with both firewalls in...
|
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
| | |
by: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating...
| |
