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/
