469,352 Members | 1,795 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,352 developers. It's quick & easy.

line-height and images in IE

If a line-height is defined for a text and an image (e.g. 9px wide and
7px high) is inserted the line-height will be altered (e.g 15 instead
of 16 pixels) for IE 5.0, 5.5. and 6.0.

Here's an example:

<style>
td {
font-size:11px;
font-family:Arial,Verdana;
line-height:16px;
background-color:#ffbbbb;
}
body {
font-size:11px;
font-family:Arial,Verdana;
line-height:16px;
}
</style>

....

<table cellspacing="0" cellpadding="0" width="120">
<tr>
<td>Some text, Some text, Some text, Some text <img
src="arrow.gif">Some text, Some text, Some text, Some text</td>
</tr>
</table>

The lines around the image have a wrong line-height (15px instead of
16px). Removing the image tag eliminates the line-height problem too.
I'm sure there is a workaround for this problem.

Thanks to anyone trying to help!
Jul 20 '05 #1
4 7138
St***********@gmx.at (Stefan Krause) wrote:
The lines around the image have a wrong line-height (15px instead of
16px). Removing the image tag eliminates the line-height problem too.
I'm sure there is a workaround for this problem.


Instead of trying to get this to display as you want, you should address
the real problems:

1) Don't size fonts in pixels, they don't resize in IE.
2) Include a generic fall back font.
3) Don't size fonts less than 100% of the user's default (for body
text).
4) Stop striving for a pixel precise rendering, this is a futile pursuit
for web sites.

--
Spartanicus
Jul 20 '05 #2
On Mon, 05 Jul 2004 16:27:37 +0100, Spartanicus <me@privacy.net> wrote
or quoted :
4) Stop striving for a pixel precise rendering, this is a futile pursuit
for web sites.


for that see http://mindprod.com/jgloss/pdf.html

--
Canadian Mind Products, Roedy Green.
Coaching, problem solving, economical contract programming.
See http://mindprod.com/jgloss/jgloss.html for The Java Glossary.
Jul 20 '05 #3
Thanks for your answer, but I guess you know as well as I do that it's
not that simple in real life. If the customer wants to get that line
in
16px line-height then I better do so in my application. Otherwise the
next job will be done by somebody who does a better job in adhereing
to
the company's style guide.
We all know that HTML is often abused in many ways and that some style
guides may include "some not so good ideas". Anyway
_now_ it's simply not the time to evangelise the customer, but to get
the job done.

I'd still be thankful for any technical workarounds.

Spartanicus <me@privacy.net> wrote in message news:<q7********************************@news.spar tanicus.utvinternet.ie>...
St***********@gmx.at (Stefan Krause) wrote:
The lines around the image have a wrong line-height (15px instead of
16px). Removing the image tag eliminates the line-height problem too.
I'm sure there is a workaround for this problem.


Instead of trying to get this to display as you want, you should address
the real problems:

1) Don't size fonts in pixels, they don't resize in IE.
2) Include a generic fall back font.
3) Don't size fonts less than 100% of the user's default (for body
text).
4) Stop striving for a pixel precise rendering, this is a futile pursuit
for web sites.

Jul 20 '05 #4
*Stefan Krause* <St***********@gmx.at>:

Thanks for your answer, but I guess you know as well as I do that it's
not that simple in real life. If the customer wants to get that line
in 16px line-height then I better do so in my application.
Rubbish! You are the coder, you are supposed to have the technical
knowledge, you have to tell the customer what is possible and
recommendable and what is not.
Otherwise the next job will be done by somebody who does a better job in
advising the company.
adhereing to the company's style guide.
Good style guides are made with the various medias' possibilities and
limitations in mind. The usual worse style guides can be bend to fit. Only
very bad, rigid ones and people who misunterstand them and their purpose
could make you want that:
I'd still be thankful for any technical workarounds.


Like 'Spartanicus' said, "address the real problems".

body {font: 100.01%/1.45 Arial, sans-serif}
img {height: 15px; vertical-align: top/*not sure what you want*/}

+--------------------------------<line-height>--------------------------------+
| If the property is set on a block-level element whose content is composed |
| of inline-level elements, it specifies the minimal height of each |
| generated inline box. |
| |
| If the property is set on an inline-level element, it specifies the exact |
| height of each box generated by the element. (Except for inline replaced |
| elements, where the height of the box is given by the 'height' property.) |
+-----------------------------------------------------------------------------+

Images are inline replaced elements. So the only way to set a fix or
maximum line-height in addition to your minimum 16px (i.e. ca. 1.45 based
on a desired font-size of 11px) would be an extra inline-level element
surrounding 'img' and text. That probably would be your 'td' ('table-cell'
is inline-level IIRC).
If IE adds or substracts one pixel, so be it. Noöne notices or cares.

--
"There are painters who transform the sun into a yellow spot,
but there are others who, thanks to their art and intelligence,
transform a yellow spot into the sun."
Pablo Picasso
Jul 20 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

3 posts views Thread by Yazar Yolait | last post: by
19 posts views Thread by les_ander | last post: by
4 posts views Thread by Tor Erik Sønvisen | last post: by
7 posts views Thread by jamait | last post: by
9 posts views Thread by Adi | last post: by
11 posts views Thread by xdevel | last post: by
19 posts views Thread by =?Utf-8?B?QnJpYW4gQ29vaw==?= | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by zhoujie | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.