Fri, 2004-07-23 03:06
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>
Fri, 2004-07-23 07:12
#1
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.
Fri, 2004-07-23 13:36
#2
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"/>...
Fri, 2004-07-23 15:22
#3
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.
Fri, 2004-07-23 16:45
#4
Inline CSS Item
Thanks Hugo. I appreciate you trying. If anyone knows, please help! Thanks
Fri, 2004-07-23 23:59
#5
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.
Wed, 2004-08-18 21:59
#6
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>
Wed, 2004-08-18 22:16
#7
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]
Wed, 2004-08-18 22:34
#8
Inline CSS Item
Just find on this page "hello1.html" and you will see the code
just play around with it.
Thu, 2004-08-19 07:28
#9
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.
.