Vertical Align prettyPhoto Window to Center Of Screen Trouble

StackOverflow https://stackoverflow.com/questions/21907172

Question

I have a problem with aligning PrettyPhoto window to center of screen vertically in Chrome, Mozilla or Safari. It is fine in IE. I'll be pleased if you help why it has happened and how I can solve it.

I checked that the reason of the trouble is calculated top value of loaded prettyPhoto window.

Related Line of Source Code in Chrome, Mozilla, Safari:

<div class="pp_pic_holder light_rounded" style="top: 1236.5px; left: 542.5px; display: block; width: 180px;">

Related Line of Source Code in IE:

<div class="pp_pic_holder light_rounded" style="left: 542px; top: 199.5px; width: 180px; display: block;">

I also added the source code parts below that can help you to troubleshoot the problem.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" lang="tr">
<head>
<link rel="stylesheet" href="../css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<link href="../css/tema.css" rel="stylesheet" type="text/css">

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="../js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="urundetayresim"><ul class="gallery">
<li>
<a href="images/urunler/bu353_1s4.jpg" rel="prettyPhoto[gallery1]"><img src="images/urunler/bu353_1s4.jpg" alt="Bu-353 S4 Usb GPS Alıcısı Sirf Star 4 Chipset" width="240" height="240" /></a>
</li><li>
<a href="images/urunler/bu353_2.jpg" rel="prettyPhoto[gallery1]"><img src="images/urunler/bu353_2.jpg" alt="Bu-353 S4 Usb GPS Alıcısı Sirf Star 4 Chipset" width="240" height="195" /></a>
</li><li>
<a href="images/urunler/bu353_3.jpg" rel="prettyPhoto[gallery1]"><img src="images/urunler/bu353_3.jpg" alt="Bu-353 S4 Usb GPS Alıcısı Sirf Star 4 Chipset" width="240" height="234,146341463" /></a>
</li></ul></div>

<script type="text/javascript" charset="utf-8">
jQuery(document).ready(function() {
    jQuery('#urundetaydetaybilgi2').hide();
    //jQuery(".fancybox").fancybox();
    jQuery(".gallery:first a[rel^='prettyPhoto']").prettyPhoto({
    allow_resize: true, /* Resize the photos bigger than viewport. true/false */
    default_width: 500,
    default_height: 344,
    theme: 'light_rounded',
    deeplinking: false  
    });
});
</script>
</body>
</html>
Was it helpful?

Solution

Do you realy need doctype to be transitional?

try using 4.01 strict:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

or use HTML 5 using simply:

<!DOCTYPE html>

I think this might solve your problem with no need to edit the css or javascript.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top