4 replies [Last post]
yuza
Offline
Regular
Last seen: 14 years 11 weeks ago
Joined: 2008-10-28
Posts: 15
Points: 0

Just wanted to know if my new site works with all the different browsers, mainly IE and Opera. Seems to work the way I want with Safari and Firefox.

www.yuzacreative.com/test

Thanks for your help:)

Here's the html for main page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<meta name="author" content="Jussi Tarvainen" />
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<meta name="robots" content="all" />
	<title>Yuza Creative: Official art, design and photography of Jussi Tarvainen</title>
<link rel="stylesheet" href="styles.css" type="text/css" media="screen" />
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
</head>
 
 
<body>
<div id="topbanner"><a href="index.html"><img src="layout-img/topbanner.jpg" width="867" height="235" border="0" ALT="Top Banner Graphic"></a></div>
 
<div id="navigation">
<a href="biography.html">biography</a> <b>/</b>
<a href="resumecv.html">résumé & CV</a> <b>/</b>
<a href="fineart.html">fine art</a> <b>/</b>
<a href="design.html">design</a> <b>/</b>
<a href="photography.html">photography</a> <b>/</b>
<a href="contact.html">contact</a> <b>/</b>
<a href="http://yuzacreative.blogspot.com/">blog</a> <b>/</b>
</div>
 
<div id="content">
<p>Welcome to Yuza Creative. This is the Official site dedicated for the art, design and photography of Jussi Tarvainen.<br /><br>
Jussi has recently retired after being a professional snowboarder for 7 years. Now he is ready to pursue his dreams of becoming an independent artist and designer. Jussi has traveled the world since 1998 fallowing the snow and doing freelance designing on the side since 2004.<br />
He's currently available for freelance projects. 
<br />
<br>
Under biography you'll find out about Jussi's life in text and photos. You can also check out his professional snowboard career <a href="http://www.jussitarvainen.com/portfolio"><span class="content">portfolio</span></a>. Fine Art is dedicated to his classical art studies. In the design section you can check out some of the various different designs and concepts Jussi's done over the years. Jussi has been shooting photos for fun during his travels and photography section is a small collection of his favorite photos. Rest is quite self explainatory.
<br /><br />
</p>
 
 
<br>
<br>
<br>
</div>
 
<div id="footer"><img src="layout-img/bottombanner.jpg" width="875" height="42" border="0" ALT="footer"></div> 
<br />
<br />
 
 
 
<div id="bottomborder"></div><div id="topborder"></div>
<div id="leftborder"></div><div id="rightborder"></div>
 
</body>
</html>

and CSS

body {
background-image: url(layout-img/left.jpg);
background-position: 10px 10px;
background-repeat: no-repeat;
background-color: #FFFFFF;
font: normal 13px "Arial", Verdana, Helvetica, sans-serif;
padding: 0;
margin: 54px 10px 10px 10px;
}		
 
 
#bottomborder {
background-image: url(border.gif);
background-repeat: repeat-x;
position: fixed;
bottom: 0;
left: 100%;
width: 100%;
height: 10px;
margin-left: -100%;
}
 
#topborder {
background-image: url(border.gif);
background-repeat: repeat-x;
position: fixed;
top: 0;
left: 100%;
width: 100%;
height: 10px;
margin-left: -100%;
}
 
#leftborder {
background-image: url(border.gif);
background-repeat: repeat-y;
position: fixed;
top: 0;
left: 0;
width: 10px;
height: 100%;
margin: 0;
}
 
#rightborder {
background-image: url(border.gif);
background-repeat: repeat-y;
position: fixed;
top: 0;
right: 0;
width: 10px;
height: 100%;
margin: 0;
}
 
 
 
