Win a copy of Testing JavaScript Applications this week in the HTML Pages with CSS and JavaScript forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Bear Bibeault
  • Ron McLeod
  • Jeanne Boyarsky
  • Paul Clapham
Sheriffs:
  • Tim Cooke
  • Liutauras Vilda
  • Junilu Lacar
Saloon Keepers:
  • Tim Moores
  • Stephan van Hulst
  • Tim Holloway
  • fred rosenberger
  • salvin francis
Bartenders:
  • Piet Souris
  • Frits Walraven
  • Carey Brown

Dynamic close button only shows in Firefox

 
Greenhorn
Posts: 4
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
HI, I am working on a website and have managed to create a page that will play a youtube movie depending on which area of an image is clicked on. Everything seems to work fine, the movies open and play fine but the only problem is that the close button doesn't show in anything other than Firefox. I have tried adding an image as the close button's background but nope, makes no difference, it just isn't there. I've tried both internet explorer and chrome

I have spent several hours on this and it's driving me nuts, any help would be very gratefully recieved

here is the javascript

//Create dynamic Close Button Div
var closebutton = document.createElement('div');
closebutton.style.visibility = "visible";
closebutton.innerHTML = "<span onclick=\"closeYouTube('" + id +"')\" class=\"close_button\">X</span>";
//Add Close Button Div to YouTube Popup Div container
divobj.appendChild(closebutton);

here is the css

.close_button {
font-family: Verdana, Geneva, sans-serif;
font-size: small; font-weight: bold;
color: #666; text-decoration: none;
display: block; float: right;
background-color: #FFF;
z-index: 5500; cursor: default;
border: 2px solid #000;
margin-bottom: -2px;
padding: 0px 3px 0px 3px;
position:absolute;
top:1px;
right:2px;
background-image:url(images/coss.jpg);
}
 
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
This seems to work fine for me. What is different? Can you give a better example? Errors?



 
Tracey Couchman
Greenhorn
Posts: 4
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi, thanks for your response.

I've managed to get it working, sort of...

Using the code I had the close button appears fine in Firefox but with any other browser it wasn't there. Eventually I moved the close button to outside the main window so that instead of sitting in the top righthand corner it was sitting on top of the top righthand corner, then it could be seen in all the browsers I have tried it in.

I don't know if it is a CSS thing although the only CSS attribute I thought could affect it like that would be z-index and I've made it a silly z-index number that would definately be on top
    Bookmark Topic Watch Topic
  • New Topic