ansaurus

Question

CSS problem with silverlight component position. Cannot set height that i want.

Answer 1

+1 A:

Hi Evgeny Id stay away from using tables for layout, but thats just me :)

Firstly i would create a holding div for the layout, two divs for the top and bottom and inbetween the silverlight control host div, like

<div id="container">
    <div id="top">
    </div>
    <div id="silverlightControlHost">
        <object data="data:application/x-silverlight-2," type="application/x-silverlight-2"
            width="100%" height="100%">
            <param name="source" value="ClientBin/SilverlightApplication1.xap" />
            <param name="onError" value="onSilverlightError" />
            <param name="background" value="white" />
            <param name="minRuntimeVersion" value="4.0.50826.0" />
            <param name="autoUpgrade" value="true" />
        </object>
        <iframe id="_sl_historyFrame" style="visibility: hidden; height: 0px; width: 0px; border: 0px"></iframe>
    </div>
    <div id="bottom">
    </div>
</div>

what you need to do is switch position to absolute in the silverlightControlHost class, and align the control to stretch over the page, leaving space on top and bottom for your html div containers something like

#silverlightControlHost 
{
    position: absolute;
    top:30px;
    bottom:30px;
    left:0px;
    right:0px;
    text-align:center;
}

and heres the css classes for the other divs

#top
{
   height:30px;
   width:100%;
}

#bottom{
   height:30px; 
   width:100%;
   bottom:0px;
   position:absolute;
} 

#container
{ 
    height: 100%;
    width:100%;
}

Hope that helps

EDIT

it was discovered that bottom was not positioned to the bottom :)

#bottom{
   height:30px; 
   width:100%;
   bottom:0px;
   position:absolute;
}

almog.ori 2010-09-18 14:26:24

Thanks, for quick reply. It really saves a lot of time. Sorry, that maybe such easy question but i new to html. So thanks a lot.

Evgeny 2010-09-18 14:45:09

glad to help :)

almog.ori 2010-09-18 14:57:19

I set background-color:Red; and noticed, that bottom container actually not at the bottom of the screen. :( How can i move it down?

Evgeny 2010-09-19 17:10:32

you are right, ive modified my answer

almog.ori 2010-09-19 19:25:56

And one more problem with ie 7. The property height:100% doesnot work at all. Content always not visible! Please help :(

Evgeny 2010-09-20 09:42:04

perhaps then set containers class to position:absolute;right:0px;left:0px;top:0px;bottom:0px;

almog.ori 2010-09-20 12:55:07

just the same result(

Evgeny 2010-09-20 20:31:14

post another question linking to this one, i dont have ie7

almog.ori 2010-09-21 06:09:13

found web site with examples: http://limpid.nl/lab/css/fixed/header-and-footer

Evgeny 2010-09-22 18:05:24

Add that as an answer its pretty good...

almog.ori 2010-09-23 06:02:05

ansaurus

tags:

views:

answers:

CSS problem with silverlight component position. Cannot set height that i want.

related questions