By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,681 Members | 1,854 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,681 IT Pros & Developers. It's quick & easy.

problem with links in mac ie 5.2

P: n/a
DJA
Hello,

I site I designed has links that don't seem to work in mac IE 5.2. In
my site I'm using CSS to imitate image buttons by using the background
image property along with a little extra markup to make it work. When
you mouse over the button the hover state is activated and the 'over'
graphic is displayed, and the link url is displayed in the bottom left
corner of the screen. When clicked, though, nothing happens and you
are not taken to the url. T

The buttons work work fine in PC IE 6, firefox, safari, etc. but not
in
mac IE 5.2. I've looked around the newsgroups but can't seem to find
anyone else who has the same problem. I've pasted the relevant bits
of code below. Any ideas?

CSS:
..homepage-links-list {
position: absolute; left: 33px; top: 136px;
list-style-type: none;
margin: 0;
padding: 0;

}

..homepage-links-images {
width: 56px; height: 16px;
position: absolute; left: 60px; top: 87px;
overflow: hidden;

}

..homepage-links-images a {
position:absolute; left:0; top:0;
width: 56px; height: 16px;
display: block;
background: url(../images/nav-images-over.gif);

}

..homepage-links-images a p {
position:absolute; left:0; top:0;
width: 56px; height: 16px;
display: block;
text-indent: -56px;

}

..homepage-links-images a span {
display:block;
position:absolute;
left:0; top:0; z-index: 1;
width: 56px; height:16px;
background: url(../images/nav-images.gif);
cursor: hand;

}

..homepage-links-images a:hover span{
background: transparent;

}

etc. (it goes on like this for the rest of the list)

HTML
<ul class="homepage-links-list">
<li class="homepage-links-images"><a href="images.htm">
<p>Images</p>
<span></span></a></li>
<li class="homepage-links-statement"><a href="statement.htm">
<p>Statement</p>
<span></span></a></li>
<li class="homepage-links-bio"><a href="bio.htm">
<p>Bio</p>
<span></span></a></li>
<li class="homepage-links-contact"><a href="contact.htm">
<p>Contact</p>
<span></span></a></li>
</ul>

Feb 14 '07 #1
Share this Question
Share on Google+
8 Replies


P: n/a
In article
<11**********************@v33g2000cwv.googlegroups .com>,
"DJA" <dj******@gmail.comwrote:
Hello,

I site I designed has links that don't seem to work in mac IE 5.2. In
my site I'm using CSS to imitate image buttons by using the background
image property along with a little extra markup to make it work. When
you mouse over the button the hover state is activated and the 'over'
graphic is displayed, and the link url is displayed in the bottom left
corner of the screen. When clicked, though, nothing happens and you
are not taken to the url. T

The buttons work work fine in PC IE 6, firefox, safari, etc. but not
in
mac IE 5.2.
Nor on Mac Safari, FF, Opera, iCab or anything Mac, that is, no
links go anywhere and no graphics display.

You can't do:

<li class="homepage-links-images"><a href="images.htm">
<p>Images</p>
<span></span></a></li>

and hope for things to work. The paragraph element cannot be
contained within the anchor one under the mostly used document
types, eg.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

If fixing up your code here does not help, post a proper URL
(even a test case) rather than give so much markup and css here.

--
dorayme
Feb 14 '07 #2

P: n/a
DJA
Nor on Mac Safari, FF, Opera, iCab or anything Mac, that is, no
links go anywhere and no graphics display.

You can't do:

<li class="homepage-links-images"><a href="images.htm">
<p>Images</p>
<span></span></a></li>

and hope for things to work. The paragraph element cannot be
contained within the anchor one under the mostly used document
types, eg.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

If fixing up your code here does not help, post a proper URL
(even a test case) rather than give so much markup and css here.

--
dorayme
Thanks for the response, dorayme.

I'll try replacing the p tag with a b tag and see if that helps. I
really only need that bit of code so that users with images turned off
can use the links. I won't be able to get to a mac with IE 5.2 until
Monday so I won't be able to test the fix until then.
Feb 14 '07 #3

P: n/a
In article
<11*********************@m58g2000cwm.googlegroups. com>,
"DJA" <dj******@gmail.comwrote:
Nor on Mac Safari, FF, Opera, iCab or anything Mac, that is, no
links go anywhere and no graphics display.

You can't do:

<li class="homepage-links-images"><a href="images.htm">
<p>Images</p>
<span></span></a></li>

and hope for things to work. The paragraph element cannot be
contained within the anchor one under the mostly used document
types, eg.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

If fixing up your code here does not help, post a proper URL
(even a test case) rather than give so much markup and css here.

