I am having an issue that I cannot resolve. I have a small flash file on my website that is simply a circle that rolls up slightly on mouse over. I have a div element with text that appears over (or technically under) the flash element to display a text link.
My issue is I cannot get the div to appear in the correct place unless I give it a negative top margin. The issue is when someone does not have flash the text link appears in front of the page header. If I remove the top margin the text is then pushed below the flash element. I know this is not how it should work but I am at a loss.
Here is my code:
<div class="flash">
<div id="flashcontent1">
<script type="text/javascript">
var so = new SWFObject("special.swf", "3DZoomMenu", "135", "135", "9", "#0071bd");
so.addParam("wmode", "transparent");
so.write("flashcontent1");
</script>
<div id="flashTtextSpecial"><a href="#">My text is here.
</a></div>
</div>
</div>
Here is my CSS:
.flash {
float:left;
width:135px;
height:135px;
margin-left:15px;
margin-top:5px;
}
#flashTtextSpecial {
font-family:Verdana, Geneva, sans-serif;
font-size:10px;
text-align:center;
font-weight:bold;
left:0px;
position:relative;
top: -110px;
width:130px;
}
You can see the negative top value of -110px, if I remove this the text is pushed below the flash element.