Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss
Problem with transparent overlay link in Explorer 10
6 views
Skip to first unread message
Jeffery Small
Apr 25, 2013, 1:59:37 AM4/25/13
to
I have created a series of webpages where I have placed a transparent overlay on the left and right sides of images to facilitate navigation to the previous and next image.
Here is the CSS I'm using to define the two frames, defining the z-index=3 so that they stack above the image and are clickable:
#llinkframe,
#rlinkframe {
background-color: transparent;
border-type: none;
border-width: 0;
display: inline;
height: 577px;
overflow: hidden;
position: absolute;
width: 200;
z-index: 3;
}
#llinkframe {
float: left;
left: auto;
}
#rlinkframe {
float: right;
right: 0px;
}
On the webpage, I place an image with a single transparent pixel to fill these frames. For example:
<div id="llinkframe">
<a href="page_02.html"><img class="link" src="images/pixel.gif"></a>
</div>
This works great on Firefox, Opera and Chrome, but on Explorer 10, there is a 1-pixel transparent "box" around the link image that knocks out the pixels of the image below.
Can anyone suggest how this overlay image can be made truly 100% transparent in Explorer 10. (And let's not even discuss earlier versions of Explorer!)
Thanks.
Here is the CSS I'm using to define the two frames, defining the z-index=3 so that they stack above the image and are clickable:
#llinkframe,
#rlinkframe {
background-color: transparent;
border-type: none;
border-width: 0;
display: inline;
height: 577px;
overflow: hidden;
position: absolute;
width: 200;
z-index: 3;
}
#llinkframe {
float: left;
left: auto;
}
#rlinkframe {
float: right;
right: 0px;
}
On the webpage, I place an image with a single transparent pixel to fill these frames. For example:
<div id="llinkframe">
<a href="page_02.html"><img class="link" src="images/pixel.gif"></a>
</div>
This works great on Firefox, Opera and Chrome, but on Explorer 10, there is a 1-pixel transparent "box" around the link image that knocks out the pixels of the image below.
Can anyone suggest how this overlay image can be made truly 100% transparent in Explorer 10. (And let's not even discuss earlier versions of Explorer!)
Thanks.
tlvp
Apr 25, 2013, 2:40:36 AM4/25/13
to
accepted, hence easier? (Or maybe I'm missing some crucial point ... :-{ .)
Cheers, -- tlvp
--
Avant de repondre, jeter la poubelle, SVP.
Thomas 'PointedEars' Lahn
Apr 25, 2013, 4:59:09 AM4/25/13
to
Jeffery Small wrote:
> I have created a series of webpages where I have placed a transparent
> overlay on the left and right sides of images to facilitate navigation to
> the previous and next image.
>
> Here is the CSS I'm using to define the two frames, defining the z-index=3
> so that they stack above the image and are clickable:
>
> #llinkframe,
> #rlinkframe {
> background-color: transparent;
> border-type: none;
> border-width: 0;
> display: inline;
> height: 577px;
> overflow: hidden;
> position: absolute;
> width: 200;
> z-index: 3;
> }
>
> #llinkframe {
> float: left;
> left: auto;
> }
>
> #rlinkframe {
> float: right;
> right: 0px;
> }
Do not use tabs (for posting).
> I have created a series of webpages where I have placed a transparent
> overlay on the left and right sides of images to facilitate navigation to
> the previous and next image.
>
> Here is the CSS I'm using to define the two frames, defining the z-index=3
> so that they stack above the image and are clickable:
>
> #llinkframe,
> #rlinkframe {
> background-color: transparent;
> border-type: none;
> border-width: 0;
> display: inline;
> height: 577px;
> overflow: hidden;
> position: absolute;
> width: 200;
> z-index: 3;
> }
>
> #llinkframe {
> float: left;
> left: auto;
> }
>
> #rlinkframe {
> float: right;
> right: 0px;
> }
> On the webpage, I place an image with a single transparent pixel to fill
> these frames. For example:
>
> <div id="llinkframe">
> <a href="page_02.html"><img class="link" src="images/pixel.gif"></a>
> </div>
>
> This works great on Firefox, Opera and Chrome, but on Explorer 10, there
> is a 1-pixel transparent "box" around the link image that knocks out the
> pixels of the image below.
>
> Can anyone suggest how this overlay image can be made truly 100%
> transparent in Explorer 10. (And let's not even discuss earlier versions
> of Explorer!)
border: none;
on the image. There is a border around the linked image so that the link
can show that it received the focus (with keyboard navigation). Removing
that border is not recommended but often done for aesthetical reasons
anyway. The least you should do then is highlight the focused image link in
some other way.
That said, your approach appears to be wrong:
1. Formatting the “div” elements “display: inline” and positioning them
”absolute” appears to be just wrong. And “200” needs a unit of length
in proper CSS (it is sometimes error-corrected when you use
Quirks/Compatibibility Mode. Avoid those rendering modes.)
<http://jigsaw.w3.org/css-validator/>
2. You do not need the “a” elements in a “div” element. Just format the
“a” element as a block-level element: “display: block”.
3. Blind-pixel GIFs are a technique of Web design that predates CSS (1996
CE). You do not need them anymore. Use and overflow: hidden,
if necessary. Or, if you must use an image, use one that actually
conveys what the link is doing, and specify the *mandatory* “alt”
attribute with a sensible value in case the image cannot be displayed.
<http://validator.w3.org/>
PointedEars
--
Danny Goodman's books are out of date and teach practices that are
positively harmful for cross-browser scripting.
-- Richard Cornford, cljs, <cife6q$253$1$8300...@news.demon.co.uk> (2004)
David Stone
Apr 25, 2013, 9:13:05 AM4/25/13
to
In article <906f676b-4dd7-45cc...@googlegroups.com>,
if you're going to float them anyway? That doesn't seem to make sense.
> width: 200;
> z-index: 3;
> }
>
> #llinkframe {
> float: left;
> left: auto;
> }
>
> #rlinkframe {
> float: right;
> right: 0px;
> }
Also, if you're floating them, why bother with the left and right
positioning?
> On the webpage, I place an image with a single transparent pixel to fill
> these frames. For example:
>
> <div id="llinkframe">
> <a href="page_02.html"><img class="link" src="images/pixel.gif"></a>
> </div>
>
> This works great on Firefox, Opera and Chrome, but on Explorer 10, there is a
> 1-pixel transparent "box" around the link image that knocks out the pixels of
> the image below.
Using the developer tools in IE, can you see if it is adding a solid
border or margin to either the link or image element? That would be
my first thought (different default stylesheets/handling).
Jeffery Small <jeffer...@gmail.com> wrote:
> I have created a series of webpages where I have placed a transparent overlay
> on the left and right sides of images to facilitate navigation to the
> previous and next image.
>
> Here is the CSS I'm using to define the two frames, defining the z-index=3 so
> that they stack above the image and are clickable:
>
> #llinkframe,
> #rlinkframe {
> background-color: transparent;
> border-type: none;
> border-width: 0;
> display: inline;
> height: 577px;
> overflow: hidden;
> position: absolute;
Not a CSS expert, so wondering why these would be position: absolute
> I have created a series of webpages where I have placed a transparent overlay
> on the left and right sides of images to facilitate navigation to the
> previous and next image.
>
> Here is the CSS I'm using to define the two frames, defining the z-index=3 so
> that they stack above the image and are clickable:
>
> #llinkframe,
> #rlinkframe {
> background-color: transparent;
> border-type: none;
> border-width: 0;
> display: inline;
> height: 577px;
> overflow: hidden;
> position: absolute;
if you're going to float them anyway? That doesn't seem to make sense.
> width: 200;
> z-index: 3;
> }
>
> #llinkframe {
> float: left;
> left: auto;
> }
>
> #rlinkframe {
> float: right;
> right: 0px;
> }
positioning?
> On the webpage, I place an image with a single transparent pixel to fill
> these frames. For example:
>
> <div id="llinkframe">
> <a href="page_02.html"><img class="link" src="images/pixel.gif"></a>
> </div>
>
> This works great on Firefox, Opera and Chrome, but on Explorer 10, there is a
> 1-pixel transparent "box" around the link image that knocks out the pixels of
> the image below.
border or margin to either the link or image element? That would be
my first thought (different default stylesheets/handling).
Jeffery Small
Apr 26, 2013, 1:11:05 AM4/26/13
to
Thanks to everyone for the replies received so far. I am going to review everything here and take it all to heart.
Obviously I'm not a CSS expert. As to why certain things are done certain ways in the example above, it's because I try what seems the logical approach and things don't work as expected, so I alter various parameters to see what happens -- even though it does not seem to make sense to me -- until the desired result is achieved! :-(
If others have comments on this thread, please add them here. I'm very interested in hearing what everyone has to say.
Obviously I'm not a CSS expert. As to why certain things are done certain ways in the example above, it's because I try what seems the logical approach and things don't work as expected, so I alter various parameters to see what happens -- even though it does not seem to make sense to me -- until the desired result is achieved! :-(
If others have comments on this thread, please add them here. I'm very interested in hearing what everyone has to say.
Simon
Apr 26, 2013, 8:42:11 AM4/26/13
to
On 2013-04-25 08:59:09 +0000, Thomas 'PointedEars' Lahn
With this being an IE issue, I think its more likely to be an outline,
but setting outline:none on <A> tags is not a good idea, outline is
used for keyboard navigation/accessibility see
http://ss64.com/css/outline.html
It is possible (if unconventional) to use transparent images for
navigation but you should think about how to support non-mouse users
who will try to navigate the page with a keyboard and need some
feedback of the active control.
-
Simon
With this being an IE issue, I think its more likely to be an outline,
but setting outline:none on <A> tags is not a good idea, outline is
used for keyboard navigation/accessibility see
http://ss64.com/css/outline.html
It is possible (if unconventional) to use transparent images for
navigation but you should think about how to support non-mouse users
who will try to navigate the page with a keyboard and need some
feedback of the active control.
-
Simon
0 new messages