I have a container that pops up and displays images on a page once a user selects a certain one. This appears fine in chrome, (depending on the resolution), however I have been told in Opera and FF that it can cut off the X (closing symbol) in the corner or even the top of the picture.
I am wondering if there is a way to set the overlay to display according to the size of the image it is opening and have it show centered no matter the resolution but cannot figure out how to do it.
<style>
#basic-modal-content {display:none;}
/* Overlay */
#simplemodal-overlay {background-color:#000;}
/* Container */
#simplemodal-container {height:800px; width:800px; color:#bbb; background-color:black; padding:2px;}
#simplemodal-container .simplemodal-data {padding:8px;}
#simplemodal-container code {background:#141414; border-left:3px solid #65B43D; color:#bbb; display:block; font-size:12px; margin-bottom:12px; padding:4px 6px 6px;}
#simplemodal-container a {color:#ddd;}
#simplemodal-container a.modalCloseImg {background:url(../../img/basic/x.png) no-repeat; width:25px; height:29px;
display:inline; z-index:3200; position:absolute; top:-15px; right:-16px; cursor:pointer;}
#simplemodal-container h3 {color:#84b8d9;}
Instead of using width and height values in pixels, could you use percentages(%) which would make it responsive?
There are also autoResize and autoPosition properties which might help with different browsers and resolutions.