Question

I have a div inside a field set that looks like this:

        <fieldset> 
            <legend>Device</legend> 
            <label id="select-6-container">     
                <select id="select-6" name="device_select" style="display:none"></select>       
            </label> 
        </fieldset> 

        <div id="ctrl"> 
        <button type="button" id="restart1" name="button1" onclick="window.location.reload()" value="Restart Wizard">Restart Wizard</button> 
        <button type="button" id="gotostep2" class="gotostep2" name="button1" value="Next Step">Next Step</button> 
        </div>

My select box is populated with YUI and then shown (notice that its hidden on load). My CSS for the box looks like this:

#ctrl {
margin-top: 102px;
margin-left: -200px;
position: absolute;
width:100px;
  }

But when My select box is generated, the ctrl box moves down everytime! Do I have my CSS wrong? Or is it because the select box is generated by Javascript after the page has loaded?

I should mention that when YUI renders the select box as a menu button it changes it’s markup to be a button, I didn’t think this should matter because the positioning of ctrl is what I’m trying to change.

Any advice would help!
Thanks!

Answer 1

Your div doesn’t seem to be inside the fieldset, as you had mentioned.
Try to assign a position to the div using top, right, bottom and/or left. The div‘s position will be then depending on the next positioned parent element, so have an eye on that as well.

If all of this doesn’t work — please post as well the surrounding mark–up and CSS.