Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    New Coder
    Join Date
    Dec 2005
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Transparency working in FF but not IE // onmouseon class

    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:

    Code:
    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

  • #2
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    CSS hexdec colours need to be prefixed by a hash mark.

    e.g.
    Code:
    border-color: #fd5be4;

  • #3
    New Coder
    Join Date
    Dec 2005
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I've done that, but it doesn't seem to have changed.

  • #4
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    I've done that, but it doesn't seem to have changed.
    The version currently online doesn't have the # in the CSS declarations.

    Quote Originally Posted by odg.css
    Code:
    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 and correcting all the 'errors' it returns (apart from the ones involving opacity). Fixing the 'warnings' is not strictly necessary though.
    Last edited by Bill Posters; 12-16-2005 at 04:44 PM.

  • #5
    New Coder
    Join Date
    Dec 2005
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    still nothing

  • #6
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    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…
    Code:
    <!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 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.

  • #7
    New Coder
    Join Date
    Dec 2005
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    *EDIT* sorry, I realised what I posted was probably quite insulting to your intelligence

    Code:
    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.
    Last edited by thedanster; 12-16-2005 at 06:31 PM.

  • #8
    New Coder
    Join Date
    Dec 2005
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    These are the errors I got

    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 : ;}


  • #9
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    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.
    Code:
    <!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
    Code:
    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
    Code:
    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.
    Code:
    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,resizable=no';
    	galleryWin = window.open(url,'gallWin',winFeatures);
    
    }
    Last edited by Bill Posters; 12-17-2005 at 11:44 AM.

  • #10
    New Coder
    Join Date
    Dec 2005
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #11
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    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.
    Last edited by Bill Posters; 12-18-2005 at 02:23 PM.

  • #12
    New Coder
    Join Date
    Dec 2005
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #13
    New Coder
    Join Date
    Dec 2005
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #14
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    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.
    Last edited by Bill Posters; 12-20-2005 at 09:39 AM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •