...

View Full Version : Transparency working in FF but not IE // onmouseon class



thedanster
12-16-2005, 03:21 PM
On the gallery for my website www.onlydancinggirls.co.uk (go band > gallery), I'm using a bit of css to make the td's go from 75% opaque to 100% opaque onmouseon, which is working fine in firefox, but when I open it up in IE, there is an ugly white line around each one, when there is no mouseon.

Here is the relevant part from my CSS:


border-style: dotted; border-width:1px; border-color: fd5be4; opacity:1; filter: alpha(opacity=100); -moz-opacity: 1;}

td.border_trans {border-style: dotted; border-width:1px; border-color: fd5be4; opacity:.75; filter: alpha(opacity=75); -moz-opacity: 0.75;}

If anyone could help me with this I would appreciate it immensely.

Also, while I'm asking, is there anyway to make the whole mouseon operation a css class, so that I don't have to put it in with each entry?

Thanks - Dan

Bill Posters
12-16-2005, 03:41 PM
CSS hexdec colours need to be prefixed by a hash mark.

e.g.

border-color: #fd5be4;

thedanster
12-16-2005, 03:53 PM
I've done that, but it doesn't seem to have changed.

Bill Posters
12-16-2005, 04:36 PM
I've done that, but it doesn't seem to have changed.
The version currently online doesn't have the # in the CSS declarations.



td.border {border-style: dotted; border-width:1px; border-color: fd5be4; opacity:1; filter: alpha(opacity=100); -moz-opacity: 1;}

td.border_trans {border-style: dotted; border-width:1px; border-color: fd5be4; opacity:.75; filter: alpha(opacity=75); -moz-opacity: 0.75;}

It appears that almost all other colour values in your CSS file(s) lack the hash mark. You should sort them out too.

It's worth your while passing your CSS files through the W3C CSS Validator (http://jigsaw.w3.org/css-validator/) and correcting all the 'errors' it returns (apart from the ones involving opacity). Fixing the 'warnings' is not strictly necessary though.

