Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Westi on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Relative and absolute positioning in IE and firefox

Status
Not open for further replies.
countdrak

countdrak

Programmer
Jun 20, 2003
358
US
Code: 
<div [red]id="Layer1" style="position:absolute;[/red] width:792px; height:46px; z-index:2; left: 50%; top: 14px; background-color:#FFFFFF; border-left:#000000 1px solid; border-right:#000000 1px solid; border-top:#000000 1px solid;margin-left:-346px;">
	<a href="/index.cfm"><img src="/images/Logo.gif" width="237" height="46" border="0"></a>
</div>

<div [red]id="Layer2" style="position:relative;[/red] width:554px; height:200px; z-index:10; [red]top:50%;[/red] left: 42%;"> 
  <object codebase="[URL unfurl="true"]http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0"[/URL] width="554" height="200" align="left">
		  <param name="allowScriptAccess" value="sameDomain" />
		  <param name="movie" value="[URL unfurl="true"]http://127.0.0.1/test.swf">[/URL]
		  <param name="wmode" value="transparent">
		  <param name="quality" value="high">
		  <param name="bgcolor" value=#"FFFFFF">
		  <embed src="[URL unfurl="true"]http://127.0.0.1/test.swf"[/URL] wmode="transparent"  quality="high" width="554" height="200" name="menu" align="left" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="[URL unfurl="true"]http://www.macromedia.com/go/getflashplayer"></embed>[/URL]
  </object> 
</div>

A couple of questions. I figured how to centre my div blocks, and this works fine. But my question is ,

When I make the first div tag absolute and the second one with the flash movie relative, isnt the second div's position RELATIVE to the first div ? What I mean is shouldnt Layer2 position be relative to Layer1, and Layer2 should move when LAyer 1 does?

I am asking you this is because when I put a top:50% in Layer2 (trying to centre my flash movie in Layer1) IE and Firefox behave diffirently, FireFox works ok cause atleast it doesnt move my movie in the centre of the page(top:50%), but IE on the other hand moves the movie somewhere outside Layer1 in the middle of the page. Do you know how I can align the movie right in the centre for both firefox and IE?
 
Sort by date Sort by votes
Is this what you're looking for?

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]

<html>
<head>
<title>new document</title>

<script language="javascript" type="text/javascript">
<!--

-->
</script>

<style type="text/css">

#Layer1 {
    width:792px; 
	// height:46px; 
	margin: 0 auto;
	margin-top: 14px;
	background-color: #fff;
	border: 1px solid black;
	border-bottom: none;
}

#Layer2 {
	width:554px; 
	height:200px;
	margin: 0 auto;
}

</style>

</head>

<body>

<div id="Layer1"p>
    <a href="/index.cfm"><img src="/images/Logo.gif" width="237" height="46" border="0"></a>
	
	<div id="Layer2">
		<object codebase="[URL unfurl="true"]http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0"[/URL] width="554" height="200" align="left">
          <param name="allowScriptAccess" value="sameDomain" />
          <param name="movie" value="[URL unfurl="true"]http://127.0.0.1/test.swf">[/URL]
          <param name="wmode" value="transparent">
          <param name="quality" value="high">
          <param name="bgcolor" value=#"FFFFFF">
          <embed src="[URL unfurl="true"]http://127.0.0.1/test.swf"[/URL] wmode="transparent"  quality="high" width="554" height="200" name="menu" align="left" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="[URL unfurl="true"]http://www.macromedia.com/go/getflashplayer"></embed>[/URL]
		</object>
	</div>
</div>

</body>

</html>

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!
 
Upvote 0 Downvote
Not exactly...But lets seeif I can draw this :)

Code: 
    --------------------------------------------
    | Layer1    |Layer2(flash file)             |
    |            -------------------------------|
    |      HEADER For a page                    |
    |                                           |
     --------------------------------------------
Layer 2 is a flash movie which has some buttons, like a drop down menu. Now if I change the top:50% in Layer 2 to something else the buttons move out of layer 1 and I dont want that happning, I want the movie to be right where it is(center of the header. valign = "center" if i was using a table) in all browsers. Hopefully now I am more clear. Thanks :)
 
Upvote 0 Downvote
Sorry I forgot to add, The flash file is 238px left of the starting of Layer 1.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
821
spamjim
spamjim
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
226
lmcate
lmcate
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
2K
Chris Miller
Chris Miller
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
698
PeDa
PeDa
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
1K
Mike Lewis
Mike Lewis

Part and Inventory Search

Sponsor

Back
Top