Opera +css popup question

css popup not displaying correctly in opera

[bubster]

Hi

I have created a css image popup for a photograph gallery. A main image is loaded into an absolute positioned target triggered by a mouse over from a thumbnail image.

The gallery works fine in ie and firefox but with Opera I have problems with the larger popup image not displaying correctly and creating chopped out layers with other previously displayed images.

I have an image displayed for the background of the target which is defined as #ImageBlok.

Any advice is much appreciated.

A sample of my html for one image is :

<div id="ImageContent">
<div id="ImageBlok"><img src="images/big_image.jpg" width="434" height="360" /></div>
<div id ="swapperBlock">
<div class="popup" id="popupl"><a
href="#"><img
src="images/thumb_nails/small_image01.jpg" width="60" height="60" border="2" /><span><img
src="images/big_image01.jpg" /></span></a>
</div></div></div>

My Css is:

#swapperBlock {
POSITION: relative; FLOAT: left; display: inline; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px 0px 0px 0px; WIDTH: 240px; PADDING-TOP: 0px
}

.popup {
POSITION: relative; FLOAT: left; WIDTH: 260px; DISPLAY: inline
}

.popup A {
WIDTH: 64px; HEIGHT: 64px; COLOR: #FF6600; FLOAT: left; DISPLAY: inline; margin: 0px
}
.popup A:visited {
BORDER-BOTTOM: none
}
.popup A:link {
BORDER-BOTTOM: none
}
.popup A:active {
BORDER-BOTTOM: none
}
.popup A IMG {
BORDER-LEFT-COLOR: white 0px solid; BORDER-BOTTOM-COLOR: white 0px solid; BORDER-TOP-COLOR: white 0px solid; BORDER-RIGHT-COLOR: white 0px solid
}
.popup A SPAN {
DISPLAY: none
}
.popup A:hover {
COLOR: #FF6600; TEXT-INDENT: 0px
}
.popup SPAN IMG {
WIDTH: 434px; HEIGHT:360px
}
.popup A:hover IMG {
BORDER-RIGHT: #FF6600 0px solid; BORDER-TOP: #FF6600 0px solid; BORDER-LEFT: #FF6600 0px solid; BORDER-BOTTOM: #FF6600 0px solid
}
.popup A:hover SPAN {
BORDER-RIGHT: 0px; BORDER-TOP: 0px; DISPLAY: block; MARGIN: 0px; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px; TEXT-ALIGN: center
}
.popup A:hover SPAN IMG {
BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px
}
#popupl A:hover SPAN {
LEFT: 266px; POSITION: absolute; TOP: 0px
}
#popupr A:hover SPAN {
Z-INDEX: 160; LEFT: -384px; POSITION: absolute; TOP: 23px
}
#popupl {
Z-INDEX: 150; POSITION: relative; MARGIN-LEFT: 0px; FLOAT: left; DISPLAY: inline; height: 78px
}
#popupr {
Z-INDEX: 150; LEFT: 625px; POSITION: absolute; TOP: 169px
}

thank you for your help

regards

bub

[DrDoc]

Which version of Opera are we talking?

[bubster]

Hi

Thank you for yor reply. The version of Opera I'm testing in is 7.54.

I cleaned my coding up a little but still having problems.

my html is:

<div id="ImageContent"><div id="ImageBlok"><img src="images/gallery/ascot_form.jpg" /></div>
<div class="popup" id="popupl">
<a href="#"><img src="images/thumb_nails/gtn_01.jpg" alt="Ascot" width="60" height="60" /><span><img src="images/gallery/ascot_form.jpg" alt="Ascot" width="434" height="360"/></span></a>
<</div>
</div>

my css is:

#ImageContent {
float: left;
position: relative;
margin-left: 20px;
margin-top: 0px;
margin-bottom: 20px;
padding: 0;
WIDTH: 700px;
height:360px;
display: inline
}
#ImageBlok {
margin-top: 0px;
float: right;
position: relative;
padding: 0;
WIDTH: 434px;
HEIGHT: 360px;
display: inline
}

.popup {
POSITION: absolute; left: 0px; top: 0px; width: 260px
}

.popup a {
WIDTH: 64px; HEIGHT: 64px; COLOR: #FF6600; FLOAT: left; DISPLAY: inline; margin: 0px
}
.popup a:link {
BORDER-BOTTOM: none
}
.popup a:visited {
BORDER-BOTTOM: none
}
.popup a:hover {
COLOR: #FF6600; TEXT-INDENT: 0px
}
.popup a:active {
BORDER-BOTTOM: none
}
.popup a img {
BORDER-LEFT-COLOR: white 0px solid; BORDER-BOTTOM-COLOR: white 0px solid; BORDER-TOP-COLOR: white 0px solid; BORDER-RIGHT-COLOR: white 0px solid
}
.popup a span {
DISPLAY: none
}
.popup span img {
DISPLAY: block
}
.popup a:hover img {
BORDER-RIGHT: #FF6600 0px solid; BORDER-TOP: #FF6600 0px solid; BORDER-LEFT: #FF6600 0px solid; BORDER-BOTTOM: #FF6600 0px solid
}
.popup a:hover span {
BORDER-RIGHT: 0px; BORDER-TOP: 0px; DISPLAY: block; MARGIN: 0px; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px; TEXT-ALIGN: center
}
.popup a:visited span img {
BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px
}
.popup a:hover span img {
BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px
}
.popup a:active span img {
BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px
}
#popupl a:hover span {
LEFT: 266px; POSITION: absolute; TOP: 0px; WIDTH: 434px; HEIGHT:360px
}

#popupl {
Z-INDEX: 150; POSITION: relative; MARGIN-LEFT: 0px; FLOAT: left; DISPLAY: inline; height: 78px
}

any help much appreciated

is it ok to post a link to a page with the problem?

regards

bub