--
dorayme

Thanks for the response, dorayme.

I'll try replacing the p tag with a b tag and see if that helps. I
really only need that bit of code so that users with images turned off
can use the links. I won't be able to get to a mac with IE 5.2 until
Monday so I won't be able to test the fix until then.
what is the purpose of the <ptag or the <spanone or your
proposed <bone? Why will you try? Why anything here, you have a
list element, what more is needed and for what?

--
dorayme
Feb 15 '07 #4

P: n/a
DJA wrote:
>
I won't be able to get to a mac with IE 5.2 until
Monday so I won't be able to test the fix until then.
After that, if you are still having troubles, please post a URL instead
of code. There is very often more to a situation than a code snippet
tells. A URL will give us the whole picture.

--
Berg
Feb 15 '07 #5

P: n/a
DJA
On Feb 14, 5:50 pm, dorayme <doraymeRidT...@optusnet.com.auwrote:
In article
<1171492983.509108.38...@m58g2000cwm.googlegroups. com>,

"DJA" <djaba...@gmail.comwrote:
Nor on Mac Safari, FF, Opera, iCab or anything Mac, that is, no
links go anywhere and no graphics display.
You can't do:
<li class="homepage-links-images"><a href="images.htm">
<p>Images</p>
<span></span></a></li>
and hope for things to work. The paragraph element cannot be
contained within the anchor one under the mostly used document
types, eg.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
If fixing up your code here does not help, post a proper URL
(even a test case) rather than give so much markup and css here.
--
dorayme
Thanks for the response, dorayme.
I'll try replacing the p tag with a b tag and see if that helps. I
really only need that bit of code so that users with images turned off
can use the links. I won't be able to get to a mac with IE 5.2 until
Monday so I won't be able to test the fix until then.

what is the purpose of the <ptag or the <spanone or your
proposed <bone? Why will you try? Why anything here, you have a
list element, what more is needed and for what?

--
dorayme
Dorayme, to answer your question

What I'm doing is using CSS to make image buttons. Of course, I could
do this using a bit of javascript, but I wanted to see if I could do
it using just CSS. Here's how it works. First, I set the <atag to
display:block; and set the background to my 'button-over' image. The
<pis next, but it is there only for accessibility reasons. If a
user is using a screen reader, the reader will read the contents of
the <pand they can still use the link. I set the text-indent of the
<pso that the text will not be visible on the screen. Then, the
<spanis also set to display:block; and the background is set to my
'button' image. The z-index of the <spanis set to 1 so it will lay
on top of the <atag. Finally, I use the a:hover pseudo class to set
the <spantag's background to transparent which gives the effect of a
mouse over-image swap.

Feb 15 '07 #6

P: n/a
DJA
Berg,

Here's the site where I'm having the mac IE 5.2 issues. It works in
every other browser I've tried: PC IE 6, 7, Firefox, and Safari, just
not in mac IE 5.2.

http://kathystecko.com/
Feb 15 '07 #7

P: n/a
On 14 Feb, 15:00, "DJA" <djaba...@gmail.comwrote:
I site I designed has links that don't seem to work in mac IE 5.2.
Hardly anything works for Mac IE5
_Perfection_ works on Mac IE, and it even works pretty well (for its
age). However if you have the slightest syntactic wobble in your code
(even if it's still valid), then Mac IE is infamous for blowing up
easily and badly.

It's also just not worth targetting Mac IE any more. It's dead, move
on.

<li class="homepage-links-images"><a href="images.htm">
<p>Images</p>
<span></span></a></li>
Your HTML is invalid. You can't put a block element like <pinside an
inline context like <a>. This is just the sort of thing that is likely
to cause Mac IE to explode, so fix that before you start looking for
the obscure stuff. Additionally, you don't _need_ to do this. Anything
you might have wanted to do with it, you can do just as well by
applying your CSS to the <aor the <lielements. The <spanis also
superfluous, and best removed.
Feb 15 '07 #8

P: n/a
DJA wrote:
>
Here's the site where I'm having the mac IE 5.2 issues.
http://kathystecko.com/
First, fix the invalid markup. Without valid code, you take your chances
with all browsers, not just MacIE. Enough other people have told you
what's wrong so I don't think I need to repeat it.
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/

Second, I see what you are trying to do - image replacement. IIRC MacIE
is picky about how this is set up. I think you've over-defined it, but
that may or may not be the issue. I do believe, however, that MacIE
likes the <spanto come before the text, not after.

--
Berg
Feb 15 '07 #9

This discussion thread is closed

Replies have been disabled for this discussion.