thedanster
12-16-2005, 04:57 PM
still nothing :(

Bill Posters
12-16-2005, 05:30 PM
You may need to put IE into 'compliant mode'.
It's generally a good idea to do that anyway.
To do this, add a complete, valid doctype declaration (DTD) at the very top of your page(s).

I'd advise using the HTML 4.01 Transitional doctype…

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

I'm on a Mac, so I'm shooting in the dark with your particular problem with IE/Win.

Fwiw, there are still a number of colours in your CSS without the hash mark and whilst it's unlikely that they are causing the problem, you can't be sure until you correct them.


Fwiw, you should perhaps read this article (http://diveintomark.org/archives/2003/05/05/why_we_wont_help_you) as, tbh, I find myself edging towards a point beyond which I'm less likely to invest more time helping until the page code (namely the markup and css) are made valid.


Once that's sorted, I'll be more than happy to help you out with some javascript that means you won't have to manually insert all those onmouseovers and onmouseouts.

This is not to say that someone else won't step in in the meantime and offer unconditional help.

thedanster
12-16-2005, 06:16 PM
*EDIT* sorry, I realised what I posted was probably quite insulting to your intelligence




body {background-color: #414548;}

a:link {color: #fd5be4;}
a:visited {color: #fe95ef;}
a:active {color: #ffffff;}
a:hover {text-decoration: underline; color: #ffffff;}
a {text-decoration: none;}

div.title {font-family: Verdana, Arial; font-size: 11px; color: #ffffff; font-weight: bold; background-color: #fd5be4;}
div.maintext {font-family: Verdana, Arial; font-size: 10px; color: #ffffff}
div.commtext {font-family: Verdana, Arial; font-size: 10px; color: #ffffff; float: right;}
div.commhead {font-family: Verdana, Arial; font-size: 11px; color: #ffffff; font-weight: bold; background-color: #414548;}

div.livetext {font-family: Verdana, Arial; font-size: 10px; color: #ffffff; background-color: #414548;}
div.livetext2 {font-family: Verdana, Arial; font-size: 10px; color: #ffffff; background-color: #666666;}

div.guesttext {font-family: Verdana, Arial; font-size: 10px; color: #ffffff;}
span.guesttextpink {font-family: Verdana, Arial; font-size: 10px; color: #fd5be4; font-weight: bold;}

td.border {border-style: dotted; border-width:1px; border-color: #fd5be4; opacity:1; filter: alpha(opacity=100); -moz-opacity: 1;}

td.border_trans {border-style: dotted; border-width:1px; border-color: #fd5be4; opacity:.75; filter: alpha(opacity=75); -moz-opacity: 0.75;}



thats my entire CSS now, I can't see any mistakes, and I added the doctype into the frame thats giving me trouble, but that didnt seem to make a difference either. I'll have a look at some of the links you gave.

Anyway I'll read those articles, cheers.

thedanster
12-16-2005, 06:42 PM
These are the errors I got, I'm unsure how to correct the parse errors. Also I ran it through the html validator and that mentioned something about prolog :S any advice would be appreciated.




URI : file://localhost/TextArea

* Line: 20 Context : td.border

Property opacity doesn't exist : 1
* Line: 20 Context : td.border

Parse Error - opacity=100)
* Line: 20 Context : td.border

Parse Error - -moz-opacity: 1;
* Line: 20 Context : td.border

Parse error - Unrecognized : ;}
* Line: 22 Context : td.border_trans

Property opacity doesn't exist : 0.75
* Line: 22 Context : td.border_trans

Parse Error - opacity=75)
* Line: 22 Context : td.border_trans

Parse Error - -moz-opacity: 0.75;
* Line: 22 Context : td.border_trans

Parse error - Unrecognized : ;}

Bill Posters
12-17-2005, 11:24 AM
The errors caused by the opacity properties are unavoidable as the W3C Validator doesn't even yet recognise that the generic opacity property is actually part of the CSS spec.


Anyhoo, I've had a play around with the markup, css and javascript for the gallery page. I've no idea if it'll fix the border issue in IE/Win.
Try swapping in these pages and see for yourself.

HTML.
Tweaked and cleaned up. Inline javascript moved to external file and made more efficient. Also reinstated the hrefs for the thumbs to make them more accessible to non-js users.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Gallery</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script type="text/javascript" src="odg.js"></script>
<link rel="stylesheet" type="text/css" href="odg.css">

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="odg-ie.css">
<![endif]-->

</head>
<body id="gallery">
<table width="100%" cellpadding="0" cellspacing="0" class="container">
<tr>
<td width="100%">
<div class="title">
<center>
{Gallery}
</center>
</div>
</td>
</tr>
<tr>
<td height="100%" valign="top">
<br>
<table width="90%" cellpadding="4" cellspacing="4" align="center" class="thumbs">
<tr align="center">
<td width="76">
<a href="gallery/set1_1.jpg"><img src="gallery/tn/set1_1.gif" alt=""></a>
</td>
<td width="76">
<a href="gallery/set1_2.jpg"><img src="gallery/tn/set1_2.gif" alt=""></a>
</td>
<td width="76">
<a href="gallery/set1_3.jpg"><img src="gallery/tn/set1_3.gif" alt=""></a>
</td>
<td width="76">
<a href="gallery/set1_4.jpg"><img src="gallery/tn/set1_4.gif" alt=""></a>
</td>
</tr>
<tr align="center">
<td width="76">
<a href="gallery/set1_5.jpg"><img src="gallery/tn/set1_5.gif" alt=""></a>
</td>
<td width="76">
<a href="gallery/set1_6.jpg"><img src="gallery/tn/set1_6.gif" alt=""></a>
</td>
<td width="76">
<a href="gallery/set1_7.jpg"><img src="gallery/tn/set1_7.gif" alt=""></a>
</td>
</tr>
</table>
<div class="maintext">
<br>
Various pics of the guys from Dan's Phone... Includes a rare Establishment Rules promo pic.
</div>
<br>
<table width="90%" cellpadding="4" cellspacing="4" align="center" class="thumbs">
<tr align="center">
<td width="76">
<a href="gallery/set2_1.jpg"><img src="gallery/tn/set2_1.gif" alt=""></a>
</td>
<td width="76">
<a href="gallery/set2_2.jpg"><img src="gallery/tn/set2_2.gif" alt=""></a>
</td>
</tr>
</table>
<div class="maintext">
<br>
Liam keeping his cool at a writing session.
</div>
</td>
</tr>
<tr>
<td height="1" bgcolor="fd5be4">
</td>
</tr>
</table>
</body>
</html>


CSS:
I've commented out some parts which appear redundant, such as colours and font sizes which may well be inherited from parent elements by default - meaning you don't have to specify them explicitly.
If it turns out that you do need to set some/all of those properties explicitly, then simply remove the comments /* */ from around those properties.
There's a little rearranging and some new bits at the end which I feel make it more efficient than what was there already.

odg.css

body {
font: 10px Verdana, Arial, sans-serif;
background-color: #414548;
color: #fff;
}

a {
text-decoration: none;
}

a:link {
color: #fd5be4;
}

a:visited {
color: #fe95ef;
}

a:hover,
a:active {
text-decoration: underline;
color: #fff;
}

div.title {
font-size: 11px;
/* color: #fff;*/
font-weight: bold;
background-color: #fd5be4;
}

div.maintext {
/*
font-size: 10px;
color: #fff;
*/
}

div.commtext {
/*
font-size: 10px;
color: #fff;
*/
float: right;
}

div.commhead {
font-size: 11px;
/* color: #fff;*/
font-weight: bold;
background-color: #414548;
}

div.livetext {
/*
font-size: 10px;
color: #fff;
*/
background-color: #414548;
}

div.livetext2 {
/*
font-size: 10px;
color: #fff;
*/
background-color: #666666;
}

div.guesttext {
/*
font-size: 10px;
color: #fff;
*/
}

span.guesttextpink {
/* font-size: 10px;*/
color: #fd5be4;
font-weight: bold;
}


body#gallery table,
body#gallery img {
border: 0;
}

table.container {
height: 100%;
}

table.thumbs td {
border: 1px dotted #fd5be4;
opacity: 0.75;
}

table.thumbs td.border {
opacity: 1;
}

odg-ie.css


table.thumbs td {
filter: alpha(opacity=75);
}

table.thumbs td.border {
filter: alpha(opacity=100);
}

javascript:
Remotely implements the onmouseover, onmouseout events for the thumb table cells as well as the popups for the thumbnail links themselves.

window.onload = init;


function init() {

galleryThumbs();

}


function galleryThumbs() {

if (!document.getElementsByTagName('body')['gallery']) return;

var tables = document.getElementsByTagName('table');
for (t=0; t<tables.length; t++) {
if (tables[t].className && tables[t].className == 'thumbs') {

var thumbcells = tables[t].getElementsByTagName('td');
for (tc=0; tc<thumbcells.length; tc++) {
thumbcells[tc].onmouseover = function() { this.className = 'border'; }
thumbcells[tc].onmouseout = function() { this.className = '' ; }
}

var thumblinks = tables[t].getElementsByTagName('a');
for (tl=0; tl<thumblinks.length; tl++) {
thumblinks[tl].onclick = function() { winPop(this.href); return false; }
}

}
}

}


function winPop(url) {

var winFeatures = 'width=657,height=497,toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resiz able=no';
galleryWin = window.open(url,'gallWin',winFeatures);

}

thedanster
12-17-2005, 06:56 PM
Hmm, that seems to be opening them in the content window rather than popping them up, and the transparency is gone.

I can't do much right now but I'll have a play around with the code on Monday and see what I come out with. Thanks for your help.

Bill Posters
12-18-2005, 02:20 PM
You appear to have the odg-ie.css in the correct place, but it's empty.
Copy/paste the contents of the code area in my previous post which I marked odg-ie.css into your odg-ie.css file, then resave it.

Conversely, you've pasted more than just the code into the odg.js file.
Look at the code I posted again and copy/paste *just* the code within the scrolling code area into the js file and resave it.

Try to pay a bit more attention to what is actually being posted. ;)

thedanster
12-19-2005, 09:11 PM
ah right, sorry about all that. cPanel X and me don't seem to get on too well!

A couple of the images in the gallery (well 1, as it stands at the mo) are different dimensions, if I copy the winpop function and make perhaps winpop2, and change the dimensions, would that open them correctly, or would i have to tweak the code more?

Thanks - Dan.

thedanster
12-19-2005, 09:20 PM
I just made all the changes and it looked to work... until I mouseover-ed, then the white border came back. Are we missing a property in the same vein as alink or vlink, do you think?

Bill Posters
12-20-2005, 09:26 AM
You seem to have introduced a closing </table> tag and it may be that which is causing the issue; maybe not.
Remove it (Line 82) from the online version and check it again. Post the results.

As mentioned before, try to keep an eye on the validity of the markup.


Re: winPop()…

The script has been written to accomodate images of a specific size. It's not quite as simple as adding a second version of winPop function as the browser would need to know which images use which version.

It would have been better had you mentioned earlier that you have images of different sizes to the landscape format you have in the gallery at the moment.



I'll let someone else take over the reins of helping you.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum