Welcome to WebmasterWorld Guest from 50.19.0.90

Forum Moderators: not2easy

Message Too Old, No Replies

Problem with position in Firefox

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

New User

joined:Oct 18, 2011
posts:2
votes: 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.
12:29 am on Oct 19, 2011 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Sept 21, 2002
posts:729
votes: 8


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.
1:54 am on Oct 19, 2011 (gmt 0)

New User

joined:Oct 18, 2011
posts:2
votes: 0


I got it!

This code was the problem:

img {
border: 0;
display: block;
}


Thanks for you response.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members