Previous Message
Next Message

Parallel texts

Sent by Lars Bruzelius on 15 March 2006 19:07

For a transcription that I am doing, I need syncronised parallel 
texts with a dividing line running down the gutter. If I understand 
the CSS box model correctly, the following CSS would do the trick:

<style type="text/css">
..l {float: left; width: 49.1%; padding-right: 0.1%}
..r {float: right; width: 49.1%; padding-left: 0.1%}

<div style="width: 100%">
<div class="l">Short text</div>
<div class="r">Long text</div>
<div class="l">More text</div>
<div class="r">Yet more text</div>

This works as expected in Amaya 9.4 and Internet Explorer 7 Beta 2 
(actually an updated Beta 1), but not in Firefox and Opera 
8.52, where there is no gap below the shorter text.

Adding "border-right: 1px solid black; margin-left: -1px" and 
"border-left: 1px solid black; margin-left: -1px" to the classes "l" 
and "r" respectively once again gives the expected result in Amaya 
and Internet Explorer. Opera and Firefox still exhibit the previous 
"defects", but Opera also has a gap between the borders.

Where have I gone wrong? With the reputation of Opera and Firefox, I 
expect these to render the code correctly and Amaya and Internet 
Explorer to fail rather than the other way around.


Lars Bruzelius

SYSteam Udac AB
Box 174,
SE-751 04  Uppsala,

Telephone: +46 18 678054    E-mail: [EMAIL-REMOVED]
Telefax:   +46 18 516600    <URL:"">

css-discuss [EMAIL-REMOVED]]
IE7b2 testing hub --
List wiki/FAQ --
Supported by --
Previous Message
Next Message

Message thread:

Possibly related: