Partly hidden layer, MP3 Player and IE - Cannot hide layer and object 1

[southbeach]

Check this URL (using FF) and pay attention to the left hand side of your screen - Notice the hidden or mostly hidden content which pops out as you hover your mouse over ...

http://www.fpgroups.com/lazen/

This is a site I am working on. FF looks great ... Now take a look at it using IE (I have IE 6).

Notice how the flash object that is intended to be hidden withing the pop-out or slide-out layer just shows on the upper left corner (or mostly there).

What causes this?

The CSS

	.hideslidemenu {
		position:fixed;
		top: 135px;
		width: 295px;
		left: -290px;
		border:1.5px solid #FFF;
		background-color:#222222;
		font:bold 12px arial;
		line-height:20px;
		z-index: 10;
		min-height: 205px;
		text-align: center;
	}
	.showslidemenu {
		position:fixed;
		top: 135px;
		width: 295px;
		left: 0px;
		border:1.5px solid #FFF;
		background-color:#222222;
		font:bold 12px arial;
		line-height:20px;
		z-index: 10;
		min-height: 205px;
		text-align: center;
	}

The JS

	function slideMenu(it,show) {
		if(show > 0) {
			document.getElementById(it).className='showslidemenu';
		} else {
			document.getElementById(it).className='hideslidemenu';
		}
	}

The HTML

<div id="slidemenubar" class="hideslidemenu" onmouseover="slideMenu('slidemenubar','1');" onmouseout="slideMenu('slidemenubar','0');">
	<div style="width: 100%; height: 24px; background-color: #006600; text-align: center;">MENU TITLE</div>
	<div id="flashPlayer">
	  mp3!
	</div>
</div>

The rest of the JS code needed to embed the flash object can be obtained here

http://www.premiumbeat.com/

Thank you all for your time and assistance!

Regards,


--
SouthBeach

http://www.fpgroups.com

The good thing about not knowing is the opportunity to learn - Yours truly, 2008.

 

[BillyRayPreachersSon]

IE 6 doesn't support position:fixed. A workaround is to use position:absolute for IE, with some expressions to set the dimensions and coordinates, something like this:

_position: absolute;
_width: 100%;
_height: expression((document.getElementsByTagName('html')[0].offsetHeight - 4) + 'px');
_left: 0px;
_top: expression(document.getElementsByTagName('html')[0].scrollTop + 'px');

This happens to be the IE workaround that I use on Code Couch for the fixed background, so you'll probably need to change the element (in my case, 'HTML') to the right parent / ancestor element for your needs.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[southbeach]

BillyRay,

Very nice ... I modified my code. I am using PHP so using an UDF to capture the client's browser and rendering the CSS properties using a PHP script, I can now conditionally set my CSS accordingly.

I have made progress as far as hiding/unhiding the layer.

The new problem I am having is that when I mouse over the MP3 player object, the onmouseout() behavior is triggered.

Since the MP3 player object is within a layer, I added the onmouseover() to this layer as well (to show) but it does not work.

My guess is that since flash object by default overlays other contents, the container layer believes the mouse has moved outside its perimeter.

This problem, however, is not an issue FF.

Thanks!


--
SouthBeach

http://www.fpgroups.com

The good thing about not knowing is the opportunity to learn - Yours truly, 2008.

 

[BillyRayPreachersSon]

You could try adding an onmouseover to the Flash object itself, although I've never tried this...

Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/