IE not displaying background behind embedded player

  • (2 Pages)
  • +
  • 1
  • 2

15 Replies - 6948 Views - Last Post: 04 November 2011 - 09:43 AM

#1 TechnoBear   User is online

  • Lady A
  • member icon

Reputation: 257
  • View blog
  • Posts: 1,020
  • Joined: 02-November 11

IE not displaying background behind embedded player

Posted 02 November 2011 - 09:35 AM

Trying to design a web page for a radio station, have most of it done and ready to go live. Except that IE (testing on 8) isn't displaying some pages properly. On the main pages it displays the background perfectly, however I have a window with an embedded player and it seems to be trying to display the background image as just an image (I'm using the same code). Everything works perfectly in FF, Chrome and Safari.

Code I am using for main page is:

<div id="background">
    <img src="images/background.jpg" class="stretch" alt="" />
</div>


Code I am using on popup page is:

<div id="background">
    <img src="../images/streamback.jpg" class="stretch" alt="" />
</div>


(popup window is in subdirectory)

the CSS related to the background image is:

#background {
width:100%; 
height:100%; 
position:fixed; 
left:0px; 
top:0px; 
z-index:-1;
}
.stretch {
width:100%;
height:100%;
}


If you need a live example the test pages are currently up at:
http://www.wazufm.org/pagetest

Please help with this it is driving me up the wall.

Is This A Good Question/Topic? 0
  • +

Replies To: IE not displaying background behind embedded player

#2 h4nnib4l   User is offline

  • The Noid
  • member icon

Reputation: 1330
  • View blog
  • Posts: 1,888
  • Joined: 24-August 11

Re: IE not displaying background behind embedded player

Posted 02 November 2011 - 09:56 AM

Why not set the background image through CSS? You can set it on your div, or just set it to the body and it will cover the whole page, provided you're not forcing the body from the edges with margins.

body {
  background-image: url(../images/streamback.jpg);
}



-or, to use with the div,

  <div id="background" style="background-image:url(../images/streamback.jpg);">

  </div>


Was This Post Helpful? 0
  • +
  • -

#3 TechnoBear   User is online

  • Lady A
  • member icon

Reputation: 257
  • View blog
  • Posts: 1,020
  • Joined: 02-November 11

Re: IE not displaying background behind embedded player

Posted 02 November 2011 - 10:31 AM

that didn't work. The page in question is www.wazufm.org/pagetest/stream/index.html the background image is being pushed down by the other content on the page.
Was This Post Helpful? 0
  • +
  • -

#4 h4nnib4l   User is offline

  • The Noid
  • member icon

Reputation: 1330
  • View blog
  • Posts: 1,888
  • Joined: 24-August 11

Re: IE not displaying background behind embedded player

Posted 02 November 2011 - 03:16 PM

yeah, i can see the div getting pushed down.

did you try setting the background-image on body? that's how i always do my page backgrounds, and i've never had problems with that.
Was This Post Helpful? 0
  • +
  • -

#5 h4nnib4l   User is offline

  • The Noid
  • member icon

Reputation: 1330
  • View blog
  • Posts: 1,888
  • Joined: 24-August 11

Re: IE not displaying background behind embedded player

Posted 02 November 2011 - 04:31 PM

Okay, disregard my last. I recreated your page as best I could and tested it, and it's working for me.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>WAZU | Live Stream</title>
    <link rel="stylesheet" type="text/css" href="../CSS.css" />
	<script type="text/javascript" src="../openwindow.js"></script>
    <style type="text/css">
        .background {
	        position: absolute;
	        top: 0;
	        left: 0;
	        width: 100%;
	        height: 100%;
	        z-index: 0;
        }
        .mediaPlayer {
            position: relative;
            z-index: 1;
        }
    </style>
</head>
<body class="player">
    <div class="mediaPlayer">

        <embed type="application/x-mplayer2" 
            pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" 
            src="icyx://208.68.210.97:8206" 
            align="middle" 
            width="500" 
            height="45" 
            defaultframe="rightFrame" 
            id="mediaPlayer2" />
        <br />
        <p id="showlink2"><a href="setup_aacPlus_plugin_1_1_51.php" onclick="downwindow(); return false;">If audio does not play download <u>required</u> codec here</a></p>

    </div>
    <div>
        <img id="background" class="background" src="wave.jpg" alt="" title="" />
    </div>
</body>
</html>



I basically just made a second div for everything else, and set their z-index's such that the background div is lower than the media player and codec install link. The background's position is set to absolute, and the other div has to be relative to display over the background. That wasn't necessary in Firefox, but we all know how IE is...

This should work copy and paste for you, I think everything is the same between the two. Obviously, you can move those styles into your stylesheet if you want, i just put them in the page so I wasn't posting a separate stylesheet.

Let me know if it works for you!
Was This Post Helpful? 1
  • +
  • -

#6 TechnoBear   User is online

  • Lady A
  • member icon

Reputation: 257
  • View blog
  • Posts: 1,020
  • Joined: 02-November 11

Re: IE not displaying background behind embedded player

Posted 03 November 2011 - 09:19 AM

