I am trying to achieve a fluid behavior in the site I am working . After weeks of struggle everything worked pretty well in
FireFox
,
Chrome
and
Safari
. When it come to display in
IE 8
my main
absolute
DIV that represent the canvas of the action that is located inside a table row using a
custom layout
appear totally squeezed.
The css directions to have it absolute with bottom:0, top:0; and with a parent 100% where not respected.
My first reaction was to blame Explorer being part of the “special child” category. Then I decided to debug my HTML and CSS instructions to find out what I was doing that Explorer did not like.
The initial approach was to simplify the HMTL output to be able to concentrate on the basic CSS instructions . I kept the exact table layout and main div content with the same class name associated. Then I attached the same CSS file and with my surprise it display in IE 8 (native and not compatible mode) exactly like everyone else.
Then I exported the FireFox generated Vaadin HMTL code and I visualized it in IE with the same associated CSS (using as well the Reindeer css) and it display just right.
Therefore the conclusion is that Vaddin is generating attributes in the various DIVs for the IE version that are screwing up with my layouts planning which is trying to use as much CssLayout and try to avoid Vaadiin calculations and injected style attributes into the html tags.
I further debug the IE generated code and I found that vaadin is adding
position:relative
to many DIVs while it does not do that in the other browsers.
example:
IE:
<DIV style="BORDER-BOTTOM: medium none; POSITION: relative; BORDER-LEFT: medium none; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; BORDER-TOP: medium none; BORDER-RIGHT: medium none; PADDING-TOP: 0px" class="v-customlayout v-customlayout-siref_customLayout siref_customLayout" tkPid="PID4">
FireFox:
<div class="v-customlayout v-customlayout-siref_customLayout siref_customLayout" style="border: medium none; margin: 0pt; padding: 0pt;">
Those particular differences are what is squeezing my absolute div inside the table inside the customLayout DIV
Then after I forced
position:static!important
I could start seeing the content, but other absolute elements where not well display. I start forcing static vs. relative positions to most of those divs to see again a similar interface as in all the other browser.
But this hacking is not a solution
.
One quick solution could be to let Vaadin believe that every IE request are coming from another browser… is there a way I can enforce Vaadin to consider IE requests as if they where FireFox 4 requests?
This situations links back to my previous post of allowing designer to have a better control of the generated components and for which, sadly enough I received no answer or opinions. 