NaOH
16 Feb 2011, 09:54 PM
Hi everyone,
I'm having some trouble getting my website (http://www.element17.com) to behave identically across the most popular web browsers. My reference browser is Chrome, so viewing it in Chrome you can see how it's supposed to look.
In IE8, the site looks perfect (other than no rounded corners, but I know that doesn't work and I'm unwilling to fiddle around with hacks to get what I consider to be a triviality to work in a browser soon to be replaced), but on the actual image pages (http://www.element17.com/index.php?level=picture&id=75 for example), the next and previous picture links do not appear when hovering over the left and right sides of the image. You can see the expected behaviour in Chrome or Firefox.
Here's the relevant PHP+HTML/CSS:
<?php plogger_get_header(); ?>
<div id="big-picture-container">
<?php if (plogger_has_pictures()) : ?>
<?php while(plogger_has_pictures()) : // equivalent to the Wordpress loop ?>
<?php plogger_load_picture();
// set variables for the 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();
?>
<?php if ($picture_caption != '' || !isset($picture_caption)); ?>
<!--<h2 class="date"><?php echo plogger_get_picture_date(); ?></h2>-->
<?php // generate XHTML with picture and link to full raw picture ?>
<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 id="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;'>";
echo "<a href='plog-content/images/wallpaper/"; echo $picture_caption; echo "Wide.jpg'><img src='plog-content/images/wide.png' /></a>";
echo "</span>";
echo "<span style='position:absolute; margin-left:20px;'>";
echo "<a href='plog-content/images/wallpaper/"; echo $picture_caption; echo "Full.jpg' style='display:inline;'><img src='plog-content/images/full.png' /></a>";
echo "</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>
<!--<p id="picture-description"><?php echo plogger_get_picture_description(); ?></p>-->
<!--<div id="exif-toggle-container"><div id="exif_toggle"><?php echo $detail_link; ?></div></div>-->
<!--<div id="comment-section"><?php echo plogger_display_comments(); ?></div>-->
</div>
<?php endwhile; ?>
<?php else : ?>
<p>No such image</p>
<?php endif; ?>
<?php plogger_get_footer(); ?>
* {
margin: 0;
padding: 0;
}
html{
background: #efefef url('images/stripe.png');
overflow-y:scroll;
}
body {
margin: 0;
padding: 0;
}
img {
border: 0;
}
a:link, a:visited {
color: #888;
text-decoration: none;
}
a:hover {
color: #AAA;
}
a:active {
outline:none;}
#centering {
text-align: center;
margin: 10px 0 0;
}
#wrapper {
margin: 0 auto 25px;
padding: 0px;
width: 980px;
/* border: 4px solid #888; */
background: url('images/trans.png');
font: 76% "Lucida Sans",Verdana,"Trebuchet MS",Geneva,Arial,Helvetica,SunSans-Regular,sans-serif;
text-align: left;
-moz-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 3px 3px 10px rgba(0,0,0,0.3);
-webkit-box-shadow: 3px 3px 10px rgba(0,0,0,0.3);
box-shadow: 3px 3px 10px rgba(0,0,0,0.3);
}
#header {
background: url('images/header_back.png');
padding: 5px 10px 5px 10px;
color:#666;
border-bottom:1px solid #666;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
-moz-box-shadow: 3px 3px 10px rgba(0,0,0,0.8);
-webkit-box-shadow: 3px 3px 10px rgba(0,0,0,0.8);
box-shadow: 3px 3px 10px rgba(0,0,0,0.8);
}
#footer {
background: url('images/header_back.png');
color: #666;
clear: both;
margin: 10px 0 0 0;
padding: 10px;
border-top:1px solid #666;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
-moz-box-shadow: 3px 3px 10px rgba(0,0,0,0.8);
-webkit-box-shadow: 3px 3px 10px rgba(0,0,0,0.8);
box-shadow: 3px 3px 10px rgba(0,0,0,0.8);
}
#gallery-name {
color: #888;
font-size: 18px;
font-weight: bold;
}
#main-container {
padding-top:10px;
}
#breadcrumbs {
color: #fff;
clear: both;
margin: 10px 0 0;
padding: 0 25px 0 25px;
font-size: 1.1em;
min-height: 20px;
}
#breadcrumb_links {
float: left;
margin: 0;
padding: 0;
}
#ac-container {
clear: both;
margin: 0;
padding: 0;
}
.exif{
margin-top:8px;
color:#555;
font-size:10px;
}
#thumbnail-container, #big-picture-container {
clear: both;
margin: 0;
padding: 0;
}
#collections {
text-align: left;
margin-left:10px;
}
.collection {
padding: 10px 0;
float: left;
width: 100%;
}
.collection img {
margin:0 auto;
display: block;
}
.collection p {
margin: 4px 0 0 0;
line-height: 1.5em;
}
.collection img:hover {
/* background: #A0B7C9;
border: 1px solid #38c; */
}
#pagination {
height: 1.4em;
width: 100%;
padding: 10px 0 0;
font-size: 1.2em;
}
#inner_wrapper {
}
h2 {
padding: 0;
color: #888;
font-size: 1.4em;
font-weight: 700;
}
#picture-caption {
font-size: 1.4em;
text-align: center;
margin: 6px 0;
}
.date {
padding: 0 0 2px 0;
text-align: center;
font-size: 1.1em;
font-weight: 400;
letter-spacing: 1px;
color: #A0B7C9;
}
#prev-button{
position:absolute;
width: 100px;
top:0px;
bottom:0px;
display: block;
margin:auto 0;
left: 0px;
float: left;
}
#next-button{
position:absolute;
width: 100px;
top:0px;
bottom:67px;
display: block;
margin:auto 0;
right: 0px;
float: right;
}
#prev-button:hover, #prev-button:visited:hover {
background: #111 url('images/arrow-left.png') no-repeat 50% 50%;
filter:alpha(opacity=75);
opacity:.75;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; /*--IE 8 Transparency--*/
color: #AAA;
cursor: pointer;
}
#next-button:hover, #next-button:visited:hover {
background: #111 url('images/arrow-right.png') no-repeat 50% 50%;
filter:alpha(opacity=75);
opacity:.75;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; /*--IE 8 Transparency--*/
color: #AAA;
cursor: pointer;
}
.picture-holder {
clear: both;
text-align: center;
overflow:hidden;
position:relative;
margin:0 auto;
-moz-box-shadow: 3px 3px 10px rgba(0,0,0,0.5);
-webkit-box-shadow: 3px 3px 10px rgba(0,0,0,0.5);
box-shadow: 3px 3px 10px rgba(0,0,0,0.5);
}
.thumb-holder {
position:relative;
text-align: center;
overflow:hidden;
float:left;
width:475px;
height:150px;
margin:0 10px 10px 0;
-moz-box-shadow: 3px 3px 10px rgba(0,0,0,0.5);
-webkit-box-shadow: 3px 3px 10px rgba(0,0,0,0.5);
box-shadow: 3px 3px 10px rgba(0,0,0,0.5);
}
#hovering:hover .exif-data{
text-align:right;
display: block;
background: #111;
filter:alpha(opacity=75);
opacity:.75;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; /*--IE 8 Transparency--*/
color: #AAA;
position: absolute;
bottom: 0px;
right: 0px;
padding: 5px;
}
.picture-holder .exif-data, .thumb-holder .exif-data{
display:none;
}
#picture-description {
margin: 4px 0;
text-align: center;
}
#no-pictures-msg {
margin: 0 0 200px;
padding: 80px 0;
text-align: center;
}
.errors {
width: 500px;
margin-bottom: 15px;
border-bottom: 1px solid maroon;
border-top: 1px solid maroon;
border-left: 1px solid maroon;
border-right: 1px solid maroon;
padding: 8px 8px 8px 28px;
background: #FCC url('../../../graphics/x.gif') no-repeat 5px 8px;
}
div.large-thumb-toolbar {
padding: 15px 0;
text-align: center;
}
div.large-thumb-toolbar a {
padding: 0 4px;
}
.photos-large {
display:block;
margin:0 auto;
}
div.slides {
margin: 0;
padding: 0 0 10px 10px;
color: #fff;
}
.thumbnail p {
padding: 0 6px;
margin: 4px 0 0 0;
line-height: 1.2em;
height: 2.5em;
overflow: hidden;
}
#link-back {
clear: both;
margin: 0;
padding: 0;
display: block;
font-size: 11px;
text-align: center;
}
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {display:inline-block;}
/* Hide from IE Mac \*/
.clearfix {display:block;}
/* End hide from IE Mac */
I apologize for the messy CSS as well...
Thanks very much everyone!
I'm having some trouble getting my website (http://www.element17.com) to behave identically across the most popular web browsers. My reference browser is Chrome, so viewing it in Chrome you can see how it's supposed to look.
In IE8, the site looks perfect (other than no rounded corners, but I know that doesn't work and I'm unwilling to fiddle around with hacks to get what I consider to be a triviality to work in a browser soon to be replaced), but on the actual image pages (http://www.element17.com/index.php?level=picture&id=75 for example), the next and previous picture links do not appear when hovering over the left and right sides of the image. You can see the expected behaviour in Chrome or Firefox.
Here's the relevant PHP+HTML/CSS:
<?php plogger_get_header(); ?>
<div id="big-picture-container">
<?php if (plogger_has_pictures()) : ?>
<?php while(plogger_has_pictures()) : // equivalent to the Wordpress loop ?>
<?php plogger_load_picture();
// set variables for the 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();
?>
<?php if ($picture_caption != '' || !isset($picture_caption)); ?>
<!--<h2 class="date"><?php echo plogger_get_picture_date(); ?></h2>-->
<?php // generate XHTML with picture and link to full raw picture ?>
<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 id="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;'>";
echo "<a href='plog-content/images/wallpaper/"; echo $picture_caption; echo "Wide.jpg'><img src='plog-content/images/wide.png' /></a>";
echo "</span>";
echo "<span style='position:absolute; margin-left:20px;'>";
echo "<a href='plog-content/images/wallpaper/"; echo $picture_caption; echo "Full.jpg' style='display:inline;'><img src='plog-content/images/full.png' /></a>";
echo "</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>
<!--<p id="picture-description"><?php echo plogger_get_picture_description(); ?></p>-->
<!--<div id="exif-toggle-container"><div id="exif_toggle"><?php echo $detail_link; ?></div></div>-->
<!--<div id="comment-section"><?php echo plogger_display_comments(); ?></div>-->
</div>
<?php endwhile; ?>
<?php else : ?>
<p>No such image</p>
<?php endif; ?>
<?php plogger_get_footer(); ?>
* {
margin: 0;
padding: 0;
}
html{
background: #efefef url('images/stripe.png');
overflow-y:scroll;
}
body {
margin: 0;
padding: 0;
}
img {
border: 0;
}
a:link, a:visited {
color: #888;
text-decoration: none;
}
a:hover {
color: #AAA;
}
a:active {
outline:none;}
#centering {
text-align: center;
margin: 10px 0 0;
}
#wrapper {
margin: 0 auto 25px;
padding: 0px;
width: 980px;
/* border: 4px solid #888; */
background: url('images/trans.png');
font: 76% "Lucida Sans",Verdana,"Trebuchet MS",Geneva,Arial,Helvetica,SunSans-Regular,sans-serif;
text-align: left;
-moz-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 3px 3px 10px rgba(0,0,0,0.3);
-webkit-box-shadow: 3px 3px 10px rgba(0,0,0,0.3);
box-shadow: 3px 3px 10px rgba(0,0,0,0.3);
}
#header {
background: url('images/header_back.png');
padding: 5px 10px 5px 10px;
color:#666;
border-bottom:1px solid #666;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
-moz-box-shadow: 3px 3px 10px rgba(0,0,0,0.8);
-webkit-box-shadow: 3px 3px 10px rgba(0,0,0,0.8);
box-shadow: 3px 3px 10px rgba(0,0,0,0.8);
}
#footer {
background: url('images/header_back.png');
color: #666;
clear: both;
margin: 10px 0 0 0;
padding: 10px;
border-top:1px solid #666;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
-moz-box-shadow: 3px 3px 10px rgba(0,0,0,0.8);
-webkit-box-shadow: 3px 3px 10px rgba(0,0,0,0.8);
box-shadow: 3px 3px 10px rgba(0,0,0,0.8);
}
#gallery-name {
color: #888;
font-size: 18px;
font-weight: bold;
}
#main-container {
padding-top:10px;
}
#breadcrumbs {
color: #fff;
clear: both;
margin: 10px 0 0;
padding: 0 25px 0 25px;
font-size: 1.1em;
min-height: 20px;
}
#breadcrumb_links {
float: left;
margin: 0;
padding: 0;
}
#ac-container {
clear: both;
margin: 0;
padding: 0;
}
.exif{
margin-top:8px;
color:#555;
font-size:10px;
}
#thumbnail-container, #big-picture-container {
clear: both;
margin: 0;
padding: 0;
}
#collections {
text-align: left;
margin-left:10px;
}
.collection {
padding: 10px 0;
float: left;
width: 100%;
}
.collection img {
margin:0 auto;
display: block;
}
.collection p {
margin: 4px 0 0 0;
line-height: 1.5em;
}
.collection img:hover {
/* background: #A0B7C9;
border: 1px solid #38c; */
}
#pagination {
height: 1.4em;
width: 100%;
padding: 10px 0 0;
font-size: 1.2em;
}
#inner_wrapper {
}
h2 {
padding: 0;
color: #888;
font-size: 1.4em;
font-weight: 700;
}
#picture-caption {
font-size: 1.4em;
text-align: center;
margin: 6px 0;
}
.date {
padding: 0 0 2px 0;
text-align: center;
font-size: 1.1em;
font-weight: 400;
letter-spacing: 1px;
color: #A0B7C9;
}
#prev-button{
position:absolute;
width: 100px;
top:0px;
bottom:0px;
display: block;
margin:auto 0;
left: 0px;
float: left;
}
#next-button{
position:absolute;
width: 100px;
top:0px;
bottom:67px;
display: block;
margin:auto 0;
right: 0px;
float: right;
}
#prev-button:hover, #prev-button:visited:hover {
background: #111 url('images/arrow-left.png') no-repeat 50% 50%;
filter:alpha(opacity=75);
opacity:.75;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; /*--IE 8 Transparency--*/
color: #AAA;
cursor: pointer;
}
#next-button:hover, #next-button:visited:hover {
background: #111 url('images/arrow-right.png') no-repeat 50% 50%;
filter:alpha(opacity=75);
opacity:.75;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; /*--IE 8 Transparency--*/
color: #AAA;
cursor: pointer;
}
.picture-holder {
clear: both;
text-align: center;
overflow:hidden;
position:relative;
margin:0 auto;
-moz-box-shadow: 3px 3px 10px rgba(0,0,0,0.5);
-webkit-box-shadow: 3px 3px 10px rgba(0,0,0,0.5);
box-shadow: 3px 3px 10px rgba(0,0,0,0.5);
}
.thumb-holder {
position:relative;
text-align: center;
overflow:hidden;
float:left;
width:475px;
height:150px;
margin:0 10px 10px 0;
-moz-box-shadow: 3px 3px 10px rgba(0,0,0,0.5);
-webkit-box-shadow: 3px 3px 10px rgba(0,0,0,0.5);
box-shadow: 3px 3px 10px rgba(0,0,0,0.5);
}
#hovering:hover .exif-data{
text-align:right;
display: block;
background: #111;
filter:alpha(opacity=75);
opacity:.75;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; /*--IE 8 Transparency--*/
color: #AAA;
position: absolute;
bottom: 0px;
right: 0px;
padding: 5px;
}
.picture-holder .exif-data, .thumb-holder .exif-data{
display:none;
}
#picture-description {
margin: 4px 0;
text-align: center;
}
#no-pictures-msg {
margin: 0 0 200px;
padding: 80px 0;
text-align: center;
}
.errors {
width: 500px;
margin-bottom: 15px;
border-bottom: 1px solid maroon;
border-top: 1px solid maroon;
border-left: 1px solid maroon;
border-right: 1px solid maroon;
padding: 8px 8px 8px 28px;
background: #FCC url('../../../graphics/x.gif') no-repeat 5px 8px;
}
div.large-thumb-toolbar {
padding: 15px 0;
text-align: center;
}
div.large-thumb-toolbar a {
padding: 0 4px;
}
.photos-large {
display:block;
margin:0 auto;
}
div.slides {
margin: 0;
padding: 0 0 10px 10px;
color: #fff;
}
.thumbnail p {
padding: 0 6px;
margin: 4px 0 0 0;
line-height: 1.2em;
height: 2.5em;
overflow: hidden;
}
#link-back {
clear: both;
margin: 0;
padding: 0;
display: block;
font-size: 11px;
text-align: center;
}
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {display:inline-block;}
/* Hide from IE Mac \*/
.clearfix {display:block;}
/* End hide from IE Mac */
I apologize for the messy CSS as well...
Thanks very much everyone!