embedded btn script conflicts with css of links

[gravital]

<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

[mlseim]

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.

[gravital]

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!

[mlseim]

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?


.

[gravital]

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

[mlseim]

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.



.

[gravital]

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

[mlseim]

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.

[gravital]

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!

[mlseim]

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.