Hi,
I always thought that "1em" equals one line height. But if I replace
<br><hr><br>
by
<hr style="margin: 1em 0;">
tables above and below the <hr> get closer in IE as well as FF.
This brings me to the question: What's a <br>, expressed in CSS*?
*) with no margins and padding defined elsewhere
Axel
PS: Here's the sample code I've been using to test the effect:
<html>
<body>
<table border=1><tr><t d>a</td></tr></table>
<br><hr><br>
<table border=1><tr><t d>b</td></tr></table>
</body>
</html>
---------------------------------------------
<html>
<body>
<table border=1><tr><t d>a</td></tr></table>
<hr style="margin: 1em 0">
<table border=1><tr><t d>b</td></tr></table>
</body>
</html> 16  8420 
"Axel Dahmen" <NO*****@NoOneK nows.invalid> wrote: I always thought that "1em" equals one line height.
No, it equals the height of the font. The line-height is normally a
little bit larger, typically about 1.15 times larger.
But if I replace
<br><hr><br>
by
<hr style="margin: 1em 0;">
tables above and below the <hr> get closer in IE as well as FF.
Of course as there are no lines of text to be broken by the <br>s the
first example it's possible that some browsers will ignore the <br>s
and hence the second example will create larger spaces. There's also
the possibility of different default margin sizes for <hr> in
different browsers. So you're not really comparing like with like.
This brings me to the question: What's a <br>, expressed in CSS*?
Nothing. <br> is a line break. There's CSS to control where an element
can insert line breaks but line breaks by definition have no size or
anything else that could be styled.
Steve
--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor
Steve Pugh <st***@pugh.net > <http://steve.pugh.net/>
On Mon, 31 Jan 2005 00:18:15 +0100, "Axel Dahmen"
<NO*****@NoOneK nows.invalid> wrote: I always thought that "1em" equals one line height.
No; that's wrong.
http://www.css.nu/articles/typograph1-en.html#Ch22
http://www.css.nu/articles/typograph1-en.html#Ch23
But if I replace
<br><hr><br>
by
<hr style="margin: 1em 0;">
tables above and below the <hr> get closer in IE as well as FF.
Yea; whatever "happens" is probably correct depending on various value
assignments to properties.
This brings me to the question: What's a <br>, expressed in CSS*?
markup as e.g.
<p>Hello<span>W orld</span></p>
style rule...
p>span:before { content: "\A" }
suggestst rendering of the text as...
Hello
World
http://www.w3.org/TR/CSS21/generate....ropdef-content
There is no box generated for the empty BR element, following that there
is nothing to suggest a style for. A BR element merely breaks a line at
it's location in markup, in exactly the same way as the line would have
been broken anyway had it been long enough not to fit in its containing
element.
PS: Here's the sample code I've been using to test the effect:
You are supposed to produce a URL for us where you have your test case.
--
Rex
Steve Pugh <st***@pugh.net > wrote: I always thought that "1em" equals one line height.
No, it equals the height of the font.
Indeed. What's difficult here is what the height of the font means, but we
can hopefully skip that in this discussion.
The line-height is normally a
little bit larger, typically about 1.15 times larger.
I would say 1.2 is closer to typical browser defaults. CSS 1 recommends 1.1
in its default style sheet for HTML, CSS 2 says 1.33, CSS 2.1 draft used to
say 1.12em (which is not the same as 1.12, really) but was then fixed to
1.12. Confusing, is it not? And for most fonts commonly used, 1.12 is too
small.
There's unfortunately no way to make line-height depend on the browser's
actual choice of font (which can be affected, but not controlled, by an
author style sheet). This makes me think line-height: 1.25 is generally the
least of evils.
But when setting the spacing between two consecutive tables, such
considerations don't need to play any role. Just set a suitable bottom
margin for the first table, or a suitable top margin for the second table.
If you absolutely must do your best to create _some_ space between the two
tables in non-CSS browsing situations, putting <p> </p> is probably
the simplest way. (By HTML specifications, browsers are required to ignore
that attempt - assuming we interpret the construct as an empty paragraph,
which is a little debatable - but we know they don't do anything that
sophisticated.)
--
Yucca, http://www.cs.tut.fi/~jkorpela/
"Jukka K. Korpela" <jk******@cs.tu t.fi> wrote: Steve Pugh <st***@pugh.net > wrote:
The line-height is normally a
little bit larger, typically about 1.15 times larger.
I would say 1.2 is closer to typical browser defaults.
I set a font-size of 60px and took screenshots in IE6, FF1 and Opera
7.54. The distance between adjacent baselines was 67px in IE6 and
Opera and 69px in Firefox. That's a default line-height of (approx)
1.12 for IE and Opera and (exactly) 1.15 for Firefox.
(For the record: the font was Arial in each case, the page triggered
Standards mode, all three browsers were running on WinXP, no user
stylesheets that could affect line-height were in use, the top of
ascender to bottom of descender (using h and p) distance was 55px in
all three browsers.)
The last point may be important. If font-size: 60px gives text where
most characters fit inside a box 55px tall then the line-height will
_appear_ to be about 1.2
Steve
--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor
Steve Pugh <st***@pugh.net > <http://steve.pugh.net/>
Steve Pugh <st***@pugh.net > wrote: The line-height is normally a little bit larger, typically about 1.15
times larger.
I would say 1.2 is closer to typical browser defaults.
I set a font-size of 60px and took screenshots in IE6, FF1 and Opera
7.54. The distance between adjacent baselines was 67px in IE6 and
Opera and 69px in Firefox.
How did you measure the distance between baselines? I played a little with
testing the behavior of unstyled text with respect to the same text styled
with line-height.
That's a default line-height of (approx)
1.12 for IE and Opera and (exactly) 1.15 for Firefox.
I did a simple test with a paragraph of text, duplicated in two p elements,
with the style sheet
p { width: 40%; float: left; border: solid red 1px}
and with line-height set for the second p element explicitly. For 60px
Arial, on IE6, the paragraphs are identical when the setting for the second
paragraph is line-height: 1.12. But, for example,
- for Arial Unicode MS at 12pt size, line-height: 1.3 makes the paragraphs
appear similarly to each other
- for Times New Roman at 12pt size, line-height: 1.2 creates a match (and
so does 1.16).
So the situation really varies, by font family among other things.
--
Yucca, http://www.cs.tut.fi/~jkorpela/
"Jukka K. Korpela" <jk******@cs.tu t.fi> wrote: Steve Pugh <st***@pugh.net > wrote:
The line-height is normally a little bit larger, typically about 1.15
times larger.
I would say 1.2 is closer to typical browser defaults.
I set a font-size of 60px and took screenshots in IE6, FF1 and Opera
7.54. The distance between adjacent baselines was 67px in IE6 and
Opera and 69px in Firefox.
How did you measure the distance between baselines?
I took screenshots and measured the distance in PhotoShop.
That's a default line-height of (approx)
1.12 for IE and Opera and (exactly) 1.15 for Firefox.
I did a simple test with a paragraph of text, duplicated in two p elements,
with the style sheet
p { width: 40%; float: left; border: solid red 1px}
and with line-height set for the second p element explicitly. For 60px
Arial, on IE6, the paragraphs are identical when the setting for the second
paragraph is line-height: 1.12. But, for example,
- for Arial Unicode MS at 12pt size, line-height: 1.3 makes the paragraphs
appear similarly to each other
One could hazard a guess that Arial Unicode, having a larger repetoire
of characters, has some glyphs that are "larger".
That implies that when the spec talks about line-height thus: "The
used value of the property is this number multiplied by the element's
font size" it is deliberately being vague when it says font size
(note, not font-size).
Which I think brings us back to the very good point you made about
1.12 and 1.12em not being the same.
- for Times New Roman at 12pt size, line-height: 1.2 creates a match (and
so does 1.16).
Assuming you're using a browser where 12pt = 16px then 1.2 = 19.2 and
1.16 = 18.56, so one would hope that they would both round off to
19px. That's one of the reasons I used a large font size for my tests.
So the situation really varies, by font family among other things.
So we can conclude that fonts vary. Who'd have guessed? ;-)
Steve
--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor
Steve Pugh <st***@pugh.net > <http://steve.pugh.net/>
On Mon, 31 Jan 2005 13:33:30 +0000, Steve Pugh <st***@pugh.net > wrote: "Jukka K. Korpela" <jk******@cs.tu t.fi> wrote:
Steve Pugh <st***@pugh.net > wrote: The line-height is normally a
little bit larger, typically about 1.15 times larger.
I would say 1.2 is closer to typical browser defaults.
I set a font-size of 60px and took screenshots in IE6, FF1 and Opera
7.54. The distance between adjacent baselines was 67px in IE6 and
Opera and 69px in Firefox. That's a default line-height of (approx)
1.12 for IE and Opera and (exactly) 1.15 for Firefox.
[...]...the top of ascender to bottom of descender (using h and p)
distance was 55px in all three browsers.
Maybe it should be noted that western typographical conventions calls
for the use of the char sequence Ép to determine the size of a font.
The last point may be important. If font-size: 60px gives text where
most characters fit inside a box 55px tall then the line-height will
_appear_ to be about 1.2
Does this following article have any influx on your studies? http://www.css.nu/articles/line-height.html
--
Rex
Jan Roland Eriksson <jr****@newsguy .com> wrote: On Mon, 31 Jan 2005 13:33:30 +0000, Steve Pugh <st***@pugh.net > wrote:
I set a font-size of 60px and took screenshots in IE6, FF1 and Opera
7.54. The distance between adjacent baselines was 67px in IE6 and
Opera and 69px in Firefox. That's a default line-height of (approx)
1.12 for IE and Opera and (exactly) 1.15 for Firefox.
[...]...the top of ascender to bottom of descender (using h and p)
distance was 55px in all three browsers.
Maybe it should be noted that western typographical conventions calls
for the use of the char sequence Ép to determine the size of a font.
Indeed. I measured that value as well and for font-size: 60px it was
66px in all three browsers. The last point may be important. If font-size: 60px gives text where
most characters fit inside a box 55px tall then the line-height will
_appear_ to be about 1.2
Does this following article have any influx on your studies?
http://www.css.nu/articles/line-height.html
It's something that I've read in the past (and Eric Meyer's much more
in depth study that it links to). I don't think anything there dirctly
adds to or contradicts what I stated but is good background material
on the subject of line-height in general.
Steve
--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor
Steve Pugh <st***@pugh.net > <http://steve.pugh.net/>
Hi, Steve,
thanks for helping me!! :)
So there is no unit representing line-height? This brings me then to some
curious thought: How can a paragraph's margin possibly be defined to give a
straight layout in a two column text like:
asdjfök ajks öjklö
dsf dfs gaerh sadfas
fffd fd
dfas dfr jkgfh hjjkfg
fasf df fasdfdfasf
without such unit?
Axel
---------------------------------------
"Steve Pugh" <st***@pugh.net > schrieb im Newsbeitrag
news:i9******** *************** *********@4ax.c om... "Axel Dahmen" <NO*****@NoOneK nows.invalid> wrote:
I always thought that "1em" equals one line height.
No, it equals the height of the font. The line-height is normally a
little bit larger, typically about 1.15 times larger.
But if I replace
<br><hr><br>
by
<hr style="margin: 1em 0;">
tables above and below the <hr> get closer in IE as well as FF.
Of course as there are no lines of text to be broken by the <br>s the
first example it's possible that some browsers will ignore the <br>s
and hence the second example will create larger spaces. There's also
the possibility of different default margin sizes for <hr> in
different browsers. So you're not really comparing like with like.
This brings me to the question: What's a <br>, expressed in CSS*?
Nothing. <br> is a line break. There's CSS to control where an element
can insert line breaks but line breaks by definition have no size or
anything else that could be styled.
Steve
--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor
Steve Pugh <st***@pugh.net > <http://steve.pugh.net/> This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics | |
by: fis |
last post by:
Hi all,
I've problem because there are needed break lines in my texts on the
web site but i can't do it :(
My pipeline looks like: XMS -> I18N -> XSLT -> HTML
I have lot of texts in my "languages" files and these are describes
for things on my website.
Example text looks like this:
|
by: Lasse |
last post by:
I have done this simple function, it seems to work as intended, to
solve a problem i have had for a while. I couldnt find any sample
around that was working for me.
I would like to test it with you and see if there are any improvments
that i should make ;-)
It should be fast and if possible compatible with todays modern
browser-standards. It should be activated by the onload-event.
This is my code, free for all to use:
|
by: red |
last post by:
If I have <span>text</span> <br> and then some text
isn't there sopposed to be a line break between the span and the text ?
Why do browsers ignore the <br> ?
|
by: noor.rahman |
last post by:
I have an XML file that stores data from an HTML form. I use XSL to
display the data in HTML format. The data may have newline characters.
However, XSL is not displaying the newlines properly in the browser.
I even replaced all the newlines with <BR/> tags but eventhough I see
the tags in my source, I don't get a line break in the output document.
Any help would be greatly appreciated.
|
by: meltedown |
last post by:
Earlier, there was a discussion of why not to use <br>s too much. I
mostly don't like using <br>s at all but there is one situation where
its seems better than the alternative.
<h4> this is the paragraph header</h4>
<p> this is the paragraph</p>
If I want no margin between the header and the paragraph, I can use:
<h4 class='no_bottom_margin'> this is the paragraph header</h4>
<p class='no_top_margin'> this is the paragraph</p>
| | |
by: Winshent |
last post by:
I have a multi line text in an admin page on my cms.
I am trying to capture carriage returns as and replace them with
<p></p> bfore the string gets written to the database.
I have tried all the charcontrols option and chr(13) with success.. was
using the following code:
Dim s As String = MyTextbox.Text
|
by: Winshent |
last post by:
I have a multi line text in an admin page on my cms.
I am trying to capture carriage returns as and replace them with
<p></p> bfore the string gets written to the database.
I have tried all the charcontrols option and chr(13) with success.. was
using the following code:
Dim s As String = MyTextbox.Text
|
by: Summercoolness |
last post by:
so i am starting to use more of <br /and <div style="clear: both" /
which is the XHTML style...
now, won't those actually confuse the old browsers? for example,
will the old browser treat the "div" as not closing, and so everything
after the div will be treated as part of that div?
|
by: Nathan Sokalski |
last post by:
Something that I recently noticed in IE6 (I don't know whether it is true
for other browsers or versions of IE) is that it renders <br/and <br></br>
differently. With the <br/version, which is what most people use when they
write static code (some people use <br>, but with xhtml you are required to
close all tags), IE6 simply breaks to the next line like it is supposed to.
However, with <br></br>, which is what is sometimes generated by...
|
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 synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
|
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.
Here is my compilation command:
g++-12 -std=c++20 -Wnarrowing bit_field.cpp
Here is the code in...
| | |
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 tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth.
The Art of Business Website Design
Your website is...
|
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 most users, this new feature is actually very convenient. If you want to control the update process,...
|
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 protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
|
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 presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules.
He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms.
Adolph will...
|
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 into image.
Globals.ThisAddIn.Application.ActiveDocument.Select();...
|
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 the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
| | |
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 effective websites that not only look great but also perform exceptionally well. In this comprehensive...
| |
