button works badly in google chrome and safari

[brinyc]

Hi,

I´m not a html pro!!!....I´m doing my band website and I have a problem with the buttons that open a window to download the songs

Anyways I have black buttons (saying ´get it! `) that open a window to download the album

They work okay in internet explorer and firefox but they don´t work in google chrome or safari (the window opens behind the other graphics and the buttons aren´t even black)

http://www.audioslot.net/store.html


stranger still is that sometimes they work and then I refresh the page and they don´t!!!!!

Here is the css code below but I think it is okay(I tried changing z values already)....the guys (topspin) who run the download stuff haven´t been able to help

Anyways I´d appreciate any advice!!!





h1 {
font-size: 1.0em;
font-family: "dejavu serif", verdana, sans-serif;
color: #663300;
background-color: #ffffff;

}

h2 {
font-size: 1.0em;
font-family: "dejavu serif", verdana, sans-serif;
background-color: #ffffff;
margin: 1em;
padding: 3em;
color: #663300;

}
p {
font-size: 0.8em;
font-family: dejavu serif, verdana, sans-serif;
letter-spacing: 0.5em;
word-spacing: 2em;
line-height: 1.5;
text-align: center;
background-color: #ffffff;

}




#header { position: absolute; top: 2px; left: 30px;
z-index: 3;}


#menu { position: absolute; top: 5px; left: 10px; right: 10px; padding: 30px 0px 0px 0px;
width: 98%; height:60px; z-index: 2;font-size: 1.0em; font-family: "dejavu serif", verdana, sans-serif; background-color: #ffffff; color: #663300}



#content { position: absolute; top: 60px; width: 100%;
background-color: #ffffff; z-index: 2;
color: #000000}

#copy { position: absolute; right: 20px; bottom: 5px; }

#contact {
position:absolute;
top: 200px;
font-size: 1.0em;
left: 260px;
width:320px;
font-family: "dejavu serif", verdana, sans-serif;
z-index: 1;
}

#flash {
position:absolute;
top: 140px;
left: 160px;
z-index: 1;
}

#flash2 {
position:absolute;
top: 140px;
left: 760px;
z-index: 1;
}

#flashPlayer {
position:absolute;
top: 140px;
left: 520px;
z-index: 1;
}

#flashcontent {
position:absolute;
top: 110px;
left: 180px;
z-index: 1;
}

#album {
position:absolute;
top: 140px;
left: 220px;
z-index: 1;
}

#album1 {
position:absolute;
top: 140px;
left: 180px;
z-index: 1;
}

#giraffic {
position:absolute;
top: 140px;
left: 540px;
color: #ffffff;
z-index: 1;

}

#artwork {
position:absolute;
top: 550px;
left: 540px;
width:290px;
color: #ffffff;
z-index: 1;
}

#bottomleft {
position:absolute;
top: 480px;
left: 220px;
width:300px;
z-index: 1;
}

#widget {
position:absolute;
width: 100%;
top:160px;
text-align: center;
z-index: 1;
}

#index {
position:absolute;
top: 60px;
left: 400px;
z-index: 1;
}

#store {
position:absolute;
top: 160px;
left: 300px;
z-index: 1;
}

#lyrics {
position:absolute;
top: 220px;
left: 580px;
z-index: 1;
}

#multipicture {
position:absolute;
top: 130px;
left: 160px;
z-index: 1;
}

#scrollblog {
position:absolute;
top: 126px;
left: 770px;
z-index: 3;
}

#outnow {
position:absolute;
width: 100%;
top: 100px;
text-align: center;

}

IMG.displayed {
display: block;
margin-left: auto;
margin-right: auto }

a.songs:link { color: #ffffff;text-decoration: none
}

a.linking:link { color: #cc3300;text-decoration: none
}
a.linking:visited { color: #cc3300;text-decoration: none
}
a.linking:hover {
color: #cc3300;
text-decoration: underline; background: #F9EDED
}
a.linking:active { color: #cc3300;text-decoration: none
}

[Frank62]

Works perfect in Google 12 and Safari 5 here. Which versions did you test?

[brinyc]

thanks for the reply...I´m looking at it on google 12 and the buttons are blue instead of black and the window opens behind!!

If you navigate away from the webpage and then return you may see that it has changed....I don´t know why but that´s what I did and then it stayed wrong....I have a friend and a cousin seeing the same as me on different computers....so I´m not halucinating...ha ha

[Frank62]

I surfed from your site to CNN and this site and back to your site using the back button, but it still functions OK here. Also, your CSS seems in order - no blue(ish) colour anywhere to be found, so that would baffle me.

Regarding the opening behind graphics, try the following: in widget.css:

iframe#ts_pflow_frame {
    margin: 0; /* as is */
    padding: 0; /* as is */
    background: black !important; /* javascript output says: none! */
    z-index: 999; /* did not see a z-index declaration here */
    /* from here on: if the background and z-index are no cure */
    position: absolute;  
    top: 50px;
    left: 50%;
    margin-left: -240px; /* half the iframe's width */
    width: 480px; /* copied from the javascript output */
    height: 570px; /* same */
}

Let me know how this works out.

[brinyc]

Thanks again for the reply...when I said the button is blue...I meant the text is showing up in blue... like a normal link (with no black background)

your code has improved the situation a lot!!! cheers

I used the top half of the code only!!

(the bottom half with the positioning didn´t work well in explorer or firefox) it opened 1 and a half windows....

so now everything is still ok in fiefox and explorer

In google chrome (the x ´close window´ button is missing in the pop up) and the buttons still appear as blue links , and the window pops up to the side but at least it´s possible to use it although it doesn´t look professional

I wonder if you are seeing the same as me?!

[Frank62]

I wonder if you are seeing the same as me?!

Nope, things are still OK here, also in 1024x768. You can test different versions of Chrome and Safari through http://spoon.net/browsers/. Just make an account and the different versions open on your computer without being installed. Which browser versions are significantly used nowadays can be seen on http://gs.statcounter.com/. Be sure to select Browser version, your country and 'Bar'. (The erratic shape of the Chrome lines in 'Line' are caused by growing pains in Chrome browser sniffing.)

[kbelly]

to get good performance you have to use the <html></html> tag and <div></div> tags

[brinyc]

thanks for the links to spoon!!

the website works on firefox and opera but again on versions of google chrome it didn´t work....(blue text links and window opens with mistakes)


I put up a website with a screenshot of what I´m seeing

http://audioslot.net/screenshot.html

note that there is no close window and the background graphic is almost coming through the window

BTW...Mr Kelly...I close my html, div tags... cheers anyway

[Frank62]

on versions of google chrome it didn´t work

Which versions? Cos' we might be breaking our heads over something that is a browser version fault. Especially the earlier versions of Chrome had quite a number of bugs. That's why they are releasing new versions is such a high tempo.

[brinyc]

It doesn´t work on google 12 (the latest) and it didn´t work on 2 older versions I tried (9 and another)...it doesn´t work on safari 5 (my apple owning cousin tells me)

The most important are the latest versions

if the browser is to blame fine....I don´t understand why we are seeing different things though....how could there be a difference between europe and america (if you are in the States) ?

Well if your opinion is a browser problem with chrome then maybe there is nothing to do

[Frank62]

@brinyc,

I'm afraid I don't have time to dive in it any further. It does baffle me, because on two machines here things work out well in Chrome 12 and Saf 5, and you don't have problems in FF either. The only thing, regarding the knobs, I could suggest is to remove the ../ from the url that calls in the knob bg image, in widget.css.

Let me know.

[brinyc]

Thanks for your help!!!

much appreciated