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%}
</style>

<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>
</div>

This works as expected in Amaya 9.4 and Internet Explorer 7 Beta 2 
(actually an updated Beta 1), but not in Firefox 1.5.0.1 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.

<URL:"http://www.forumnavale.se/test(div).html">


Lars Bruzelius

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

Telephone: +46 18 678054    E-mail: [EMAIL-REMOVED]
Telefax:   +46 18 516600    <URL:"http://www.udac.se">

______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Previous Message
Next Message

Message thread:

Possibly related: