Hi, this is irritating...
if you open
http://www.giuseppecraparottacv.co.uk/work-web-tooltip.html
with IE7 or 6 and hover the first "let me tell you something more" link
you realize immediately what's wrong.
The CSS tooltip pops up below the boxes containing text.
This of course doesn't happen in other browsers.
I thought z-indexing would have fixed the problem but it didn't.
Yesterday I resorted to "Lost", to heal my on-screen frustration
watching people coping with "real nature" problems. Should go in the
nature myself instead...
Thank you very much for your attention.
Here you have the css code (between lines the relevant properties):
body {
padding:0;
margin:0;
font:0.9em Verdana, Arial, Helvetica, sans-serif;
background-color:#BFBFBF;
}
h1, p, strong, ul, li, .field, a, div {
padding:0;
margin:0;
}
a {
text-decoration:none;
}
ul {
min-width:574px;
width:39.8em;
margin:0 auto;
list-style-type:none;
border-right:4px solid #737272;
border-left:4px solid #737272;
}
.field {
min-width:574px;
width:39.8em;
margin:0 auto;
background:#ffffff;
padding-bottom:0.7em;
border-right:4px solid #737272;
border-left:4px solid #737272;
}
h1 {
margin:0 auto;
font-size:0.60em;
color:#ffffff;
text-align:center;
line-height:1.55em;
width:558px;
height:1.80em;
background:#00abe4 url(img/bg-header.jpg) no-repeat bottom center;
}
li {
position:relative;
width:100%;
}
.odd {
background-color:#EAF4F5;
}
.even {
background-color:#ffffff;
}
a.works {
display:block;
width:3.7em;
height:1.4em;
text-align:center;
color:#ffffff;
background:url(img/bg-works.jpg) repeat-x;
position:absolute;
top:79%;
left:80%;
}
li p {
padding:1.1em 1em 0 1.5em;
width:37.3em;
}
*
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
.popup{
color:#00B9F6;
line-height:1.8em;
z-index:100;
}
.popup:hover {
color:#ffffff;
background-color:#5DCCF0;
z-index:100;
}
.popup span {
display:none;}
.popup:hover span {
display:block;
position:absolute;
z-index:100;
left:3em;
top:-1em;
width:200px;
height:200px;
color:#000000;
line-height:1em;
padding:1.2em;
background-color:#5DCCF0;
}*
_____________________________________________________________________________________________________
#browse {
margin:0 auto;
min-width:574px;
width:39.8em;
height:4.06em;
color:#6C6C6C;
background-color:#E1E1E1;
border-top:3px solid #737272;
border-right:4px solid #737272;
border-left:4px solid #737272;
border-bottom:4px solid #737272;
}
#browse p {
padding:0.65em 1em 0 1.5em;
}
ul.areas {
list-style:none;
border:none;
}
li.area {
width:6em;
/*height:26px;*/
height:1.83em;
float:left;
/*background:url(img/bg-areas-shad.jpg) no-repeat;*/
display:inline;
margin-top:0.39em;
}
li.area a {
display:block;
width:7.855em;
min-width:79px;
height:2.1em;
text-align:center;
/*min-width:79px;*/
color:#000000;
font:bold 0.7em/2em verdana;
margin-top:0.5em;
margin-left:0.40em;
}
li.mktg {
margin-left:1.3em;
}
li.radio {
margin-left:9.6em;
margin-right:9.5em;
}
li.mktg a {
background:#F92D2D url(img/bg-areas-mktg.jpg) no-repeat left top;
}
li.mktg a:hover {
background:#F92D2D url(img/bg-areas-mktg.jpg) no-repeat left -8.3em;
}
li.radio a {
background: #FFF005 url(img/bg-areas-radio.jpg) no-repeat left top;
}
li.radio a:hover {
background: #FFF005 url(img/bg-areas-radio.jpg) no-repeat left -8.3em;
}
li.res a {
background: #809A79 url(img/bg-areas-res.jpg) no-repeat left top;
}
li.res a:hover {
background: #809A79 url(img/bg-areas-res.jpg) no-repeat left -8.3em;
}
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
