That's definitely not working in IE 7. It appears to have to do with the
order things are drawn because the following works. Admittedly, I've only
used this code in carousel type scenarios where an image is linked to
content, but the image is a background image; therefore I've never
encountered it. I do need to go and check a few things on the project I'm
currently working on though.
This works:
<style type="text/css">
.test {
position: relative;
z-index:1;
overflow: hidden;
height: 250px;
width: 250px;
background: whitesmoke;
}
.test img {
}
.test a {
position:absolute;
z-index: 2;
width: 98%;
height: 98%;
margin: 0 auto;
overflow: hidden;
background:dimgray;
text-indent: -9999em;
}
</style>
<div class="test">
<a href="#">This is a test</a>
<img src="http://lorempixel.com/250/250/sports"; />
</div>
Put the anchor after the <img> and it will not. It seems like this would
be an issue of hasLayout, but overflow or zoom does not fix. I'll keep
looking into it...
On Fri, Sep 20, 2013 at 4:59 PM, Tom Livingston <tom...@gmail.com> wrote:
> 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/
>
--
Chris Rockwell
______________________________________________________________________
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/
