hey guys,
i've built an image gallery and i'm using the hoverbox css technique if any of you know it
here's mine :
Photo Galleries - Dun Laighaire Marina - Power Boats - Yachts - Berths
if you mouseover the images they should expand..
something along the lines of
.class {display:none;}
.class:hover {display:block}
works fine in opera, firefox, ie7 etc but in ie6 the images don't revert to their normal sizes.
any help is much appreciated.
ps here's the hoverbox css
PHP Code:
.hoverbox
{
cursor: default;
list-style: none;
padding: 0px;
margin: 0px;
}
.hoverbox a
{
cursor: hand;
}
.hoverbox a .preview
{
display: none;
}
.hoverbox a:hover .preview
{
display: block;
position: absolute;
top: -33px;
left: -25px;
z-index: 1;
}
.hoverbox img
{
background: #ffffff;
border-color: #aaa #ccc #ddd #bbb;
border-style: solid;
border-width: 1px;
color: inherit;
padding: 2px;
vertical-align: top;
width: 100px;
height: 67px;
}
.hoverbox li
{
display: inline;
float: left;
margin: 1px;
padding-left: 20px;
position: relative;
width: 112px;
height: 94px;
text-align: center;
line-height: 18px;
}
.hoverbox .preview
{
border-color: #3E96FF;
width: 192px;
height: 128px;
}
and here's my main css
PHP Code:
/* CSS Document */
body{
top: 0px;
background-image: url(../images/waterhead.gif);
background-repeat: repeat-x;
background-position: 0px 0px;
background-color: #00749B;
font-family: arial;
color:#FFFFFF;
}
a {color:#FFFFFF;}
h1 {font-size:13px;
font-weight:bold;
margin: 2px;
margin-left: 0px;
}
.link{
color:#ffffff;
text-decoration:none;
}
.link:hover{
color:#50A4D1;
text-decoration:none;
}
.adminlink{
color:#ffffff;
text-decoration:none;
}
.adminlink:hover{
color:#000066;
text-decoration:none;
}
h2 {font-size:12px;
font-weight:bold;
margin: 2px;
margin-left: 0px;
}
#header {
position:absolute;
margin-left: -400px;
left: 50%;
padding: 0px;
height: 85px;
width: 800px;
top: 20px;
}
.toplink {
list-style-type:none;
font-family:arial;
font-size: 10px;
text-decoration:none;
color:#ffffff;
}
.toplink:hover {
list-style-type:none;
font-size: 10px;
text-decoration:none;
color:#6AB5FF;
}
#topnav {
width: 680px;
margin-left: -305px;
position: absolute;
left: 50%;
height: 10px;
top:65px;
text-align:right;
}
#topnav li {
list-style-type:none;
list-style:none;
margin: 0;
display:inline;
padding-left: 15px;
}
#maincontentborder {
position:absolute;
top: 120px;
background: #2383a3;
width: 840px;
margin-left: -420px;
left:50%;
height: 500px;
background-image:url(../images/botgrad.gif);
background-repeat: repeat-x;
background-position: bottom;
}
#outertopleft {
font-size:4px;
float:left;
width: 10px;
height: 10px;
background-color:#00749B;
background-image:url(../images/tl.gif);
background-repeat:no-repeat;
}
#outertopright {
float:right;
font-size:4px;
width: 10px;
height: 10px;
top: 0px;
margin-right: 0px;
padding-right:0px;
background:url(../images/tr.gif) #00749B no-repeat;
}
#innertl {
float:left;
width: 10px;
height: 15px;
top: 0px;
background-color:#2383a3;
padding: 0px;
overflow:hidden;
background-image:url(../images/tlinner.gif);
background-repeat:no-repeat;
}
#innertr {
position:absolute;
width: 15px;
height: 15px;
top: 0px;
left: 790px;
visibility: visible;
background-color:#2383a3;
background-image:url(../images/trinner.gif);
background-repeat:no-repeat;
}
#mainnav {
margin-top:10px;
margin-left:30px;
width:auto;
}
#mainnav ul {
display:inline;
list-style:none;
list-style-type:none;
padding:0px;
margin-left:0px;
margin-top:0px;
}
#mainnav li {
display:inline;
list-style:none;
list-style-type:none;
padding: 0px;
}
.mainnavlinksplit {
font-size:10px;
color:#50A4D1;
padding-left: 15px;
padding-right: 15px;
bottom: 4px;
}
.mainnavlink{
font-family:Arial;
font-size:14px;
color:#ffffff;
text-decoration: none;
list-style-type:none;
display:inline;
font-weight:bold;
}
.mainnavlink:hover{
font-family:Arial;
font-size:14px;
font-weight:bold;
color:#50A4D1;
text-decoration: none;
list-style-type:none;
display:inline;
}
#maincontent {
position:absolute;
top: 20px;
background: #00749B;
width: 800px;
margin-left: -400px;
left:50%;
height: 142%;
margin-bottom:0px
}
#content1 {
height: auto;
}
.content2 {
float:left;
position:relative;
margin-top:10px;
width: 450px;
height: auto;
background-color:#2383a3;
}
#sidecontent1 {
height: auto;
background-color:#2383a3;
}
.sidecontent2 {
margin-top:10px;
height: auto;
background-color:#2383a3;
}
.conttl {
width: 10px;
height: 10px;
font-size: 4px;
margin-top: 0px;
float: left;
background-color:#00749B;
padding: 0px;
background-image:url(../images/tl.gif);
background-repeat:no-repeat;
}
.contbl {
width: 10px;
height: 10px;
bottom: 0px;
font-size: 4px;
left: 0px;
background-color:#00749B;
padding: 0px;
background-image:url(../images/bl.gif);
background-repeat:no-repeat;
}
.conttr {
width: 10px;
height: 10px;
font-size: 4px;
margin-top: 0px;
float: right;
background-color:#00749B;
padding: 0px;
background-image:url(../images/tr.gif);
background-repeat:no-repeat;
}
.contbr {
width: 10px;
height: 10px;
float:right;
margin-top: -10px;
font-size: 4px;
background-color:#00749B;
padding: 0px;
background-image:url(../images/br.gif);
background-repeat:no-repeat;
}
.contenttext {
position:relative;
padding: 10px;
font-size: 12px;
text-align:justify;
}
#leftcontents {
float:left;
margin-top: 10px;
margin-left: 20px;
width: 450px;
height:auto;
display:inline;}
#rightcontents {
float:left;
width: 290px;
display:inline;
height:auto;
padding-left:20px;
padding-top:10px;
}
#whatnetworks {
clear:both;
font-size:9px;
padding-top:10px;
}
.smalltext { font-size:10px;}
#centrecontents {
float:left;
width: 820px;
display:inline;
height:auto;
padding-left:20px;
padding-top:10px;
}
.centrecontent {
margin-top:10px;
width: 760px;
height: auto;
background-color:#2383a3;
}
17-09-2007, 09:05 PM
ie6 css :hover display:block; issue 
Linear Mode
