List,
I had sent this to Chris Rockwell, but wanted to ask the list as well.
I was trying to implement Chris' method mentioned below and it isnt
working in 7, 8 and 9. The link is not on top of the other elements in
the wrapper. The HREF works if you put your cursor BETWEEN the other
elements, so it's in the background. I'm drawing a blank on it. Any
thoughts? Working fine in Mac Chrome/FF (latest).
<div class="entry">
<div class="thumbwrap"><img src="" alt="fpo-pic" width="134" /></div>
<p>Foo</p>
<a href="">View</a>
</div>
SCSS Styles:
.entry{
position: relative;
width: 133px;
margin-right: 45px;
text-align: center;
text-transform: uppercase;
float: left;
cursor: pointer;
.thumbwrap{
margin-bottom: 8px;
@include box-shadow(#000 2px 2px 5px);
border: 2px solid $grey;
overflow: hidden;
img{
float: left;
}
}
p{
position: relative;
@include gotham-bold;
}
a{
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-indent: -9999em;
z-index: 50;
}
&:last-of-type{
margin-right: 0;
}
&:hover p{
color: #fff;
}
&:hover .thumbwrap{
border: 2px solid #fff;
}
}
Thanks in advance.
On Thu, Sep 12, 2013 at 3:24 PM, Tom Livingston <tom...@gmail.com> wrote:
> On Thu, Sep 12, 2013 at 3:19 PM, Chris Rockwell <ch...@chrisrockwell.com>
> wrote:
>> <a> is an inline element and cannot contain block level elements (such as
>> <div>).
>>
>> One way is:
>>
>> .container {
>> position: relative;
>> }
>> a {
>> display: block;
>> position: absolute;
>> left:0;
>> top: 0;
>> width: 100%;
>> height: 100%;
>> text-indent: -9999em;
>> z-index: 1 /* or higher if necessary */
>> }
>>
>> <div class="container">
>> <div>Some content here</div>
>> <a>Link</a>
>> </div>
>>
>>
>
> This is nice. I'll have to remember this one.
>
> I will say though, that I have wrapped other elements such as div in
> an href with success in IE8+ and other "normal" browsers.
>
> --
>
> Tom Livingston | Senior Front-End Developer | Media Logic |
> ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
--
Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
--
Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
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/
