Forum Moderators: not2easy
This is the in-text code:
-----
<div class="altth">
<div class="shad">
<a href="img/zeus.jpg" onclick="PrevFoto(href);if(w>800){return(false);}" target="_blank">
<div><img src="th/zeus.jpg" alt="Giove e Teti" border="0" /></div>
</a>
</div>
<p>Zeus Tonante</p>
</div>And that's the CSS Code:
-----
.altth{
margin:1em 0 0 1.5em;
float:right;
}
.altth p{
clear:both;
}
.shad{
float:left;
background:url(img/shadalpha.png) no-repeat bottom right!important;
background:url(img/shad.gif) no-repeat bottom right;
}
.shad div{
display:block;
position:relative;
background-color:#FFFFFF;
border: 1px solid #A9A9A9;
margin: -6px 6px 6px -6px;
}
.shad img{
margin:3px;
}With Mozilla FireFox I can see that thumbnail correctly, as you can see:
<No URLs, thanks. See TOS [WebmasterWorld.com] and CSS Forum Charter [WebmasterWorld.com]>
But with Internet Explorer 6 left part is missing:
It's really strange, because the margin-top's negative numbers are show correctly, but the margin-left's negative numbers don't.
Some ideas?
[edited by: SuzyUK at 8:27 am (utc) on Dec. 20, 2004]
Had to remove the URL's per TOS, but the problem is evident just from the code you posted (changed the background image to a background color for testing)
the nesting of your HTML is not quite right, you have a <div> nested inside your <a> element, not sure if that's related. You can use the <a> and <img> elements in their own right without using an extra div.
I'm being bad.. I use code very similar to this on my own site so I'll just tweak it to see if it suits here. You may not need the bits I've commented out.
.altth {background: #ffc; float: left; width: 100%;}.altth p{
clear:both;
}
.altth div{
margin: 1em 0 0 1.5em;
float:right;
}a.shadimg {
border: 0;
display: block;
position: relative;
/* z-index: 10; */
background: #eee;
padding: 4px;
margin: 0;
display: inline; /* for IE if margins are used */
float: left;
}a.shadimg img {
background-color: #fff;
border: 1px solid #a9a9a9;
display: block;
margin: -6px 0px 0px -6px;
padding: 3px;
position: relative;
width: 100px;
height: 100px;
}</style>
</head>
<body>
<div class="altth">
<div>
<a class="shadimg" href="/"><img src="zeus.jpg" alt="Giove e Teti" border="0" /></a>
<p>Zeus Tonante</p>
</div>
<div>
<a class="shadimg" href="/"><img src="zeus.jpg" alt="Giove e Teti" border="0" /></a>
<p>Zeus Tonante</p>
</div>
</div>
If that doesn't help, let us know and maybe someone can fix the top code..
thx
Suzy
Another question. Have this code:
-----
#text a:hover{text-decoration:none;}
.one a:hover{text-decoration:underline;}<body>
<div id="text">
...
<a href="#">Some</a>
...
<div class="one">
<a href="#">Another Some</a>
</div>
...
</div>
</body>
Why when I hover "Another Some" is text-decoration:none? (With FireFox and IE too)
#text a:hover{text-decoration:none;}
.one a:hover{text-decoration:underline;}
both the links are inside the #text div and the ID selector in the first link rule is making it more specific [w3.org] so it still controls the second rule too, try adding a little more specificity to the second rule..
#text .one a:hover{text-decoration:underline;}
Suzy
Sry, I'm too stupid, tnx Suzy ;)
