SmokyHosts Support Forums - Webhosting and Webdesigning Support!

SORRY I FORGOT SOME CODE- PLEASE LOOK AT IT OVER AGAIN

I recently downloaded firefox and I'm making my layouts FF compatible-
there's just one problem with the a:hover attribute
I DON'T wan't the font to change when it hovers over anything in "a name"

a example:
if I code somthing simple like this

<style type="text/css">
a:link, a:visited{
font-family: Vrinda;
font-size: 16px;
color: #3ab4c2;
text-decoration: none;
background: none;
font-weight: normal;
}
a:hover{
font-family: Vrinda;
font-size: 16px;
color: lightgreen;
text-decoration: none;
background: none;
font-weight: normal;
}

div {
border: 1px solid lightblue;
overflow: auto;
background: none;
width: 103px;
height: 200px;
}

div.a {
border: 2px SOLID lightblue;
background: none;
overflow: auto;
width: 250px;
height:180;
overflow:hidden;
}

div.b {
border: 1px solid lightblue;
padding: 4px;
width:243px;
height:176px;
overflow:auto;
}
</style>

<table>
<tr>
<td valign="top">

<div>
<a href="#001">
About
</a>




<a href="#002">
Staff
</a>




<a href="#003">
Rules
</a>

</div>
</td>

<td valign="top">

<div class="a">

<A NAME="000">
<div class="b">
<--**** links
</div>
</a>

<A NAME="001">
<div class="b">
about section,
[TEXT THAT I DON'T WANT CHANGING WHEN HOVERED OVER]
</div>
</a>

<A NAME="002">
<div class="b">
staff section, staff goes here
[TEXT THAT I DON'T WANT CHANGING WHEN HOVERED OVER]
</div>
</a>

<A NAME="003">
<div class="b">
rules, website rules go here,
[TEXT THAT I DON'T WANT CHANGING WHEN HOVERED OVER]
</div>
</a>


</div>
</table>
...



----
it works fine in IE and the text doesn't change
but in firefox it does change
I ONLY want the font to change when hovering over a LINK, not when hovering over the content under A NAME,

Try defining a.name:hover seperately (Might be a:name:hover)

Firstly make sure that you have:
instead of:
Secondly, I think that the font changes because Vrinda is not supported by all people and Firefox does not grab fonts from your computer. When I tested that HTML on here with Firefox it worked fine for me. :/

http://www.jmarshall.com/easy/html/testbed.html

style type: a:hover{
is for links, when you move mouse on that link, it should change a style according to your css. If you are going to use your css:

• don't forget to end "DIV" tag,
• don't use reserved names like "a"

sorry, I accidentally left some code out when typing that, please look it over

You cannot define "a name" separately, won't work

thank you flipper for pointing out the <style type="text/css">

While playing with it I've found one solution but it doesn't seem right, but it works- and that is to simply put " <a href="#"></a> " after every " <div class="b"> " tag.

finally, i have found where was a problem:
you have a CSS class with name a
You have a links with tag <a href=...>
also, you have a html element <a name...>
so, here is my work around:
create a class with a different name than a and use that other class for links. Here is attached file with full sources. By the way, you have forget a } in one place in css (i've fixed it)

Does it helped for you in any way?

thank you for pointing out that I forgot a }
-I looked at your attached file and you used "linked:link, linked:visited{" instead of "a:link, a:visited"
unfortunately this doesn't work in IE or FF =/
-since putting <a href="#"></a> " after every " <div class="b"> " is working in both FF and IE, I think it's fine now =)
thank you everyone

this will work in IE or FF if you add a class for element, this example is for links:

<a href="link_to_page.html" class="linked">link with CSS class</a>

also the same for other elements div, table, p img or whatever

I haven't tried that
but looking at it, looks like it would work =)
would make sense if it works too
thank you lixas =)

google is the best friend for this