Welcome to WebmasterWorld Guest from 54.226.246.160

Forum Moderators: not2easy

Message Too Old, No Replies

Problem with position in Firefox

     

srcobranza

9:21 pm on Oct 18, 2011 (gmt 0)



I used this code to style the img title.

.title { 
position: relative;
z-index: 0;
}
.title:hover {
background-color: transparent;
z-index: 999;
}
.title span {
border: 1px solid #046D13;
padding: 3px;
position: absolute !important;
text-decoration: none;
background-color: #66CC66;
color: #000;
width: 135px;
text-align: center;
visibility: hidden;
font-size: 1.2em;
line-height: 14px;
}
.title:hover span {
visibility: visible;
top: -130px;
left: -15px;
}
.title img {
border: 2px solid #ccc;
}

.title:hover img {
border: 2px solid #CC0000;
}


In Chrome and Safari is working fine, but in firefox instead of -130px the title is much higher.

In other site the same code is working good in the three navigators, so another style in the site might be the problem.

Can see it here: [sdd-v2-fanatico.com.ar...]

Thanks.

Hoople

12:29 am on Oct 19, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



In other site the same code is working good in the three navigators, so another style in the site might be the problem.

Yes, you might be right. The code is a bit advanced for me to judge by eye without running it through tools though. I did that check on the code at that site. Before we can help you I would tidy up your coding on that site a bit first.

Go to [validator.w3.org...] for your HTML

and

[jigsaw.w3.org...] for your CSS.

srcobranza

1:54 am on Oct 19, 2011 (gmt 0)



I got it!

This code was the problem:

img {
border: 0;
display: block;
}


Thanks for you response.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month