No replies
billybrickles
Offline
Regular
London
Last seen: 9 years 49 weeks ago
London
Joined: 2009-01-18
Posts: 26
Points: 0

Hi,

here is the Link http://www.doratorekibarnett.com/galleries.html

I have been stressing over trying to get an image gallery with hover states to work without Java Script etc.

I finally thought I had the solution and I do in every browser except IE.

Hover over the first two thumbnailss and a larger Jpeg should display centrally in the screen, in IE it is right down the bottom of the page.

The absolute on the span shoud mean that it is in the same position univreally, no?

Help!

Any other tips would also be great!!!

BB

@charset "utf-8";
/* CSS Document */
 
 
img
{  border-style: none;
}
 
p {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #FFFFFF;
}
 
a {
	text-decoration:none;
	color: #FFF;	
 
}
 
a:visited {
	text-decoration:none
 
}
 
a:hover {
	color:#F0F
 
}
h1 {
	color: #e311fc;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 22px;
	line-height: 25px;
}
 
 
h2 {
	font-size: 24px;
	line-height: 40px;
	color: #333333;
}
 
h3 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 18px;
	color: #666666;
	letter-spacing: 4px;
	margin: 0px;
}	
h4 {
	color: #999999;
	margin: 0px;
}
 
.fltrght {
	float:right;
	display: block;
	height: 70px;
	width: 200px;
	text-align: right;
	padding-top: 30px;
	font-size: 14px;
}
.fltlft {
	float:left;
	height: 100px;
}
 
body { margin:0; padding:0; }
 
body  {
	margin: 0;
	padding: 0;
	text-align: center;
	color: #FFFFFF;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 100%;
	background-color: #0F6;
	background-image: url(../imag/background.gif);
	background-repeat: repeat;
	height: 1000px;
}
#container {
	width: 1000px;
	margin: 0 auto;
	text-align: left;
	background-image: url(../imag/black_back.png);
	background-repeat: repeat;
 
 
 
 
}
 
 
/* Main Divs */
#left {
	float: left;
	width: 270px;
 
}
#mainContent {
	float: left;
	width: 720px;
	margin-bottom: 20px;
} 
 
 
/* Main content divs */
 
#nav {
	float:left;
	width: 700px;
	height: 30px;
	padding-top: 0px;
	padding-right: 20px;
	padding-bottom: 0px;
	text-align: right;
	}
 
#navigationtop {
	height: 90px;
	width: 697px;
	padding-right: 30px;
}
 
#navigationtop p {
	float: right;
	padding-top: 5px;
}
 
 
 
#navigation {
	height: 45px;
	width: 680px;
}
 
#nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border: none;
	list-style-type: none;
	list-style-image: none;
	display: block;
}
#nav li {
	display:inline;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: bold;
	letter-spacing: 3px;
	word-spacing: 20px;
}
#nav li a {
	text-decoration:none;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-weight: bold;
	letter-spacing: 1px;
	color: #FFFFFF;
	display: inline-block;
	padding-right: 4px;
	padding-left: 4px;
 
}
 
#nav a:hover {
	color:#F200D3;
	background-color: #FFFFFF;
	font-size: 15px;
	font-weight: bolder;
	letter-spacing: 1px;
	display: inline-block;
	padding-right: 4px;
	padding-left: 4px;
 
}
#nav a:focus {
	color:#F200D3;
	background-color: #FFFFFF;
	font-size: 15px;
	font-weight: bolder;
	letter-spacing: 1px;
	display: inline-block;
	padding-right: 4px;
	border: 4px solid #FFFFFF;
	padding-left: 4px;
}
 
#photobox {
	float:left;
	width: 680px;
	height:454px;
	margin-top: 20px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 22px;
	display: inline;
	background-repeat: no-repeat;
	padding: 0px;
	vertical-align: middle;
	text-align: center;
	}
 
#logo{
	float: left;
	width: 270px;
	height: 200px;
	background-image: url(../imag/logo.png);
	}
 
#gal_nav {
	float: left;
	width: 250px;
	height: 300px;
	padding-left: 20px;
	font-family: "Times New Roman", Times, serif;
	font-size: 10px;
	color: #666666;
	}
 
