In reference to this site: http://www.ivancash.com/writing/pers...repreneur.html...

The orange button that reads "These shirts are now for sale!" should follow this css code:

#sticker {
position:absolute;
border:0px;
float:right;
margin-right:50px;
text-align:right;}

#sticker a:link, #sticker a:visited, #sticker a:active, #sticker a:hover {
text-decoration: none;
}

Here it is in the html page:

<div id="sticker">
<a href="http://www.hatethecoach.com/"><img src="../../images/sticker.gif" alt="sticker" border="0"></a>
</div>

Any ideas as to why it's not responding to my css?


Thanks,

Ivan

You can't use a float on an absolutely positioned element. Absolute MEANS absolute, and float.. well.. floats within the document flow. Absolute means it is OUT of the document flow, and goes only where you tell it to go, using top, right, left and right values.

Set your #wrapper to position: relative first, that way the absolutes will be positioned relative to the #wrapper. I don't see that you need the absolute, the float seems to be working, but whatever you decide you one or the other but you can't use both.

What about my "no border" and "no text decoration" commands.
I don't think the sticker div is working at all, and I'm trying to figure out why.

You put a background color on the #wrapper a. text-decoration: none does not effect that.

Add a background with the background color of the page to #sticker.

Hey,

So the CSS is definitely working, but I still can't get the yellow highlight to go away.
I just tried your suggestion Joder, and adding white bg didn't do anything..

HTML:

<div id="sticker">
<a href="http://www.hatethecoach.com/"><img src="../../images/sticker.gif" alt="sticker" border="0"></a>
</div>

CSS:

#sticker {
position:absolute;
border:0px;
left:540px;
margin-top:10px;
text-align:right;
text-decoration:none;
background-color:#FFFFFF;
}

#sticker a:link, #sticker a:visited, #sticker a:active, #sticker a:hover {
text-decoration: none;
}

but I still can't get the yellow highlight to go away.

Change the background colour in this bit of CSS code.

.highlight{
color:#000000;
background-color:#FFFF00;
}

Originally Posted by chrishirst

Change the background colour in this bit of CSS code.

.highlight{
color:#000000;
background-color:#FFFF00;
}

Sorry for not being more specific. ....I'm looking for the highlight behind the badge image that comes up when you scroll over it to go away.
http://www.ivancash.com/writing/pers...repreneur.html

give the anchor that is wrapped around the logo a different class/id with the hover background set to transparent

Originally Posted by chrishirst

give the anchor that is wrapped around the logo a different class/id with the hover background set to transparent

I'm not sure what you mean exactly, but didn't I do that?

#sticker {
position:absolute;
border:0px;
left:540px;
margin-top:10px;
text-align:right;
text-decoration:none;
background-color:#FFFFFF
}

#sticker a:link, #sticker a:visited, #sticker a:active, #sticker a:hover {
text-decoration: none;
background-color:ffffff;
}

Can you be more specific in your suggestion please?
Thanks!

I'm not sure what you mean exactly, but didn't I do that?

Nope, it's just a plain anchor so it will follow whatever style is set for anchors.

<div id="left">
<a href="http://www.ivancash.com/"><img src="http://www.ivancash.com/images/logo.gif" alt="ivan_cash_logo" border="0"></a>
 </div>

Add

#left a:hover {
     background-color:transparent;
}

To your style sheet

great, thanks!