Problem with div element placement

[dark_storm83]

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.

[hericles]

There are javascript libraries that can detect if flash is installed in the browser. Find and use one of those. You can then detect if flash is there and use javascript to alter the CSS style of the div depending on the result (i.e. what you need to set the margin-top to).

[teedoff]

Need more than that bit of html and css to see whats going on. Do you have a link to your live test site?

[dark_storm83]

That is all the code there is for that part of the page. The javascript and embed info is in a file called flash.php which I then use an include flash.php. The lines of code I gave makeup the entire trouble area.
I don't want to give out the live website address on a forum due to spam but I can PM the address to you.

I have tried using swfobject to display alternate content when flash is not available but the trouble is the text that moves out of place is not part of the flash file so it is not replaced but instead the alternate content displays and the original content still moves up and displays as well. I probably do not know enough about how the swfobject.js works to use it properly but I used the html editor but it did not work.

[dantinkakkar]

What your problem is that you're using relative positioning, so if one element disappears or reduces in size, the other layout is disturbed. This is a very common problem faced by web developers. What you should try to do is use absolute positioning in combination with stacking of elements using the z-index property. That should work! And it won't disturb your layout if the other elements are adjusted.

Cheers! :)

[dark_storm83]

Using absolute positioning works for the one near the top of the pages because everything is displayed the same across all browsers. When you come to the one on the bottom of the page the elements in the middle have been displayed differently so what looks perfect in one browser displays off in another browser. Any suggestions for elements further down the page?

[dantinkakkar]

Are you sure about that? You don't need to use the "top" attribute of absolute positioning to position it around. You may even use the "bottom" attribute, and that way, it will remain cross-browser compatible, too. If you're talking about cross-browser compatibility, there are many ways to achieve it, and I'm thinking of doing a snippet myself... I'll PM the link to you after writing it. For now, though, use the bottom attribute and you'll find that absolute positioning will work! :)

[weekendrockstar]

I believe that I understand what you are saying about middle elements. Such as I used absolute positioning for a header with the main graphics of the site near the top and then again for a copyright info bar at the bottom. The problem was the div where all of the page text was. If the page had a ton of text on it then the div was increased and could potentially cover up the copyright div because the content div ended up flowing beyond where I had positioned the copyright. I had to set my the content div to a specified height which I believed would be the tallest it would every have to be on any page to fit all of the text. This does leave me with extra space at the bottom of the content area when there is less text but it does appear to be more uniform across every page much like the header div does on every page because it is unaffected by the content div below it.

[dantinkakkar]

There is a way of nullifying that effect. Inside the body tags, create a <div> at the top level and place all of your content inside it. That makes the inner elements easily positionable and they stay where they are. For example, look at the forums! Try zooming in and out and the top-level <div> will shrink and grow without disturbing the layout. I hope you can understand this concept now. I'll write a snippet about it later today, because I'm a little busy at the moment.