matt-dublin
New Member
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
and here's my main css
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:
.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:
/* 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;
}