Я пытаюсь, чтобы мой веб-сайт с фотографиями работал правильно во всех основных браузерах (IE8, FF, Chrome), и до сих пор он отлично работает в последних двух, но некоторые навигационные элементы не появляются в IE8 или 9, несмотря на все мои усилия.
Вы можете видеть то, о чем я говорю, например: http://element17.com/index.php?level=picture&id=88
В левой и правой части изображения размером 100px при наведении курсора мыши должны отображаться стрелки, позволяющие переходить к предыдущему и следующему изображениям в альбоме соответственно. В Firefox и Chrome они появляются и работают так, как задумано. В IE8 / 9, однако, они не будут отображаться. Вся остальная информация при наведении отображается правильно.
<?php plogger_get_header(); ?>
<div id="big-picture-container">
<?php if (plogger_has_pictures()) : while(plogger_has_pictures()) :
plogger_load_picture();
$picture_caption = trim(plogger_get_picture_caption());
$detail_link = plogger_get_detail_link();
$prev_link = plogger_get_prev_picture_link();
$next_link = plogger_get_next_picture_link();
if ($picture_caption != '' || !isset($picture_caption)); ?>
<div class="picture-holder" style="width:<?php echo get_image_width(plogger_get_picture_id()); ?>;height:<?php echo get_image_height(plogger_get_picture_id()); ?>;">
<div class="hovering" style="position: absolute;margin: 0px;padding: 0px;top: 0px;left: 0px;z-index: 1000;width:<?php echo get_image_width(plogger_get_picture_id()); ?>;height:<?php echo get_image_height(plogger_get_picture_id()); ?>;">
<div class="exif-data">
<?php $wallpath = "";
$wallpath .= "plog-content/images/wallpaper/";
$wallpath .= $picture_caption;
$wallpath .= "Wide.jpg";
if (file_exists($wallpath)) {
echo "<span style='position:absolute; margin-top:1px;'><a href='plog-content/images/wallpaper/"; echo $picture_caption; echo "Wide.jpg'><img src='plog-content/images/wide.png' /></a></span><span style='position:absolute; margin-left:20px;'><a href='plog-content/images/wallpaper/"; echo $picture_caption; echo "Full.jpg' style='display:inline;'><img src='plog-content/images/full.png' /></a></span>";
}
$wallpath = ""; ?>
<h2><?php echo $picture_caption; ?></h2>
<?php echo plogger_get_picture_date(); ?><br />
<div class="exif"><?php echo generate_exif_table(plogger_get_picture_id()); ?></div>
</div>
<?php echo $prev_link; ?>
<?php echo $next_link; ?><img class="photos-large" src="<?php echo plogger_get_picture_thumb(THUMB_LARGE); ?>" alt="<?php echo $picture_caption; ?>" /></div>
</div>
</div>
</div>
<?php endwhile; else : ?>
<p>No such image</p>
<?php endif; plogger_get_footer(); ?>
Я прошу прощения за грязные встроенные стили и тому подобное ... Я все еще пытаюсь убрать часть этого, но я не верю, что что-то из этого будет уместно. Вы также можете увидеть таблицу стилей здесь: http://www.element17.com/plog-content/themes/diffuser/gallery.css; Я также прошу прощения за это. : \
Кто-нибудь может понять, почему это может происходить? Я играл с z-индексами, порядком тегов и всем, что только могу придумать, и не могу представить, почему это происходит.
Спасибо всем!
EDIT:
Вот окончательно обработанный HTML, согласно запросу:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>City (Constructs, 2010) - Element17 Photography</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="imagetoolbar" content="false" />
<meta name="keywords" content="City" />
<meta name="description" content="" />
<link rel="stylesheet" type="text/css" href="http://element17.com/plog-content/themes/diffuser/gallery.css" />
<script type="text/javascript" src="http://element17.com/plog-content/themes/diffuser/dynamics.js"></script>
</head>
<body>
<div id="centering">
<div id="wrapper">
<div id="header"><table width="100%"><tr><td><a href="index.php"><img src="./plog-content/themes/diffuser/images/logo.png" alt="Element17 Photography" /></a></td><td align="right"><div id="breadcrumb-links"><a href="http://element17.com/index.php">Home</a> » <a accesskey="/" href="http://element17.com/index.php?level=collection&id=5">Constructs</a> » <a accesskey="/" href="http://element17.com/index.php?level=album&id=12">2010</a> » <span id="image_name"><strong>City</strong></span></div></td></tr></table></div>
<div id="main-container">
<div id="big-picture-container">
<div class="picture-holder" style="width:631px;height:950px;">
<div class="hovering" style="position: absolute;margin: 0px;padding: 0px;top: 0px;left: 0px;z-index: 1000;width:631px;height:950px;">
<div class="exif-data">
<h2>City</h2>
March 20, 2010<br />
<div class="exif"> Nikon D300, Tamron SP AF 17-50mm f/2.8 XR DiII VC @ 17 mm, f/9, 1/320 sec, ISO 200
</div>
</div>
<a id="prev-button" href="http://element17.com/index.php?level=picture&id=87"> </a> <a id="next-button" href="http://element17.com/index.php?level=picture&id=96"> </a><img class="photos-large" src="http://element17.com/plog-content/images/constructs/2010/20100320-dsc_5688.jpg" alt="City" /></div>
</div>
</div>
</div>
<div id="footer">
<div id="link-back">The photography and design of element17.com is copyright <b>© 2007-2011</b> by <b><a href="mailto:steve@element17.com">Steve Gaucher</a></b> and may not be reproduced/republished in any manner without prior consent.</div></div>