I am very new to HTML and CSS3. I am teaching myself as I work on creating a new website. For some reason, my image gallery is not displaying properly in Opera browser. The width of portrait images appears distorted only in Opera, whereas landscape images look fine.
HTML Gallery Image Code
<!-- Gallery Image 1 -->
<div class="thumbox">
<a href="#openphoto1">
<img src="http://www.ghyllfarm.co.uk/_fiddle/image_1_thumb.jpg" width="110" height="110" alt=" ">
</a>
<div id="openphoto1" class="modalDialog">
<div id="landscapephoto">
<a href="#close" title="Close" class="close">X
</a>
<img src="http://www.ghyllfarm.co.uk/_fiddle/image_1.jpg" width="780" height="520" alt=" ">
<div class="photolabel">Landscape Image
</div>
</div>
</div>
</div>
<div class="thumblabel">Click to open
</div>
<!-- Gallery Image 2 -->
<div class="thumbox">
<a href="#openphoto2">
<img src="http://www.ghyllfarm.co.uk/_fiddle/image_2_thumb.jpg" width="110" height="110" alt=" ">
</a>
<div id="openphoto2" class="modalDialog">
<div id="portraitphoto">
<a href="#close" title="Close" class="close">X
</a>
<img src="http://www.ghyllfarm.co.uk/_fiddle/image_2.jpg" height="780" width="520" alt=" ">
<div class="photolabel">Portrait Image
</div>
</div>
</div>
</div>
<div class="thumblabel">Click to open
</div>
CSS Styling
img {
width: 100%;
height: 100%;
width: auto\9; /* ie8 */
}
.thumbox {
width: 110px;
height: 110px;
Margin: 0px auto 0px auto;
}
.thumblabel {
width: 110px;
height: 20px;
Margin: 10px auto 10px auto;
font-family:Tahoma, Geneva, sans-serif;
font-size: 12px;
text-align: center;
color:#060;
}
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.6);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > div {
position: fixed;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
padding: 15px 15px 5px 15px;
border-radius: 10px;
background: #fff;
}
#landscapephoto {
width: 50%;
height: auto;
}
#portraitphoto {
width: auto;
height: 70%;
padding-bottom: 40px;
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover { background: #00d9ff; }
.photolabel {
width: 300px;
height: 20px;
Margin: 10px auto 10px auto;
font-family:Tahoma, Geneva, sans-serif;
font-size: 14px;
text-align: center;
color:#060;
}