www.webdeveloper.com
Results 1 to 12 of 12

Thread: button works badly in google chrome and safari

  1. #1
    Join Date
    Jul 2011
    Posts
    6

    button works badly in google chrome and safari

    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
    }

  2. #2
    Join Date
    Feb 2008
    Location
    Europe
    Posts
    266
    Works perfect in Google 12 and Safari 5 here. Which versions did you test?
    R.,
    Frank

    Please report back how suggestions worked out.

  3. #3
    Join Date
    Jul 2011
    Posts
    6
    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

  4. #4
    Join Date
    Feb 2008
    Location
    Europe
    Posts
    266
    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:
    HTML Code:
    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.
    R.,
    Frank

    Please report back how suggestions worked out.

  5. #5
    Join Date
    Jul 2011
    Posts
    6
    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?!

  6. #6
    Join Date
    Feb 2008
    Location
    Europe
    Posts
    266
    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.)
    R.,
    Frank

    Please report back how suggestions worked out.

  7. #7
    Join Date
    Jul 2011
    Posts
    3
    to get good performance you have to use the <html></html> tag and <div></div> tags

  8. #8
    Join Date
    Jul 2011
    Posts
    6
    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

  9. #9
    Join Date
    Feb 2008
    Location
    Europe
    Posts
    266
    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.
    R.,
    Frank

    Please report back how suggestions worked out.

  10. #10
    Join Date
    Jul 2011
    Posts
    6
    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

  11. #11
    Join Date
    Feb 2008
    Location
    Europe
    Posts
    266
    @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.
    R.,
    Frank

    Please report back how suggestions worked out.

  12. #12
    Join Date
    Jul 2011
    Posts
    6
    Thanks for your help!!!

    much appreciated

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles