CSS problem

Hi,
I'm trying to get an image to have a simple rollover effect (change border
colour and px). I've searched in my books and tried many things, but it just
doesn't work. I'm either missing something or its a browser issue ?

Appreciate any feedback:

my markup:
<code>
<div id="sidebar">
<a href="#"><img src="i/png/image.png" width="190" height="56" border="0"
class="image" /></a>
</div>
</code>

my css:
<code>
#sidebar image {
padding: 2px 2px;
margin: 0 10px;
border: 1px solid #999;
background: #fff;
}
#sidebar image a:hover{
border: 1px solid #ccc;
background:#999;
}
</code>

Hi jsltd,

Try renaming the style "sidebar image" to "sidebarImage" and add the other
states for the rollover in the following order: link, visited, hover, active.

Works ok this end on Firefox and IE6.

Paul

Hi Paul,
Thanks for the input.

I have added the other states. No change.

The style 'sidebar image' is refering to the image class in the sidebar div,
so renaming wouldn't/didn't change anything, it just couldn't find the sidebar
image in my markup. I think however you are right I have a syntax problem
trying to apply style to the image in the sidebar. Heres my current css:

<code>
#sidebar image {
padding: 2px 2px;
margin: 0 10px;
border: 1px solid #999;
background:#fff;
}
#sidebar image a:link, a:visited{
border: 1px solid #999;
background:#fff;
}
#sidebar image a:hover{
border: 1px solid #ccc;
background:#999;
}
#sidebar image a:active{
border: 1px solid #999;
background:#fff;
}
</code>

It doesn't work for me in FF, the border box is fragmented and there is no
padding/margin positioning. ??? really baffled.

Hi jsltd,

Sorry, my mistake - I can get it to work in either FF or IE, but not in both.

Try replacing:
#sidebar image a:whatever
with
#sidebar img a:whatever

The following works in FF but not IE
#sidebar a:link img{
border: 1px solid #ccc;
background:#999;
}
#sidebar a:visited img{
border: 1px solid #ccc;
background:#999;
}
#sidebar a:hover img{
border: 1px solid #000;
background:#000;
}
#sidebar a:active img{
border: 1px solid #ccc;
background:#999;
}



While this works in IE but not FF
#sidebar img a:link{
border: 1px solid #ccc;
background:#999;
}
#sidebar img a:visited{
border: 1px solid #ccc;
background:#999;
}
#sidebar img a:hover{
border: 1px solid #000;
background:#000;
}
#sidebar img a:active{
border: 1px solid #ccc;
background:#999;
}

It seems that you need to figure out whether the border will be applied to the
link itself or to the image within the link.

Try applying the link style to the link rather than the image and using
display:block

Hi Paul,
Thanks for the input again. I'm not getting any further with this, I must
have some conflicting css somewhere. Appreciate your input.

I'm trying to create the effect found here: www.simplebits.com the rollover
effect on the images on the right sidebar. I've looked at the code but the
structure is done using dl,dd,dt attributes and I'm not familiar with this. So
I'll think about re-structuring my markup as I'm trying to create the same kind
of layout.

Thanks again,

By the way, like your site, had a quick look. How is business ??

..oO(jsltd)

I'm trying to get an image to have a simple rollover effect (change border
colour and px). I've searched in my books and tried many things, but it just
doesn't work. I'm either missing something or its a browser issue ?

You're missing something.

a href="#"><img src="i/png/image.png" width="190" height="56" border="0"
class="image" /></a

I don't think you need the class 'image'. The 'border' attribute can be
removed as well, it's deprecated. Add an 'alt' attribute instead, it's
required.

#sidebar image {

If you use the class, then the selector should read

#sidebar .image {...}

Without the class (prefered):

#sidebar img {...}

#sidebar image a:hover{

This can't work. It applies to links _inside_ an image element, which
can't exist. The correct selector would be

#sidebar a .image:hover{...}

or simply

#sidebar img:hover{...}

Problem: It won't work in IE, which only supports :hover on anchors. So
apply the border styles and the :hover to the anchor to make it work in
IE.

HTH
Micha

hI Micha,
Thanks for the detailed response. I've now switched to a dl markup instead, which allows me to style the anchor as you suggest.

Appreciate your feedback.