Compatibility issues – background images in Firefox

  • Ok, here’s the code I am using

    .post {
	padding-left: 8px;
	padding-bottom: 90px;
	padding-right: 8px;
	padding-top: 20px;
	background-image: url(bottomstripes.png), url(top_left.png), url(top_right.png), url(bottomleft.png);
	background-position: right bottom, left top, right top, left bottom;
	background-repeat: no-repeat;
	border-left-style: none;
	border-bottom-style: none;
	border-right-style: none;
	border-top-style: none;
	margin-left: -10px;
	margin-bottom: 20px;
	background-color: #c7c7c7;

    And it shows up without the background images in Firefox. It shows up with the bg images in Safari. Validation says there’s too many bg images, but I am not sure how to fix this, especially since it works in Safari.

Viewing 6 replies - 1 through 6 (of 6 total)

  • Validation says there’s too many bg images

    Thats the holy grail, regardless of it working in one browser or all.

    Fix it by narrowing down your CSS declarations.

    .posttop { ...

    .posttopleft { ...

    so on and so forth.

    Thread Starter jonathancutrell

    (@jonathancutrell)

    Can you explain that a bit further? I am quite a bit confused about the declarations. Are those already defined somewhere up the line?

    Are those already defined somewhere up the line?

    I dont know I didnt look. Its your stylesheet, you can look.

    Im suggesting that you use more precise styling.

    .post {
	background-image: url(bottomstripes.png) ...

    then:

    .posttopleft {
	background-image: url(top_left.png) ...

    Obviously you will need to create the divs or whatever that all that extra stuff would be applied to.

    My point is, youre not using valid CSS currently, and cant expect your current solution to work across all browsers.

    Thread Starter jonathancutrell

    (@jonathancutrell)

    Thank you so much. This was the final code

    (messy, I’m guessing.)

    <div id="main">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<div class="post" id="post-<?php the_ID(); ?>">
<div class="posttopleft">
<div class="posttopright">
<div class="postbottomleft">
<div class="internalpost">
<h1>
<a>" rel="bookmark"><?php the_title(); ?></a></h1>

	<h2><?php the_date('','<h2>','</h2>'); ?></h2>
<div class="meta">
<?php _e("Filed under:"); ?> <?php the_category(',') ?> —
<?php the_author() ?> @ <?php the_time() ?> <?php edit_post_link(__('Edit This')); ?>
</div>

<div class="storycontent">
<?php the_content(__('(more...)')); ?>

</div>

<div class="feedback">

<?php wp_link_pages(); ?>

<?php comments_popup_link(__('Comments (0)'), __('Comments (1)'), __('Comments (%)')); ?>
</div>
</div> <!-- internalpost -->
</div> <!-- posttopleft -->
</div> <!-- posttopright -->
</div> <!-- postbottomleft -->
</div> <!--closing .post -->

<?php comments_template(); // Get wp-comments.php template ?>

<?php endwhile; else: ?>

<p>
<?php _e('Sorry, no posts matched your criteria.'); ?>
</p>

<?php endif; ?>

<?php posts_nav_link(' — ', __('? Previous Page'), __('Next Page ?')); ?>
			</div>
			<!-- closing main div -->

    messy works, as long as its valid, and accomplishes your goal. does it work? is it valid?

    Thread Starter jonathancutrell

    (@jonathancutrell)

    It works. Checking validity now…

    and this is what I get.

    URI : file://localhost/TextArea
    34 h1 Value Error : font Helvetica is not a font-size value : Helvetica,sans-serif
    40 h2 Value Error : font Helvetica is not a font-size value : Helvetica,sans-serif,”Lucida Grande”,Verdana,Arial
    62 #footer Value Error : float bottom is not a float value : bottom

    None of which are huge alarms.

    And then there’s the warnings about text and bg color being the same, but that’s all taken care of.

    So yes, it works.

    AND it’s messy! ??

    Thank you so much

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Compatibility issues – background images in Firefox’ is closed to new replies.