PDA

View Full Version : CSS conflict with added style



Renegades
Aug 23rd, 2009, 08:16 PM
Greetings to everyone from a newbee ...

I hit a very obscure problem and try to make it short:
My page works fine, no CSS problem at all.

I tried a new CSS style (on a plain page) for having an image dim on mouseover - works fine too.
Now I place this new CSS style into my "styles.css" and all of a sudden, the mouseover image seem to make the main image disappear when I move my mouse over it.


This is my CSS code. As said, tt works perfectly - on its own, but if I add it to my styles.css I get the above problem. This is something I never came across before and I couldn;t fine any answer to this anywhere ...


div.add_thumb_container {
position:absolute;
left:590px;
top:575px;
width:250px;
height:61px;
border:0px;
z-index:388;
}

div.add_thumb_container img.any {
border: 0px;
}

div.add_thumb_container a.add_thumb {
display: none;
position:absolute;
top: 0px; left: 0px;
border:0px;
z-index:389;
}

div.add_thumb_container a.add_thumb:hover {
border: 0px;
}

div.add_thumb_container:hover a.add_thumb {
display: block;
}

... and here is my HTML markup for that:

<div id="Grid" class="add_thumb_container">
<img src="images/image.png" width="250" height="61" border="0" alt="Description of Image" class="any" />
<a href="anotherpage.html" class="add_thumb"><img src="images/hover.png" width="250" height="61" border="0" /></a>
</div>

You can try yourself, It works just fine on its own. It's a great aternative, I think to a roll-over (pre-loading delay) or v.s. a javascript ... it's just plain simple html...

I'd appreciate if someone could knock my head a bit, I am lost here.

Thanks

abduraooft
Aug 24th, 2009, 07:02 AM
Now I place this new CSS style into my "styles.css" and all of a sudden, the mouseover image seem to make the main image disappear when I move my mouse over it. Could you post a link to your page?

jolly_nikki
Aug 25th, 2009, 01:16 AM
I have added your stylesheet to style.css and inckuded it in my html file and it works perfectly fine.

<head>
<link rel="stylesheet" href="style.css" type="text/css" media="all" />
</head>