Another CSS cry for help

DeadlyPorpoise

Hey guys,

In Safari, I'm getting 2 images in one panel of the slideshow I'm using on my website:

http://saatchi-army.cs.modicagroup.com/client/

Seems fine in IE / Chrome / FF

Relevant CSS is:


/* Featured box */
.anythingSlider_wrapper {
float: left;
border: 10px solid #fff;
background: #ece9e6;
width: 942px;
-moz-box-shadow: 4px 5px 29px #666;
-khtml-box-shadow: 4px 5px 29px #666;
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
box-shadow: 4px 5px 29px #666;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')"; /* For IE 8 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000'); /* For IE 5.5 - 7 */
height:280px;
}

.anythingSlider {
position: relative;
overflow: hidden;
width: 942px;
height: 280px;
}
.anythingSlider div {
}
.anythingSlider ul {
width: 999999px;
list-style: none;
}
.anythingSlider li {
float: left;
width: 942px;
height: 280px;
position: relative;
}
.anythingSlider li a {
display: none;
}
.anythingSlider .arrow {
display: none;
}
.inner-slider-wrapper {
margin: -6px 0 0 0;
background: url(images/slider/slider-1.jpg) top left no-repeat;
width: 986px;
height: 281px;
}
.inner-slider-inner {
float: right;
width: 341px;
}


Images (for now) are embedded in the HTML on the homepage is this fashion:

<div class="anythingSlider_wrapper">
<div class="anythingSlider">
<div>
<ul>
<?php query_posts('post_type=video&showposts=5&orderby=date&order=DESC'); ?>
<?php while(have_posts() ) : the_post(); ?>
<li>
<div style="margin: 0; margin-top: -6px; background: url(http://saatchi-army.cs.modicagroup.com/client/wp-content/themes/operationhq/images/slider/slider-1.jpg) top left no-repeat; width: 986px; height: 281px;">
<div style="float: right; width: 341px;">
<h2 class="typekit-heading"><a style="color: #FFF; font-size: 24px; display: block; padding: 20px; width: 251px;" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p style="color: #FFF !important; padding: 0 20px 20px 20px; maring-top: -20px; width: 260px;"><?php echo get_the_excerpt();?></p>
</div>
</li>
<?php endwhile; ?>
<li>
<?php query_posts('post_type=video&showposts=1&offset=1'); ?>
<?php while(have_posts() ) : the_post(); ?>
<div style="margin: 0; margin-top: -6px; background: url(http://saatchi-army.cs.modicagroup.com/client/wp-content/themes/operationhq/images/slider/slider-2.jpg) top left no-repeat; width: 986px; height: 281px;">
<div style="float: right; width: 341px;">
<h2 class="typekit-heading"><a style="color: #FFF; font-size: 24px; display: block; padding: 20px; width: 251px;" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p style="color: #FFF !important; padding: 0 20px 20px 20px; maring-top: -20px; width: 260px;"><?php echo get_the_excerpt();?></p>
</div>
<?php endwhile; ?>
</li>

</ul>
</div>
</div>
</div>

Many thanks for any suggestions!

Atheraal

<div style="margin: 0; margin-top: -6px; background: url(http://saatchi-army.cs.modicagroup.c...r/slider-2.jpg) top left no-repeat; width: 986px; height: 281px;">

Try separating that into two statements? I've occasionally had syntax troubles with that sort of thing in Safari.

DeadlyPorpoise

Cheers for the very fast reponse! Alas, to no avail, however. This makes me a sad panda.

Anything else your giant brain can think of, good sir?

JacksWastedLife

You're not closing this div

<div style="margin: 0; margin-top: -6px; background-image: url(http://saatchi-army.cs.modicagroup.com/client/wp-content/themes/operationhq/images/slider/slider-1.jpg); background-position: top left; background-repeat: no-repeat; width: 986px; height: 281px;">

You need to add a closing </div> before you close the <li> for each of the slides.

DeadlyPorpoise

You, sir, win the internet.

Thanks for the eagle eyes!