problem with Opera?

HDaddy Active Member

Messages:: 287

Likes Received:: 6

Best Answers:: 0

Trophy Points:: 60

#1

Hi!

IÂ´m making a website for my friends band. And i have a thing i found in Dynamic Drive inserted in the site. The thing doesnÂ´t work in Opera at all. Here is a link to the page.

http://koti.mbnet.fi/thinner/epistemp/band.html

Allthough itÂ´s in finnish i think you know whatÂ´s the problem. The photo-pop-up doesnÂ´t work at all in Opera, but works fine in IE and FF. I canÂ´t figure it out.
If you could help me it would be more than great!


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
  "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<link rel="stylesheet" type="text/css" href="epis.css" media="screen"/>
<title>.:EPÃ„REILU EVOLUUTIO:.</title>
<link rel="shortcut icon" href="/favicon.ico" />
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_openBrWindow(theURL,winName,features) { //v2.0
  window.open(theURL,winName,features);
}
//-->
</script>
</head>
<body>

<div id="container"/>
	<div id="left">
	<div id="header">
	<div id="map">
	<a href="index.html" id="koti"><i>EPÃ„REILU EVOLUUTIO</i></a>
	</div>
	</div>
	<div id="navigation">
	<ul id="navi">
    <li id="band"><a href="band.html"></a></li>
    <li id="historia"><a href="historia.html"></a></li>
    <li id="media"><a href="media.html"></a></li>
    <li id="linkit"><a href="linkit.html"></a></li>
	<li id="vkirja"><a href="#"onClick="MM_openBrWindow('http://www.shinybook.net/book/?vk=43967','vieraskirja','scrollbars=yes,width=510,height=600')"></a></li>
  </ul>
	</div>	
	<div id="empty">
	</div>
	<div id="playercontainer">
	<div id="player">
					<object type="application/x-shockwave-flash" width="250" height="15"
data="http://koti.mbnet.fi/thinner/epistemp/xspf_player_slim.swf?playlist_url=http://koti.mbnet.fi/thinner/epistemp/soittis.xspf">
<param name="movie" 
value="http://koti.mbnet.fi/thinner/epistemp/xspf_player_slim.swf?playlist_url=http://koti.mbnet.fi/thinner/epistemp/soittis.xspf" 

/>
</object>
  
	</div>
	</div>
	</div>
	
	<div id="right"/>
		<div class="content">
		<div class="bandi">
		</div>
		
		<p class="titteli">Nykyinen kokoonpano:</p>
		<p class="band">

<a class="thumbnail" href="#thumb">Sam<span><img src="kuvat/leftb.jpg" alt="sami" /></span></a><br/>
<a class="thumbnail" href="#thumb">Mankku<span><img src="kuvat/leftb.jpg" alt="mankku" /></span></a><br/>
<a class="thumbnail" href="#thumb">Timberlake<span><img src="kuvat/leftb.jpg" alt="Timo" /></span></a><br/>
<a class="thumbnail" href="#thumb">Sallinen<span><img src="kuvat/leftb.jpg" alt="Sallinen" /></span></a><br/>
<a class="thumbnail" href="#thumb">Kuppa<span><img src="kuvat/leftb.jpg" alt="Kuppa" /></span></a><br />

</p>
</div>


		
		
	
	
</body>
</html>

HTML:




p {margin: 5px 5px 5px 5px;}



body {
	background: #000;
	color: #FFF;
	text-decoration: none;
}

	

#container	{		
	background: transparent;
	margin: 0 auto;
	width: 775px;
	height: 600px;	
}

/* navigation*/

#navigation {
	float:left;
	background:;
	margin: 0 0 0 0;
	width: 380px;
	height: 59px;
}
	
#navi {
    width: 380px; height: 59px;
    background: url(kuvat/navi.jpg);
    margin: 0 ; padding: 0;
    position: relative;}
  #navi li {
    margin: 0; padding: 0; list-style: none;
    position: absolute; top: 0;}
  #navi li, #navi a {
    height: 59px; display: block;}
	
	#band {left: 0; width: 118px;}
	#historia {left: 119px; width: 79px;}
	#media {left: 199px; width: 67px;}
	#linkit {left: 267px; width: 40px;}
	#vkirja {left: 308px; width: 71px;}
	 
  
  
  #band a:hover {
    background: transparent url(kuvat/navi.jpg)
   0px -59px no-repeat;}
   #historia a:hover {
    background: transparent url(kuvat/navi.jpg)
	-119px -59px no-repeat;}
   #media a:hover {
    background: transparent url(kuvat/navi.jpg)
   -199px -59px no-repeat;}
   #linkit a:hover {
    background: transparent url(kuvat/navi.jpg)
	-267px -59px no-repeat;}
   #vkirja a:hover {
    background: transparent url(kuvat/navi.jpg)
   -308px -59px no-repeat;}
   