#gal_nav img {
	margin-top: 5px;
	margin-right: 5px;
	margin-bottom: 5px;
}
 
 
 
 
#text {
	float: left;
	width: 250px;
	padding-left: 20px;
	padding-right: 0px;
	text-align: left;
	}
 
/* footer stuff */
#footer {
	width: 1000px;
	height: 200px;
	padding-top: 20px;
	clear: both;
	position: relative;
	vertical-align: bottom;
	}
 
#footer_info {
	height: 100px;
	width: 960px;
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #666666;
	text-align: right;
	vertical-align: bottom;
	background-position: bottom;
	margin-right: 20px;
	margin-left: 20px;
	position: relative;
}
 
 
 
 
#phone {
	background-image: url(../imag/phone.png);
	float: right;
	height: 100px;
	width: 100px;
	padding-right: 20px;
}
 
#contact {
	height: 50px;
	width: 20px;
	text-align: right;
	padding-top: 20px;
	line-height: 1px;
	vertical-align: text-bottom;
	float: right;
}
 
#dtb {
	background-image: url(../imag/dtb.jpg);
	float: left;
	height: 96px;
	width: 80px;
}
 
#bot{
	float: left;
	height: 60px;
	width: 960px;
	text-align: center;
	font-size: 15px;
	margin-bottom: 5px;
	margin-top: 10px;
	margin-right: 20px;
	margin-left: 20px;
}
#bot ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border: none;
	list-style-type: none;
	list-style-image: none;
	display: block;
}
#bot li {
	display:inline;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	letter-spacing: 1px;
	word-spacing: 0px;
}
#bot li a {
	text-decoration:none;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: normal;
	letter-spacing: 1px;
	color: #FFFFFF;
	display: inline;
	padding-right: 2px;
	padding-left: 2px;
 
}
 
#bot a:hover {
	color:#F200D3;
	font-size: 10px;
	font-weight: normal;
	letter-spacing: 1px;
	display: inline;
	padding-right: 2px;
	padding-left: 2px;
}
#bot a:focus {
	color:#F200D3;
	background-color: #FFFFFF;
	font-size: 10px;
	font-weight: normal;
	letter-spacing: 1px;
	display: inline;
	padding-right: 2px;
	padding-left: 2px;
}
 
#bot p a{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	line-height: 2px;
}
 
/* extra info */
 
.clearfloat {
	clear:both;
}
 
 
.thumbnail img{
margin: 0 5px 5px 0;
}
 
.thumbnail:hover{
background-color: transparent;
}
 
.thumbnail:hover img{
 
}
 
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
padding: 5px;
left: -1000px;
visibility: hidden;
color: black;
text-decoration: none;
}
 
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
 
}
 
.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 130px;
left: 599px; /*position where enlarged image should offset horizontally */
 
}
 
 
		/*landscape */
 
 
.thumbnail1 img{
margin: 0 5px 5px 0;
}
 
.thumbnail1:hover{
background-color: transparent;
}
 
.thumbnail1:hover img{
 
}
 
.thumbnail1 span{ /*CSS for enlarged image*/
position: absolute;
padding: 5px;
left: -1000px;
visibility: hidden;
color: black;
text-decoration: none;
}
 
.thumbnail1 span img{ /*CSS for enlarged image*/
border-width: 0;
 
}
 
.thumbnail1:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 130px;
left: 413px; /*position where enlarged image should offset horizontally */
z-index: 50;
}
 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dora Toreki Barnett Photography - London - Fashion - Film - Portrait</title>
<link href="CSS/dtb.css" rel="stylesheet" type="text/css" />
<link rel="alternate stylesheet" title="dtb_white" href="CSS/dtb_white.css" type="text/css" />
<script type="text/javascript" src="styleswitcher.js"></script>
<!--[if lte IE 6]>
 <script type="text/javascript" src="supersleight.js"></script>
