More CSS problems in Firefox and IE6

[Trevor L.]

I have this CSS

a {text-decoration: underline; }
a:link {color: blue; }
a:visited {color: fuchsia; }
a:hover {color: #0000cc; } /* a darker blue */
a:active {color: #0000cc; } /* a darker blue */

The underline doesn't work in Firefox 1.5

Also the colours are different between IE6 and FF
In Firefox, the link colour is blue and the visited fuchsia. The hover
colour is blue.
In IE6 the link colour is fuchsia and the hover colour blue. The visited
colour is blue.

It may be that my choice of colours doesn't sufficiently distinguish between
them, but it is easy to tell with the blue and fuchsia

 

[Murray]

This is unnecessarily verbose. Try this -

a { text-decoration: underline; color:#00C; }
a:link {color: blue; }
a:visited {color: fuchsia; }

Why is it not being expressed? That would depend on you page's markup - can
you show me?

 

[Trevor L.]

This is unnecessarily verbose. Try this -

a { text-decoration: underline; color:#00C; }
a:link {color: blue; }
a:visited {color: fuchsia; }

Why is it not being expressed? That would depend on you page's
markup - can you show me?

Now I am thoroughly confused.
Not by you, I hasten to add , but by a change it what happens now - with
either the verbose or less verbose code, I get a different result.

In IE6, the colour is always fuchsia, whatever I do: hover, visit etc.

In Firefox, the colour starts as blue. When I click, the colour changes to
fuchsia. For some reason, the code invoked when I click the reference
doesn't work, even though the colour changes. The changed colour is still
there when I reopen the site locally. Why the colour doesn't reset itself, I
also don't know.

I can also see no other colours but these two ineither browser.

I need to work on why the code doesn't work in Firefox. But the basic setup
is this (which works in IE6 except for always showing the same colour)
This function is executed for several ranges e.g. 1,38 (Example is first
group Family on page "Picture Album" on my site)
function writeSlide(lower,upper)
{
document.write('<table class="thumbs">')
var windowHtml = ' '
for (var i = lower ; i <= upper ; i++)
{
if ( (i - lower + 1) % 8 == 1 )
document.write('<tr>')
windowHtml
+= '<td class="pcenter">'
+ '<a href="#' + i
+ '" onclick="newWindow(Slides[' + (i - 1) + '],Captions[' + (i - 1) +
'])"'
+ 'onmouseover="toolTip(tt_larger,this)">'
+ '<img id="Thumbs' + i + '" alt=""><br>'
+ '<span id="Text' + i + '" class="whitebg 75pc"></span></a>'
+ '</td>'
if (i == upper || (i - lower + 1) % 8 == 0)
{ document.write(windowHtml + '</tr>')
windowHtml = ' ' }
}
document.write('</table>')
}
It generates
<table class="thumbs">
<tr>
<td class="pcenter">
<a href="#1' onclick="newWindow(Slides[0],Captions[0])"
onmouseover="toolTip(tt_larger,this)">
<img id="Thumbs1" alt=""><br>
<span id="Text1" class="whitebg sz13"></span></a>
</td>
<!-- repeated another 37 times, incrementing the counter, except that every
8th occurrence has </tr><tr> added -->
</tr>
</table>

The images and captions are inserted by this function
function LoadThumbs()
{
for (i = 0 ; i < Slides.length ; i++)
{
document.images["Thumbs" + (i + 1)].src = Thumbnails
document.getElementById("Text" + (i + 1)).innerHTML=
'<span class="whitebg">' + (i + 1) + '. ' + Captions + '</span>'
}
}
(Now I see this, I will probably put this functionality into writeSlide() -
it doesn't have to be a separate function)

Classes used are:
..sz13 {font-size: 13px; }
..pcenter {text-align: center; }
..whitebg {background-image: url(""); background-color: white; }

The function toolTip() is just that.
The function newWindow() is the one that doesn't work in Firefox.
function newWindow(img,caption)
{
new function testit()
{
var imageToLoad = new Image()
imageToLoad.src = img
var h = imageToLoad.height
var w = imageToLoad.width
var windh = h + 50
// check to see if we have the dimensions and if not, wait 0.5 second
and go back
if (h*w == 0)
setTimeout('testit()',500)
else
spawnJimcoPopup
('picture.html?picture=' + img + '&amp;caption=' + caption
+ '&amp;height=' + h + '&amp;width=' + w
, '_blank'
,
'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no'
, windh,w,'center','0','pixel')
}
}
In IE6 it opens the image in a new window sized according to the size of the
image. I need to figure out why it doesn't work in Firefox.

I guess this is too much info. Anyway, I will update all the web code from
my local copy to make sure you see the same thing

 

[Murray]

Try it on a new page (i.e., eliminate the noise). You'll see....

--
Murray
============

This is unnecessarily verbose. Try this -

a { text-decoration: underline; color:#00C; }
a:link {color: blue; }
a:visited {color: fuchsia; }

Why is it not being expressed? That would depend on you page's
markup - can you show me?

Now I am thoroughly confused.
Not by you, I hasten to add , but by a change it what happens now - with
either the verbose or less verbose code, I get a different result.

In IE6, the colour is always fuchsia, whatever I do: hover, visit etc.

In Firefox, the colour starts as blue. When I click, the colour changes to
fuchsia. For some reason, the code invoked when I click the reference
doesn't work, even though the colour changes. The changed colour is still
there when I reopen the site locally. Why the colour doesn't reset itself,
I also don't know.

I can also see no other colours but these two ineither browser.

I need to work on why the code doesn't work in Firefox. But the basic
setup is this (which works in IE6 except for always showing the same
colour)
This function is executed for several ranges e.g. 1,38 (Example is first
group Family on page "Picture Album" on my site)
function writeSlide(lower,upper)
{
document.write('<table class="thumbs">')
var windowHtml = ' '
for (var i = lower ; i <= upper ; i++)
{
if ( (i - lower + 1) % 8 == 1 )
document.write('<tr>')
windowHtml
+= '<td class="pcenter">'
+ '<a href="#' + i
+ '" onclick="newWindow(Slides[' + (i - 1) + '],Captions[' + (i - 1)
+ '])"'
+ 'onmouseover="toolTip(tt_larger,this)">'
+ '<img id="Thumbs' + i + '" alt=""><br>'
+ '<span id="Text' + i + '" class="whitebg 75pc"></span></a>'
+ '</td>'
if (i == upper || (i - lower + 1) % 8 == 0)
{ document.write(windowHtml + '</tr>')
windowHtml = ' ' }
}
document.write('</table>')
}
It generates
<table class="thumbs">
<tr>
<td class="pcenter">
<a href="#1' onclick="newWindow(Slides[0],Captions[0])"
onmouseover="toolTip(tt_larger,this)">
<img id="Thumbs1" alt=""><br>
<span id="Text1" class="whitebg sz13"></span></a>
</td>
<!-- repeated another 37 times, incrementing the counter, except that
every 8th occurrence has </tr><tr> added -->
</tr>
</table>

The images and captions are inserted by this function
function LoadThumbs()
{
for (i = 0 ; i < Slides.length ; i++)
{
document.images["Thumbs" + (i + 1)].src = Thumbnails
document.getElementById("Text" + (i + 1)).innerHTML=
'<span class="whitebg">' + (i + 1) + '. ' + Captions + '</span>'
}
}
(Now I see this, I will probably put this functionality into
writeSlide() - it doesn't have to be a separate function)

Classes used are:
.sz13 {font-size: 13px; }
.pcenter {text-align: center; }
.whitebg {background-image: url(""); background-color: white; }

The function toolTip() is just that.
The function newWindow() is the one that doesn't work in Firefox.
function newWindow(img,caption)
{
new function testit()
{
var imageToLoad = new Image()
imageToLoad.src = img
var h = imageToLoad.height
var w = imageToLoad.width
var windh = h + 50
// check to see if we have the dimensions and if not, wait 0.5 second
and go back
if (h*w == 0)
setTimeout('testit()',500)
else
spawnJimcoPopup
('picture.html?picture=' + img + '&amp;caption=' + caption
+ '&amp;height=' + h + '&amp;width=' + w
, '_blank'
,
'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no'
, windh,w,'center','0','pixel')
}
}
In IE6 it opens the image in a new window sized according to the size of
the image. I need to figure out why it doesn't work in Firefox.

I guess this is too much info. Anyway, I will update all the web code from
my local copy to make sure you see the same thing

 

[Trevor L.]

Try it on a new page (i.e., eliminate the noise). You'll see....

Thanks and congrats on MVP status

Are you saying:
Strip out all the JS and just put plain HTML on a page and then see what
happens.

If so, I'll give it a go tomorrow - will have to eat dinner and watch TV
with the wife soon - 1815 Sat here (AUS)

 

[Murray]

Thanks, Trevor. Yeah - that's what I'm saying. However, I would just
create a new page and do a minimal test rather than alter an existing page.

 

[Trevor L.]

Thanks, Trevor. Yeah - that's what I'm saying. However, I would just
create a new page and do a minimal test rather than alter an existing
page.

Murray,
I tried creating a new page, but some link didn't work, so I couldn't see
what happened after visiting a link.

I should have made the new page even simpler, but I decided to just change
the link colours to something more obvious and try it on the existing site.

My CSS was
a {text-decoration: underline; }
a:link {color: blue; }
a:visited {color: fuchsia; }
a:hover {color: red; }
a:active {color: green; }

The results were
IE6 FF1.5
link fuschia fuschia
hover red red
active green green
visited green fuschia

This applies to the complicated page and to a simple page like sidebar.html

I seem to recall somewehre that one has to specify these a: psuedo-classes
in the correct order.

Is this what is wrong ?

 

[Murray]

You are confusing yourself.

The links are specified in the correct order, as you show.

Remember that a:active SHOULD only be shown when the mouse button is
'actively' down on the link - however IE will retain that state under
certain circumstances. When you release the mouse button, the pseudo-state
should go to 'visited'. So, you can basically forget about a:active.

You are most likely using "#" for your links, and no doubt, you have visited
that link millions of times in any given day of testing! 8) Try using a
real page link.

Now see what happens when a) you use a real page link, and b) you ignore
a:active. You would get this -

 

[Trevor L.]

Replies in-line

You are confusing yourself.

I wish I could remove my confusion

The links are specified in the correct order, as you show.
Great

Remember that a:active SHOULD only be shown when the mouse button is
'actively' down on the link - however IE will retain that state under
certain circumstances. When you release the mouse button, the
pseudo-state should go to 'visited'. So, you can basically forget
about a:active.

I see the active colour change when I left click. After something happens,
it changes. That's fine

You are most likely using "#" for your links, and no doubt, you have
visited that link millions of times in any given day of testing! 8) Try
using a real page link.

Yes, on some pages I am.

But I have a page - sidebar.html - which *only* has real page links such as
<a href="siteinfo.html">
<img src="images/display/info.gif"
alt="" width="60" height="40" />

Now see what happens when a) you use a real page link, and b) you
ignore a:active. You would get this -

These are the results I would expect. If only I could get them !

When my CSS was
a {text-decoration: underline; }
a:link {color: blue; }
a:visited {color: fuchsia; }
a:hover {color: red; }
a:active {color: green; }


the links on sidebar.html do this
IE6 FF1.5
link fuschia fuschia
hover red red
active green green
visited green fuschia

They do the same on other pages.

My code is available on the website quoted below (except that I only change
the link colours for testing)

 

[Murray]

Trevor:

I think you need more motion on that page....

Remove this from your pages -

<?xml version="1.0" encoding="UTF-8"?>

You don't need it, and it will push IE into quirks mode (as does anything
above the doctype).