/* contents*/

#left {
	background:transparent;
	width:371px;
	height:600px;
	float: left;
	}
#header {
	float: left;
	background:url(kuvat/header.jpg) no-repeat;
	margin: 0 0 0 0;
	width: 380px;
	height: 141px;
	text-decoration: none;
}
#map {
	position: absolute;
	height: 43px;
	width: 273px;
	margin: 85px 0 0 60px;
	font-size: 1.6em;
	text-decoration: none;
  }
#map a i {
		visibility:hidden;
		text-decoration:none;
		
}
a#koti { 
		left: ;
		text-decoration: none;
}

#empty {
	background:url(kuvat/leftb.jpg) no-repeat;
	float: left;
	color: #D8CDCD;
	margin: 0 0 0 0;
	font: normal 0.8em "Trebuchet MS";
	width: 380px;
	height: 299px;
}
#playercontainer { 
		background:url(kuvat/playerbg.jpg) no-repeat;
		margin: 0 0 0 0;
		color: #D8CDCD;
		float:left;
		width: 380px;
		height: 101px;
		line-height: 5px;
		font:bold 0.6em "Trebuchet MS";
}
#player {
		background: transparent;
		padding: 25px 0 0 70px;
		margin: 0 0 0 0;
		float: left;
		width: 250px;
		height: 15px;
}
#right {
	background:url(kuvat/right.jpg) no-repeat;
	width:395px;
	height:600px;
	float: right;
	}
	
.content {
	background:transparent;
	 color: #FFF;
	float: left;
	padding:0 0 0 0px;
	margin: 100px 0 0 0;
	width: 317px;
	height: 437px;
	overflow: auto;
}
.content a {
	color: #FFF;
	text-decoration: none;
}


/* text and image stuff*/

p.titteli {
	margin:0 0 0 0;
	padding:10px 0 0 50px;
	font: bold 0.7em "Trebuchet MS";
	color: #FFF;
}
p.cont { 
	margin:0 0 0 30px;
	padding:10px 20px 20px 20px;
	font: bold 0.6em "Trebuchet MS";
	color: #fff;
}
p.band { 
	margin:0 0 0 0;
	font: bold 0.6em "Trebuchet MS";
	line-height: 20px;
	padding:15px 0 0 50px;
	color: #fff;
}
.news {
	background: url(kuvat/news.gif) no-repeat;
	width: 135px;
	height: 35px;
	margin: 15px 0 0 25px;
}

.bandi {
	background: url(kuvat/band.gif) no-repeat;
	width: 135px;
	height: 35px;
	margin: 15px 0 0 25px;
}
.historia {
	background: url(kuvat/historia.gif) no-repeat;
	width: 135px;
	height: 35px;
	margin: 15px 0 0 25px;
}
.media {
	background: url(kuvat/media.gif) no-repeat;
	width: 135px;
	height: 35px;
	margin: 15px 0 0 25px;
}
.linkit {
	background: url(kuvat/linkit.gif) no-repeat;
	width: 135px;
	height: 35px;
	margin: 15px 0 0 25px;
}

/*gallery*/

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: [url]http://www.dynamicdrive.com/style/[/url] */

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: black;
padding: 5px;
left: 100px;
border: 2px solid white;
visibility: hidden;
color: white;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 208px;
left: 700px; /*position where enlarged image should offset horizontally */

}

</style>

Code (markup):

Some of the things in css and html files are in finnish, so hope you will understand anyway.

Thanks in advance!

HDaddy

HDaddy, Jun 17, 2007 IP

Dan Schulz Peon

Messages:: 6,032

Likes Received:: 436

Best Answers:: 0

Trophy Points:: 0

#2

It's the code used by Dynamic Drive, not the browser. Also bear in mind you shouldn't use XHTML 1.1 served with a text/html MIME type (if you're going to do that, you MUST use XHTML 1.0).

Dan Schulz, Jun 17, 2007 IP

HDaddy Active Member

Messages:: 287

Likes Received:: 6

Best Answers:: 0

Trophy Points:: 60

#3

Thanks for the info. IÂ´m not good with those doctypes at all. DonÂ´t know the difference between them. They although say in Dynamic Drive that the code works in IE6+, FF, and Opera 8+. So why isnÂ´t it working in Opera anyway?

Sorry..it doesnÂ´t say anything with compatibility. I was looking at another pop-up method, The gallery pop-up. Apologies

HDaddy, Jun 17, 2007 IP

Log in or Sign up

problem with Opera?

HDaddy Active Member

Dan Schulz Peon

HDaddy Active Member

Useful Searches