search

iMyth / flying-saucer

Automatically exported from code.google.com/p/flying-saucer
1 stars 0 forks source link

Incorrect layout when using percentages and fixed positioning #2

Closed GoogleCodeExporter closed 9 years ago

GoogleCodeExporter commented 9 years ago 
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
   <title>A frame document with CSS 2.1</title>
   <style type="text/css" media="screen">

               /* basic styles for html, body and the % lines*/
               @import "myFlyingSaucer.css";

               div.t, div.h {
                       position:fixed;
                       width:5%;
                       bottom:0;
                       text-align:center;
                       color:blue;
                       z-index:1;
               }

               div.h {
                       background-color:red;
               }
               div.t {
                       background-color:yellow;
               }
   </style>
 </head>
 <body>
         <div class="h" style="height:100%; left:0%;">h100</div>
         <div class="t" style="top:0%; left:5%;">t100</div>
         <div class="h" style="height:90%; left:10%;">h90</div>
         <div class="t" style="top:10%; left:15%;">t90</div>
         <div class="h" style="height:80%; left:20%;">h80</div>
         <div class="t" style="top:20%; left:25%;">t80</div>
         <div class="h" style="height:70%; left:30%;">h70</div>
         <div class="t" style="top:30%; left:35%;">t70</div>
         <div class="h" style="height:60%; left:40%;">h60</div>
         <div class="t" style="top:40%; left:45%;">t60</div>
         <div class="h" style="height:50%; left:50%;">h50</div>
         <div class="t" style="top:50%; left:55%;">t50</div>
         <div class="h" style="height:40%; left:60%;">h40</div>
         <div class="t" style="top:60%; left:65%;">t40</div>
         <div class="h" style="height:30%; left:70%;">h30</div>
         <div class="t" style="top:70%; left:75%;">t30</div>
         <div class="h" style="height:20%; left:80%;">h20</div>
         <div class="t" style="top:80%; left:85%;">t20</div>
         <div class="h" style="height:10%; left:90%;">h10</div>
         <div class="t" style="top:90%; left:95%;">t10</div>

         <!-- ... //divs for the % lines -->
         </body>
</html>

In the attached picture the result is shown. The red bars show how it 
should be (they are made with the 'height' properties). The yellow ones 
show how it looks with the 'top' property and percentage values.

The yellow and the red bars should be equal but that's not the case. As you 
can see, for each percentage value (except the 0% which is equal to 0) the 
distance to the bottom edge is also increased (seems to be smomething like 
the half of the distance to the to top edge).

I think the implementation for height calculation of the forumla described 
in sec. 10.6.4 of the css2.1 specification seems to be not correct. 
According to number 5 the result should be: height = height.containingBox - 
top (assuming there is no padding or margin).

Switching the 'top' and 'bottom' properties (top:0 and bottom:x%) also 
results in an additional distance to the bottom edge.

Regards,
Thomas Grundmann

Original issue reported on code.google.com by Peter.Br...@gmail.com on 29 Apr 2010 at 2:04

Attachments:

GoogleCodeExporter commented 9 years ago

Original comment by Peter.Br...@gmail.com on 29 Apr 2010 at 2:06

GoogleCodeExporter commented 9 years ago 
Fixed in 3a1fc356

Original comment by Peter.Br...@gmail.com on 16 Sep 2010 at 11:08

GoogleCodeExporter commented 9 years ago

Original comment by Peter.Br...@gmail.com on 16 Sep 2010 at 11:09