<![endif]-->
 
 
</head>
<div id="container">
  <div id="left"> <a href="index.html">
    <div id="logo"></div>
    </a>
    <div id="gal_nav"><a class="thumbnail" href="#thumb"><img src="imag/photos/Thumbnails/Portfolio/portfolio_1.gif" width="55" height="55" /><span><img src="imag/photos/portfolio portarait/portfolio_1.jpg" /></span></a> <a class="thumbnail" href="#thumb"><img src="imag/photos/Thumbnails/Portfolio/portfolio_2.gif" width="55" height="55" /><span><img src="imag/photos/portfolio portarait/portfolio_2.jpg" /></span></a><img src="imag/photos/Thumbnails/Portfolio/portfolio_3.gif" width="55" height="55" /><img src="imag/photos/Thumbnails/Portfolio/portfolio_4.gif" width="55" height="55" /><img src="imag/photos/Thumbnails/Portfolio/portfolio_5.gif" width="55" height="55" /><img src="imag/photos/Thumbnails/Portfolio/portfolio_6.gif" width="55" height="55" /><img src="imag/photos/Thumbnails/Portfolio/portfolio_7.gif" width="55" height="55" /><img src="imag/photos/Thumbnails/Portfolio/portfolio_8.gif" width="55" height="55" /></div>
    <div id="text">
      <h1> Welcome to dtb
        Photography</h1>
      <p>Every freelance in this Directory has been accepted into the National Union of Journalists as a professional. You as a professional editor will want to treat them properly: the NUJ expects those who commission freelances through this Directory to adhere to professional </p>
    </div>
  </div>
  <div id="mainContent">
    <div id="navigationtop">
      <p> Viewing Options > <a href="styleswitch.html" onclick="activeCSS('dtb_white'); return false"> Daylight </a>| <a href="styleswitch.html" onclick="activeCSS('enter'); return false"> Nightlight </a> </p>
    </div>
    <div id="nav">
      <ul class="nav">
        <li><a href="acc.html">HOME </a></li>
        <li><a href="contact.php">GALLERIES </a></li>
        <li><a href="contact.php">LINKS </a></li>
        <li><a href="contact.php">ABOUT </a></li>
        <li><a href="contact.php">CONTACT </a></li>
        <li></li>
      </ul>
    </div>
    <div id="photobox"></div>
  </div>
  <div id="footer">
    <div id="footer_info">
      <div id="dtb"> </div>
      <div id="phone"></div>
      <p class="fltrght"> <strong> Contact </strong> <br />
        07788808937 <br />
        <a href="mailto: </p>
<script type="text/javascript">eval(unescape('%64%6f%63%75%6d%65%6e%74%2e%77%72%69%74%65%28%27%3c%61%20%68%72%65%66%3d%22%6d%61%69%6c%74%6f%3a%64%6f%72%61%40%64%6f%72%61%74%6f%72%65%6b%69%62%61%72%6e%65%74%74%2e%63%6f%6d%22%3e%64%6f%72%61%40%64%6f%72%61%74%6f%72%65%6b%69%62%61%72%6e%65%74%74%2e%63%6f%6d%3c%2f%61%3e%27%29%3b'))</script><p> "> </p>
<script type="text/javascript">eval(unescape('%64%6f%63%75%6d%65%6e%74%2e%77%72%69%74%65%28%27%3c%61%20%68%72%65%66%3d%22%6d%61%69%6c%74%6f%3a%64%6f%72%61%40%64%6f%72%61%74%6f%72%65%6b%69%62%61%72%6e%65%74%74%2e%63%6f%6d%22%3e%64%6f%72%61%40%64%6f%72%61%74%6f%72%65%6b%69%62%61%72%6e%65%74%74%2e%63%6f%6d%3c%2f%61%3e%27%29%3b'))</script><p> </a><a></a> </p>
    </div>
    <div id="bot">
      <ul class="sidebar">
        <li><a href="index.html">home | </a></li>
        <li><a href="galleries.html">galleries</a></li>
        <li><a href="links.html">| links</a></li>
        <li><a href="about.html">| about</a></li>
        <li><a href="contact.html">| contact</a></li>
        <li><a href="site_map.html">| site map</a></li>
        <li><a href="copywright.html">| copywright</a></li>
      </ul>
      <p> Designed and Developed by <a href="http://www.scrimshaw-comm.co.uk/">Scrimshaw Communications</a></p>
    </div>
  </div>
</div>
</body>
</html>