#topbanner {
height: 235px;
width: 875px;
margin-left:101px;
text-align: left;
}
 
 
#navigation {
width: 867px;
height:40px;
margin-left:107px;
text-align: left;
}
 
 
#content {
width: 860px;
font-family: Verdana; 
font-size: 12px;
text-align: left;
margin-left:110px;
}
 
 
#footer {
width:879px;
margin-left:99px;
}
 
 
h1 {
margin: 0px 0px 5px 0px;
padding: 0px;
color: #5fddd6; 
font-family: Times; 
font-size: 20px; 
}
 
h2 {
margin: 0px 0px 3px 0px;
padding: 0px;
color: #464646; 
font-family: Times; 
font-size: 16px; 
font-weight: bold;
}
 
.passivelink {  
color:#5fddd6; 
font-family: Arial; 
font-size: 15px; 
text-decoration: none;}
 
 
.image {
color: #b9b2ac; border: 8px solid #b9b2ac;
margin: 0px 0px 5px 5px;
}
 
 
a .image {color: #b9b2ac; border: 8px solid #b9b2ac;} 
a:link .image {color: #b9b2ac; border: 8px solid #b9b2ac;}
a:hover .image {color: #625d57; border: 8px solid #625d57;}
a:active .image {color: #b9b2ac; border: 8px solid #b9b2ac;}
a:visited .image {color: #b9b2ac; border: 8px solid #b9b2ac;}
 
 
a .content { color:#5fddd6; font-family: Verdana; font-size: 12px; text-decoration: underline;}
a:link .content { color:#5fddd6; font-family: Verdana; font-size: 12px; text-decoration: underline;}
a:visited .content { color:#5fddd6; font-family: Verdana; font-size: 12px; text-decoration: underline;}
a:active .content { color:#5fddd6; font-family: Verdana; font-size: 12px; text-decoration: underline;}
a:hover .content {  color:#75706a; font-family: Verdana; font-size: 12px; text-decoration: underline;}
 
 
a { color:#75706a; font-family: Arial; font-size: 15px; text-decoration: none;}
a:link { color:#75706a; font-family: Arial; font-size: 15px; text-decoration: none;}
a:visited { color:#75706a; font-family: Arial; font-size: 15px; text-decoration: none;}
a:active { color:#75706a; font-family: Arial; font-size: 15px; text-decoration: none;}
a:hover {  color:#5fddd6; font-family: Arial; font-size: 15px; text-decoration: none;}
 
 
 
 
/* LIGHTBOX */
 
 
#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }
 
#outerImageContainer{ position: relative; background-color: #000000; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }
 
#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}
 
#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(images/nextlabel.gif) right 15% no-repeat; }
 
#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #000000; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }
 
#imageData{	padding:0 10px; color: #FFFFFF; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	
 
#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

yuza
Offline
Regular
Last seen: 14 years 11 weeks ago
Joined: 2008-10-28
Posts: 15
Points: 0

Anyone with Opera, IE 6 or 7?

Anyone with Opera, IE 6 or 7?

Saracen
Offline
Regular
Last seen: 14 years 11 weeks ago
Joined: 2004-06-25
Posts: 14
Points: 0

A working link would help!!

...Or did you want us to copy and paste your code ourselves?

yuza
Offline
Regular
Last seen: 14 years 11 weeks ago
Joined: 2008-10-28
Posts: 15
Points: 0

Yaiks, sorry about that.

Yaiks, sorry about that. Thanks for the heads up Saracen:)

Saracen
Offline
Regular
Last seen: 14 years 11 weeks ago
Joined: 2004-06-25
Posts: 14
Points: 0

Ie7 is fine

Ie6, well I am using the stand alone as a test tool so results can be off, especially when it comes to dhtml. But either way, on the home page the white extends to the margins so theres no gray like there is in IE7 and ff but there are a few odd gray boxes peepeing through at the bottom left of the screen. And the photos/artwork etc. lightbox effect doesnt really work although the pictures do appear on the new level, there is no opacity at all and no visible container box that resizes (although the close link moves so im guessing the actual resizing is happening)