Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 10 of 10
  1. #1
    Junior Member
    Join Date
    Feb 2010
    Posts
    5
    Member #
    21075
    <script type="text/javascript" src="https://www.ClickBook.net/dev/bc.nsf/cb_mode1.js?Open&title=Click here to schedule an appointment&type=button&uid=5FAA3F10231BCE36CA2576 A40074A51D"></script>

    this script from clickbook.net (a scheduling service) conflicts with the style for my navigation. it is placed within a div tag with in the body.

    I have attached the html file and the css file. It effects all browsers except IE. it seems to override the "up" color and the decoration of all links on this specific page. Any help or explanation would be greatly appreciated.


    Thank you

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    Can you give us the actual link to your site?
    It's hard to install attached files because we don't have all of your images and files.


  4. #3
    Junior Member
    Join Date
    Feb 2010
    Posts
    5
    Member #
    21075
    Of course, www.wacksalonandmassage.com/sched.html , however at this time i have not uploaded the updated sched.html page as i have not received an ok to upload it with the conflict. So the conflict won't be present on the site but at least you can see what it is generally supposed to look like. Thank you!

  5. #4
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    Copy "sched.html", rename it "sched2.html" and put the javascript in that one.
    That way, we can see it, but it won't affect the original "sched.html" file.

    We can display "sched.html" and then insert the "2" in there to see your other page.

    I'm curious to see what their Javascripting looks like when the page renders.
    It might be a case where you need to customize something in the clickbook
    account? Do they offer any way to customize or build your own buttons?


    .


  6. #5
    Junior Member
    Join Date
    Feb 2010
    Posts
    5
    Member #
    21075
    Ok, I have uploaded the sched2.html.
    There is another way you can use a created button but it uses the same script as far as i can tell.

    Thank you so much for your prompt attention and replies! It is greatly appreciated.

    Joey

  7. #6
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    Here is what you'll have to do ...

    In your "wack.css" file, change this:

    a {
    text-decoration: none;
    color: #900
    }

    a:hover {
    color: #592D00;
    }


    to this:

    a.nav:link,a.nav:active,a.nav:visited {
    background-color: transparent;
    font-family: "Century Gothic", "Century Schoolbook", Century, sans-serif, serif;
    color:#900;
    font-weight:bold;
    font-size:11px;
    text-decoration: none;
    }
    a.nav:hover {
    background-color: transparent;
    font-family: "Century Gothic", "Century Schoolbook", Century, sans-serif, serif;
    color: #592D00;
    font-weight:bold;
    font-size:11px;
    text-decoration: none;
    }



    Then ....

    For ALL of your links, you have to specify the "nav" class ....

    <li><a href="hair.html" class="nav">hair</a></li>


    The result is that nothing can over-rule your class, so your links will stay the way you want.



    .


  8. #7
    Junior Member
    Join Date
    Feb 2010
    Posts
    5
    Member #
    21075
    So initially my assumption was that the script had it's own style which was overriding my css. Is this correct? If so why was the page css being overridden in all browsers except IE? Is this standard with embedded scripts? (I suppose it all depends on how the scripts are written) I realize that IE has its own way of doing things that is not always standard, just curious if you know. Thank you so much for your help. I will try this immediately! Again Thank you!
    Joey

  9. #8
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    Joey,
    I'm actually sort of guessing.
    I think it's because you created a "generic" CSS rule for all "a" tags.
    It gets over-ruled by the other script.


  10. #9
    Junior Member
    Join Date
    Feb 2010
    Posts
    5
    Member #
    21075
    ok, so what i ended up doing was specifying an "a" and an "a:hover" rule for each Div ID that was affected. That way I did not have to add a class to every link I had on the page. Its funny that on the last site i created I made my style sheet this way (with the "a" and "a:hover" tags specifyed for each ID that had links in it. Then I realized that I could make a generic rule that would style all links everywhere and I thought "man this will be easy, I just cut out a whole bunch of code from my style sheet" . Alas, I must go back to styling each div seperately if i insert the book now script. I am still curious as to why their script is overriding the general rule for the links. Thank you again for your help! The conflict is cured and I must say that I am impressed that I got help so quickly. I tried out another forum and still have not received a reply so, Again, Thanks a Bunch!

  11. #10
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    There's a thing called "inline CSS".

    CSS is defined in the order in which it loads.
    So, your CSS loads at the top of your script.

    If you put some CSS inside a tag further in your page, that "inline CSS"
    will over-ride the CSS for that div.

    Example, say you have this in your main CSS file:

    #content{
    font-family:arial;
    font-size:12pt;
    }

    Then, on a different page that uses the same CSS file, you might want a smaller font:

    <div id="content" style="font-size:10pt;"> stuff stuff stuff </div>

    That inline style will take precedence for that div (at that moment).

    I think the same thing is happening with the code you insert, but for some reason,
    and I'm not sure, maybe the way it loads, that code is overwriting the CSS for everything.
    You are correct that if you specifically define the styling for various divs, it will leave
    those untouched.

    Again, just a theory ... I'm not really sure about when the inserted Javascript actually
    gets loaded and rendered. It looks like the loading and rendering might be different
    between IE and FF .... thus the differences you mentioned in post #1.

    That's what this forum is all about ... exchanging ideas and learning from others.



Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 10:27 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com