In-line CSS

They have: 330 posts

Joined: Apr 2000

Is it possible to make an a:hover tag in an in-line CSS tag? If yes, how? If no, how would I make the CSS tags work with all browsers (IE, NN)? Thanks.

Mark Hensler's picture

He has: 4,048 posts

Joined: Aug 2000

you mean like:
text

To my knowledge, the only way to do this is to use Javascript to change the style using the ID.

They have: 330 posts

Joined: Apr 2000

Not really. In CSS you can set a class in the head or external style sheet and tell that class to change the background-color or text-decoration when the mouse hovers over it. I just don't know if it's possible to do that with an in-line string like...

< a href= "" style="..." >

instead of...

< head >
< style >
a {...}
a:hover {...}
< /style >
< /head >
...

Thanks for any help.

They have: 30 posts

Joined: Oct 2000

artsapimp,

I don't believe it is possible to use a Pseudo-Class (a:hover:) inline and a:hover is also not supported by NS 4.xx.

Sorry Sad

They have: 330 posts

Joined: Apr 2000

I know it's not supported by NN. NN also doesn't use classes within CSS so my text which is verdana, arial in IE is showing up Times New Roman in NN. If I use an inline stylesheet it will make the font verdana, arial in both but the a:hover doesn't work which is a major factor in the look of the navigation. Does anyone know how to make the font the same in both and also make the a:hover work in IE?

They have: 30 posts

Joined: Oct 2000

artsapimp,

While I agree that NS not supporting a:hover is annoying there are several workarounds one is of course images another is here http://webreference.com/js/column4/workaround.html . As for NS not supporting classes that is not correct NS supports both the class & ID statements. So if you are having trouble with your font family post your code or a URL and someone will take a look for you.

Later

CaIslander
From The Land Of SunShine, Surf & Code
WebXpertz Community Forums for Webmasters & Developers

Suzanne's picture

She has: 5,507 posts

Joined: Feb 2000

You have some wickedly bad information if you think that Netscape 4.x doesn't support classes and ID.

If you aren't comfortable posting a url, then perhaps you can validate your CSS at the w3c ( http://jigsaw.w3.org/css-validator/ ) or invest in a CSS program like Top Style ( bradbury.com ) or StyleMaster ( http://www.westciv.com.au/style_master/ ) that has validation and help files in it.

Additionally, the master grid at http://www.webreview.com/style/css1/charts/mastergrid.shtml should help you debunk whoever is telling you the wrong information -- it's a comprehensive look at what is supported, what isn't supported, what is just buggy, et cetera, with notes, for all the available public browsers (Netscape, IE, Opera, including Mac versions where available).

Smiling Suzanne

They have: 330 posts

Joined: Apr 2000

The site I'm referring to is http://www.absoluteweb.com.

The style.css page looks like this...

<style>
<!--
body {background-color: #000066; font-family: arial, verdana; font-size: 16px;}
td {font-size: 12px;}
.MenuTable {background-color: #ddddcc;}
.TopTable {background-color: #660000;}
.Table {background-color: #ddddcc;}
.SideTable {background-color: #ddddcc;}
.LeftTable {background-color: #000066;}
.RightTable {background-color: #000066;}
.Back {background-color: #ddddcc;}
.Tan {background-color: #ddddcc; font-size: 2px;}
.RightHeader {color: #ddddcc; font-size: 14px; font-weight: bold;}
.InlineHeader {color: #000066; font-weight: bold;}
.MedFont {font-size: 12px;}
.SmallFont {font-size: 10px;}
.Copyright {font-size: 10px; color: #dddddd;}
a {color: #660000;}
a:Hover {color: #000066;}
a.Menu {background-color: #ddddcc; color: #000066; text-decoration: none; font-size: 12px;}
a.Menu:Hover {background-color: #000066; color: #ddddcc;}
a.Small {font-size: 10px;}
.SmallLine {font-size: 2px;}
.BigLine {font-size: 4px; background-color: #660000;}
.form {font-family: arial, verdana; font-size: 14px;}
.LoginForm {font-family: arial, verdana; background-color: #ccccbb; color: #000066; border: #660000 2px solid; font-size: 12px;}
-->
</style>
'

The text on a Netscape browser is Times New Roman... why?

Suzanne's picture

She has: 5,507 posts

Joined: Feb 2000

type="text/css"> first of all. Without it, Netscape and Opera will not see it as it should be.

Secondly, you haven't bothered to validate it (though I gave you the link in the address above) or you would know that you are missing background-color declarations for all bits with color declarations and v.v.

Thirdly:

- anything below 9px or 9pt is illegible, so all the 2px and 4px font-sizes are effectively useless.
- no generic font family (serif, sans-serif, decorative, et cetera)
- you don't have the font-family declared for most of the classes (Netscape 4.x will ignore body font after some elements, which you would know if you looked at the MasterGrid I also referred you to)

If you had taken the time to look through the resources I pointed you to, you would have found most of the errors yourself.

For HTML validation, you can also use the w3c HTML validator (and XML) or you can get the free version of htmlvalidator.com (lite), which would have pointed out the error in the style tag.

I sincerely hope this helps, and I also hope that you take the time to read through the suggestions in responses -- it will help you learn how to troubleshoot this sort of problem yourself, which means you'll have the solution faster.

Suzanne

They have: 330 posts

Joined: Apr 2000

If you took the time to view the page and the source you would see the css is an external stylesheet which is linked with...

<link rel="Stylesheet" type="text/css" href="style.css">
'
The type is declared...

The font size of 2 and 4 both work with netscape and opera, which is why I didn't ask about that.

Declaring the font style in each class is something I didn't do, which is probably the answer I was asking for to begin with.

They have: 81 posts

Joined: Feb 2000

Well, since you provided the text of the external style sheet we really didn't need to look at the page code to see how you called it, but since it's a external sheet the style and comment tags aren't needed at all. Smiling

Netscape doesn't inherit styles from the body into tables just like it doesn't inherit font tags etc. from the body into a table. You could probably solve 90% of your problem by adding the font-family to your td style, especially since you aren't using any other container tags in your table cells.

hth

Bimjo
Just my opinion, worth $0.00001 anywhere on earth.
======================
Bimjo's Corner

They have: 330 posts

Joined: Apr 2000

Thank you very much for your help. I will make those changes and I'm sure they will work.

I don't really understand what you mean by "since it's a external sheet the style and comment tags aren't needed at all". Please help me understand what you're meaning by that.

I am using class='' instead of style='' if that's what you mean. I don't know where I'm using comment tags though.

They have: 30 posts

Joined: Oct 2000

artsapimp,

What he means is (I Think) that when you use an external style sheet, that in the .css file comment tags are not required because if the browser doesn't read CSS it will disregard the style sheet link totally . And the comment tags only use is to hide the code from old browsers but if old browser ignore the link it is not necessary to hide the code.

Hope that Helped

CaIslander
From The Land Of SunShine, Surf & Code
WebXpertz Community Forums for Webmasters & Developers

They have: 330 posts

Joined: Apr 2000

I understand now, thanks.

Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.