The CSS active on all your frames (why are you using frames again?) is like
this -

a {text-decoration: underline; color: #0000cc; } /* a darker blue */

a:link {color: blue; }

a:visited {color: fuchsia; }

There is no a:hover pseudo-class actively defined (it's commented out).

When I click on a link in the navigation frame, and then refresh the frame,
I get the visited color.

Did I ask why you are using frames? 8)

 

[Trevor L.]

Murray,
Thanks for the feedback.

Replies in-line

Trevor:

I think you need more motion on that page....

I assume this is a sarcastic response to the animations. Yes, point taken
(and with no offense). After finding a new toy, I couldn't stop playing with
it. I must put it back in the toybox )

Remove this from your pages -

<?xml version="1.0" encoding="UTF-8"?>

You don't need it, and it will push IE into quirks mode (as does
anything above the doctype).

I was attempting to have my pages validate as XTML. At one stage, every one
of my pages did validate, but I haven't checked lately. There are only 32
pages so I should do it again.

I thought the <?xml> tag was part of the spec necessary for XHTML. If it
invokes quirks mode, then it is for the bin also. Can you confirm whether it
is or not?

The CSS active on all your frames (why are you using frames again?)
is like this -

a {text-decoration: underline; color: #0000cc; } /* a darker blue */
a:link {color: blue; }
a:visited {color: fuchsia; }

There is no a:hover pseudo-class actively defined (it's commented
out).

The actions I described happened when I commented the above and uncommented
the other code:
/* For testing only
a {text-decoration: underline; }
a:link {color: blue; }
a:visited {color: fuchsia; }
a:hover {color: red; }
a:active {color: green; }
*/

When I click on a link in the navigation frame, and then refresh the
frame, I get the visited color.

All the links in my navigation frame are fuschia. But I test on my local
hard disk web. Perhaps I need to clear some caches somewhere to get them to
reset. I opened my local web for the first time today just as I typed this
and they were still fuschia. Any idea what to clear?

I think I will just have to accept that the colours are working correctly,
and that the problem is in cached files or other temporary stores.

Did I ask why you are using frames? 8)

Yes. I had some good discussion with you last year on the topic, and you
posted some good points on how to remove the frames. But every time I think
about it, it seems too daunting. Many links are set to open in the main
frame and there are other references to the frame structure throughout.

What I should do is work on a copy little by little until I get the same
result as the frame strcuture.

 

[Ronx]

Clear the browser History, this should clear the visited links until
you re-visit.

 

[Murray]

I assume this is a sarcastic response to the animations. Yes, point taken

(and with no offense). After finding a new toy, I couldn't stop playing
with it. I must put it back in the toybox )

I am too transparent! 8)

I thought the <?xml> tag was part of the spec necessary for XHTML. If it
invokes quirks mode, then it is for the bin also. Can you confirm whether
it is or not?

It is not required for XHTML validation.

I think I will just have to accept that the colours are working correctly,
and that the problem is in cached files or other temporary stores.

I think they are working correctly. What happens when you publish the
pages?

What I should do is work on a copy little by little until I get the same
result as the frame strcuture.

There you go. And it's really not as daunting as you think.

Create a page. Use the navigation frame as an include file. The trick is to
make the page have the infrastructure to hold both the include file *and*
the contents.