9 replies [Last post]
mqcarpenter
Offline
Regular
Last seen: 17 years 8 weeks ago
Joined: 2004-07-23
Posts: 21
Points: 0

I know inline CSS is not the best, but in this situation I have no choice. I am trying to do something rather complicated for inline, and am not having success like I would externally.

I need a cell to have a background gif that changes on rollover. Furthermore, I need the CSS to also cover the link properties. Here is what I have so far. Can you help with syntax? Thank you

<td width="125" height="30" style="font: 11pt, Arial; text-align:center; display: table-cell; vertical-align: middle; a:link {color: #006; background-image: url(http://IMAGE.gif)} a:hover {color: #036; background-image: url(http://IMAGE2.gif)} "><a href="#">Home</a></td>

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 36 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Inline CSS Item

mqcarpenter,

You have tried to put selectors within 'inline' style declarations which are for simple property declarations. The a:link / a:hover {} are element selectors and would need to be either embeded (in the head section) or in an external sheet . The urls seem to be absolute with a relative path.
You may be better of putting all these into the head section and use .class and contextual selectors to achieve the hovers,
it would help to see the rest of the code.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

mqcarpenter
Offline
Regular
Last seen: 17 years 8 weeks ago
Joined: 2004-07-23
Posts: 21
Points: 0

Inline CSS Item

Thank you for the input. The reason I am using inline is because I do not have access to the head section. Can I use an external in the middle of the HTML? Is the reference the same as if I were declaring it in the head?

<table><tr><td><link rel="StyleSheet" href="/css/dimples.css" type="text/css" media="all"/>...

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 36 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Inline CSS Item

Um no, I'm not sure how you will get round this you need to style the anchor which you can do but I don't know that it's possible to use a psuedo class inline for the hover effect, I'm pretty sure you can't though, but this may need input from Tony, Stu, or Co2 who may know of a way round this that I've missed.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

mqcarpenter
Offline
Regular
Last seen: 17 years 8 weeks ago
Joined: 2004-07-23
Posts: 21
Points: 0

Inline CSS Item

Thanks Hugo. I appreciate you trying. If anyone knows, please help! Thanks

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 4 days 1 hour ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Inline CSS Item

Hi mqcarpenter,
As Hugo mentioned you can't put the pseudo tags inline.
One option would be to use JavaScript to change the properties.
<a href="#" onmouseover="this.style.backgroundImage= 'url(http://IMAGE2.gif)'"> or something close to that.

arnot
Offline
newbie
Last seen: 17 years 4 weeks ago
Joined: 2004-08-18
Posts: 3
Points: 0

Re: Inline CSS Item

mqcarpenter wrote:
I know inline CSS is not the best, but in this situation I have no choice. I am trying to do something rather complicated for inline, and am not having success like I would externally.

I need a cell to have a background gif that changes on rollover. Furthermore, I need the CSS to also cover the link properties. Here is what I have so far. Can you help with syntax? Thank you

<td width="125" height="30" style="font: 11pt, Arial; text-align:center; display: table-cell; vertical-align: middle; a:link {color: #006; background-image: url(http://IMAGE.gif)} a:hover {color: #036; background-image: url(http://IMAGE2.gif)} "><a href="#">Home</a></td>

arnot
Offline
newbie
Last seen: 17 years 4 weeks ago
Joined: 2004-08-18
Posts: 3
Points: 0

Re: Inline CSS Item

arnot wrote:
mqcarpenter wrote:
I know inline CSS is not the best, but in this situation I have no choice. I am trying to do something rather complicated for inline, and am not having success like I would externally.

I need a cell to have a background gif that changes on rollover. Furthermore, I need the CSS to also cover the link properties. Here is what I have so far. Can you help with syntax? Thank you

New to this site: I've send a file wich shows how to build a class in the <HEAD> and refer to it later on in the <A HREF=".."

Now you do not even have to point the mouse to the string in the table.
It's not my own creation. ( see the code for the guy who needs the credits.) [/img]

arnot
Offline
newbie
Last seen: 17 years 4 weeks ago
Joined: 2004-08-18
Posts: 3
Points: 0

Inline CSS Item

Just find on this page "hello1.html" and you will see the code
just play around with it.

Stu
Stu's picture
Offline
Enthusiast
Bristol uk
Last seen: 17 years 34 weeks ago
Bristol uk
Joined: 2004-01-20
Posts: 282
Points: 0

Inline CSS Item

If you don't mind not validating you could put the <style> </style> declaration inline.

<style type="text/css">
a.linkit {width:125px; height:30px; font: 11pt, Arial; text-align:center; display: table-cell; vertical-align: middle;} 
a.linkit {color: #006; background:#c00 url(http://IMAGE.gif);} 
a:hover.linkit {color: #036; background:#00c url(http://IMAGE2.gif);} 
</style>
<td><a class="linkit" href="#">Home</a></td>

The style tag should be in the head but it works equally well in the body (at least in IE and FF it does) but it wont validate.
.

It's not what you do it's the way that you do it.
So do it with STYLE
http://www.s7u.co.uk