Home/ Questions/Q 7044179
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T02:22:43+00:00

I’ve got a Silverlight applet whose UI consists of nothing more than a single

  • 0

I’ve got a Silverlight applet whose UI consists of nothing more than a single button, which I’m trying to located in an appropriate position on my web page. My current result looks like this:

Current Results

The blue element circled in red is where I want the button to be, and as the Firebug highlight shows, it’s where the <div> tag containing the Silverlight <object> tag is positioned. However, the object itself (the “Click Me” button circled in green) is about 200 or so pixels lower.

My CSS is kinda complex (not unexpectedly, what I’m trying to do is a lot more complex than what I can show here), but for the record, it’s here, reasonably simplified:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Engagement Test Page</title>
    <style type="text/css">
        div.alantaHost
        {
            display: block;
            position: relative;
        }

        div.alantaEngageHost
        {
        }

        div.alantaEngageAppHost
        {
            position: relative;
        }
        div.alantaEngageHost_Button
        {
            height: 26px;
            width: 140px;
        }

        button.alantaEngageButton
        {
            position: relative;
            cursor: pointer;
            font-family: Arial, Helvetica, sans-serif;
            font-weight: bold;
            font-size: large;
        }

        div.alantaEngageAppHost_Button
        {
            height: 26px;
            width: 140px;
        }
        /* Override */
        div.alantaHost_PictureButton
        {
            width: 220px;
            border: 1px solid #a7a7a7;
            color: rgb(0, 0, 0);
            background-color: #fff;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 12px;
            box-shadow: 8px 8px 11px #888;
            border-radius: 8px;
        }

        /* Override */
        div.alantaEngageHost_PictureButton
        {
        }

        div.alantaHeader
        {
            width: 220px;
            height: 18px;
            text-align: center;
            font-weight: bold;
            font-size: 16px;
            margin-top: 4px;
        }

        div.alantaTitle
        {
            margin-left: 10px;
            float: left;
        }

        div.alantaContact
        {
            width: 200px;
            height: 200px;
            margin: 0px 0px 0px 4px;
            padding: 5px;
            background-color: rgb(255, 255, 255);
            text-align: left;
            font-weight: bold;
        }

        img.alantaContactImage
        {
            height: 200px;
            width: 200px;
        }

        div.alantaStartChat
        {
            width: 210px;
            height: 30px;
            margin: 0px 4px;
        }

        button.alantaStartChatButton
        {
            position: relative;
            cursor: pointer;
            font-family: Arial, Helvetica, sans-serif;
            font-weight: bold;
            font-size: large;
        }

        div.alantaHost_Ad
        {
            width: 300px;
            height: 250px;
        }

        div.alantaContact_Ad
        {
            width: 200px;
            height: 200px;
            float: left;
        }

        div.alantaStartChat_Ad
        {
            width: 75px;
            height: 60px;
            float: right;
        }

        div.alantaAdMessage
        {
            width: 80px;
            float: right;
            text-align: left;
            margin-top: 10px;
        }

        div.alantaEngageAppHost_Ad
        {
            height: 60px;
            width: 70px;
        }
    </style>
</head>
<body>
    <div id="host">
        <div class="alantaHost alantaHost_PictureButton alantaHost_Ad">
            <div style="display: block;" class="alantaEngageHost alantaEngageHost_PictureButton">
                <div class="alantaHeader">
                    <div class="alantaTitle">
                        Ken Smith</div>
                </div>
                <div class="alantaContact alantaContact_Ad">
                    <img class="alantaContactImage" src="http://graph.facebook.com/739004749/picture?type=large"
                        alt="Photo"></div>
                <div class="alantaStartChat alantaStartChat_Ad" align="center">
                    <button style="display: none;" class="alantaEngageButton">
                        Talk to Ken</button></div>
                <div class="alantaAdMessage">
                    I'm looking forward to talking with you!</div>
            </div>
            <div style="top: 2px; left: 224px;" class="alantaEngageAppHost alantaEngageAppHost_Button alantaEngageAppHost_Ad">
                <object type="application/x-silverlight" data="data:application/x-silverlight," id="objMyApp"
                    height="100%" width="100%">
                    <param name="source" value="http://app.dev.alanta.com/ClientBin/SilverlightButton.xap">
                </object>
            </div>
        </div>
    </div>
</body>
</html>

Any suggestions about why the Silverlight object isn’t following its containing tag? (I should note that it behaves the same way in IE and in Chrome, so it’s not a browser bug.)

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I still don’t understand all the details about what was tripping it up, but it may have had something to do with the fact that I wasn’t setting the height of the alantaEngageHost. I changed the alantaEngageHost_Ad style to this:

    div.alantaEngageHost_PictureButton
{
    height: 250px;
}

    And after that, the <button> and its containing <div> tag were in the same place; and I could then place them appropriately like so:

    <div style="top: -226px; left: 224px;" class="alantaEngageAppHost alantaEngageAppHost_Button alantaEngageAppHost_Ad">
    <button style="position:relative">HTML Button</button>
</div>

    I’m guessing that there must be some weird CSS interaction that shows up when you’re trying to position elements inside a <div> tag that isn’t quite big enough to contain them. Just a guess, as CSS remains a dark and sorcerous art to me.

    • 0