Nope, IE is still pushing the background image down. It's not doing it on any other page and the background div is the same on every single page on the site.
Was This Post Helpful? 0
  • +
  • -

#7 h4nnib4l   User is offline

  • The Noid
  • member icon

Reputation: 1330
  • View blog
  • Posts: 1,888
  • Joined: 24-August 11

Re: IE not displaying background behind embedded player

Posted 03 November 2011 - 11:23 AM

I checked your source, and it looks like you didn't put the image back in the background div? I had to switch it back to:
<div>
  <img id="background" class="background" src="../images/streamback.jpg" alt="" title="" />
</div>



I'm using your stylesheet (stole it with firefox); the only thing I'm changing is the background image because I don't have yours, but it's working with my image. IE Developer tools won't let me test moving the image from a style in the div to and actual <img>, but if that doesn't work, I'm stumped.
Was This Post Helpful? 1
  • +
  • -

#8 TechnoBear   User is online

  • Lady A
  • member icon

Reputation: 257
  • View blog
  • Posts: 1,020
  • Joined: 02-November 11

Re: IE not displaying background behind embedded player

Posted 03 November 2011 - 12:25 PM

It's still pushing the background image down. It's as if it is refusing to see the background image as a background and is just displaying it as a normal image
Was This Post Helpful? 0
  • +
  • -

#9 h4nnib4l   User is offline

  • The Noid
  • member icon

Reputation: 1330
  • View blog
  • Posts: 1,888
  • Joined: 24-August 11

Re: IE not displaying background behind embedded player

Posted 03 November 2011 - 12:56 PM

Okay, so I'm assuming that you're not testing this at:

www.wazufm.org/pagetest/stream/index.html

right now. Will you post your latest code at that test url so I can look at it? I can't reproduce the problem anymore, so I need to see exactly what you're working with.
Was This Post Helpful? 0
  • +
  • -

#10 TechnoBear   User is online

  • Lady A
  • member icon

Reputation: 257
  • View blog
  • Posts: 1,020
  • Joined: 02-November 11

Re: IE not displaying background behind embedded player

Posted 03 November 2011 - 03:01 PM

I'm still testing it there. You still have my CSS I would figure

Current Page code:

<html>
<head>
<title>WAZU | Live Stream</title>

	<link rel="stylesheet" type="text/css" href="../CSS.css" />
	<script type="text/javascript" src="../openwindow.js"></script>
</head>
<body class="player">
<div class=mediaplayer>
<embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" src="icyx://208.68.210.97:8206"  align="middle" width="500" height="45" defaultframe="rightFrame" id="MediaPlayer2" />
<br />
<p id="showlink2"><a href="setup_aacPlus_plugin_1_1_51.php" onclick="downwindow(); return false;">If audio does not play download <u>required</u> codec here</a></p>
</div>
<div>
<img id="background" class="stretch" src="../images/streamback.jpg" alt="" title="" />
</div>
</body>
</html>

Was This Post Helpful? 0
  • +
  • -

#11 h4nnib4l   User is offline

  • The Noid
  • member icon

Reputation: 1330
  • View blog
  • Posts: 1,888
  • Joined: 24-August 11

Re: IE not displaying background behind embedded player

Posted 03 November 2011 - 03:25 PM

In your stylesheet, in #background, change position:fixed to position:absolute.
Was This Post Helpful? 0
  • +
  • -

#12 TechnoBear   User is online

  • Lady A
  • member icon

Reputation: 257
  • View blog
  • Posts: 1,020
  • Joined: 02-November 11

Re: IE not displaying background behind embedded player

Posted 03 November 2011 - 03:37 PM

That seems to of fixed it, I cant do the double check until the morning when i can unlock the other computer (having other people in this office does my head in)
Was This Post Helpful? 0
  • +
  • -

#13 h4nnib4l   User is offline

  • The Noid
  • member icon

Reputation: 1330
  • View blog
  • Posts: 1,888
  • Joined: 24-August 11

Re: IE not displaying background behind embedded player

Posted 03 November 2011 - 03:39 PM

Cool, let me know then. I had position:absolute in that first large code snippet I posted, i guess it got lost in the retype... ;)

This post has been edited by h4nnib4l: 03 November 2011 - 03:40 PM

Was This Post Helpful? 0
  • +
  • -

#14 TechnoBear   User is online

  • Lady A
  • member icon

Reputation: 257
  • View blog
  • Posts: 1,020
  • Joined: 02-November 11

Re: IE not displaying background behind embedded player

Posted 03 November 2011 - 03:57 PM

yup, i completely overlooked it, sorry. Thank you so much for helping i have a searing hatred in my heart for IE
Was This Post Helpful? 0
  • +
  • -

#15 h4nnib4l   User is offline

  • The Noid
  • member icon

Reputation: 1330
  • View blog
  • Posts: 1,888
  • Joined: 24-August 11

Re: IE not displaying background behind embedded player

Posted 03 November 2011 - 04:00 PM

NP, that's what another set of eyes is for. If it works upon double-check tomorrow, you should probably mark that code as helpful, maybe... :whistling:
Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2