WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Cross-browser display issues (1 post)

  1. shaneholden
    Member
    Posted 6 years ago #

    I've added the code changes to the index.php file to show image galleries like Matt does on his site. The problem that I didn't realize is that in Firefox 3.0 the separator bar that I have that is supposed to break the galleries displays completely wrong. Could anyone help me clean this up to display correctly in FF and IE?

    Any help would be GREATLY appreciated!

    FF3: http://www.shane-holden.com/working/ff3winxp.png
    IE7: http://www.shane-holden.com/working/ie7winxp.png
    IE8: http://www.shane-holden.com/working/ie8winxp.png

    The view of IE7 above is the correct way that I mean for it to show up across the other browsers.

    Thank you!

    My Index File:

    <?php get_header(); ?>
    
    <div id="container">
    
    <?php if (have_posts()) : ?>
    <?php $count = 1 ?> <!--For TextLinkAds-->
    <?php while (have_posts()) : the_post(); ?>
    
    	<div class="post">
    
    <!--Gallery Function-->
    <?php
    				if(in_category(8)) {
    				$args = array(
    					'post_type' => 'attachment',
    					'numberposts' => 1,
    					'order' => 'ASC',
    					'post_status' => null,
    					'post_parent' => $post->ID
    					);
    				$attachments = get_posts($args);
    				if ($attachments) {
    					foreach ($attachments as $attachment) {
    						$thePic = wp_get_attachment_image($attachment->ID);
    					}
    				}
    
    				$args = array(
    					'post_type' => 'attachment',
    					'numberposts' => null,
    					'post_status' => null,
    					'post_parent' => $post->ID
    					);
    				$attachments = get_posts($args);
    				if ($attachments) {
    					$picCount = count($attachments);
    				}
    				?>
    
    				<!-- $$$$$$$$$$$$$$$$$$ This is the gallery post bit $$$$$$$$$$$$$$$$$$$$$$$$$$$ -->
    <div style="clear: both;"></div>
    				<div class="post-album" style="padding-top:10px;">
    
    				<div style="float: right; width: 185px; clear: right; margin-top: 0px; margin-bottom: 0px; padding-top: 0px;  margin-left: 0px;">
    					<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_time('F jS, Y') ?></a></h2>
    
    <div>This album contains <?php echo $picCount; ?> items.</div>
    				<?php the_excerpt(); ?>
    
                                         </div>
    
    					<div style="float: left;" class="gallery"><a href="<?php the_permalink(); ?>"><?php echo $thePic; ?></a></div>
    
    <div class="post"><p class="divide">
    		<?php if ('open' == $post-> comment_status) : // kommentare erlaubt, dann ?>
    
    		<?php else : // wenn kommentare deaktiviert, dann ?>
    		<?php endif; ?>
    <!--Posted in <?php the_category(', ') ?> | --><?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?>
    
    </div>
    			</div>
    <?php } else { ?>
    <!--End Gallery Function-->
    	<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2><?php the_time('F jS, Y') ?>
    	<?php the_content(__("Read the rest of this entry &raquo;")); ?>
    
    	<p class="divide">
    		<?php if ('open' == $post-> comment_status) : // kommentare erlaubt, dann ?>
    
    		<?php else : // wenn kommentare deaktiviert, dann ?>
    		<?php endif; ?>
    Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?>
    
    <!--Gallery Function--><?php } ?><!--Gallery Function End-->
    
    <?php if ($count==1) { include('textlinkads.php'); } ?> <!--For TextLinkAds-->
    <?php $count = $count + 1; ?> <!--For TextLinkAds-->
    
    	</div>
    	<?php endwhile; ?>
    	<?php else : ?>
    
    	<div class="post">
    <img src="<?php bloginfo('template_directory'); ?>/images/404error.gif">
    <h2 align="center">Sorry, but this page does not exist.</h2>
    	</div>
    
    	<?php endif; ?>
    	<div class="post" align="center">
    <?php posts_nav_link('&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;','&laquo; Latest Entries','Previous Entries &raquo;'); ?>
             </div>
    
    <!--Quote Begin-->
    <div id="quote">
    
    <?php quotescollection_display_randomquote(1, 1, 0) ?>
    
    </div>
    <!--Quote End-->
    
    <?php get_footer(); ?>

    My CSS File w/ the items that pertain to this problem:

    .post-album {
    background-image: url(images/album.gif);
    background-repeat: no-repeat;
    background-position: bottom right;
    }
    .post {
    margin : 0 auto 0 auto;
    width : 350px;
    }
    .post img {
    padding: 5px;
    }
    .post blockquote {
    	background: url('images/blockquote.gif') no-repeat;
    	color: #565656;
    	padding-left:35px; padding-right:20px; padding-top:15px; padding-bottom:15px;
    }
    .post ul {
    	list-style-type: none;
    	font-size: 11px;
    	margin-bottom: 15px;
    	}
    .post ul li {
    	background: url('images/bullet02.gif') no-repeat 0px 5px;
    	margin-bottom: 2px;
    	padding-left: 17px;
    	}
    p {
    color : rgb(102, 102, 102);
    font-family : 'Verdana', 'Arial', Sans-Serif;
    font-weight : normal;
    font-size : 1em;
    line-height : 160%;
    padding : 5px 0 5px 0;
    text-align : justify;
    }
    .divide {
    background : url("images/p-divider.gif") no-repeat;
    font-family : 'Verdana', 'Arial', Sans-Serif;
    font-weight : normal;
    font-size : 1em;
    height : 25px;
    margin : 0px 0 0 0;
    padding-right : 10px;
    text-align : right;
    }

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.