I'm struggling with a CSS problem that appears only in Firefox on my home page. I've tested with Chrome, IE, Safari, and Opera and it looks fine. In Firefox (which is 1/3 of my visitors right now) my float smushes up to the menu bar and I lose some spacing below.

I'm sure my CSS skills are lacking and there probably was an easier way to do this but this is what I've done so far:

CSS:

.featured-article {
margin: 0;
padding: 0;
position: relative;
float: left;
}

#featured-article-space {
position: absolute;
top: -355px;
left: 538px;
width: 213px;
height: 343px;
background-color: transparent;
}

#featured-article-box {
position: absolute;
top: -310px;
left: 538px;
width: 213px;
height: 299px;
background-color: transparent;
border: 1px solid #575757;
}

.featured-article-headline{
background:#7CC6A2 none repeat scroll 0 0;
padding:5px;
width: 203px;
}

.featured-article-headline h1, .featured-article-headline h2 {
color:#FFFFFF;
font-size:1.5em;
padding:5;
margin:0;
}

.featured-article-headline h2 a:link, .featured-article-headline h2 a:visited, .featured-article-headline h2 a:active, .featured-article-headline h1 a:link, .featured-article-headline h1 a:visited, .featured-article-headline h1 a:active {
color:#FFFFFF;
text-decoration:none;
}

.featured-article-headline h2 a:hover, .featured-article-headline h1 a:hover {
color:#575757;
text-decoration:none;
}

#featured-article-placement{
position: absolute;
top: -310px;
left: 543px;
width: 210px;
height: 295px;
margin-bottom: 10px;
}

.featured-article-header{
}

.featured-article-header h1, .featured-article-header h2 {
color:#575757;
font-size:1.0em;
font-weight: bold;
margin-top:2px;
padding-left: 4px;
padding-bottom: 0;
}

.featured-article-header h2 a:link, .featured-article-header h2 a:visited, .featured-article-header h2 a:active, .featured-article-header h1 a:link, .featured-article-header h1 a:visited, .featured-article-header h1 a:active {
color:#D39907;
text-decoration:none;
width: 213px;
}

.featured-article-header h2 a:hover, .featured-article-header h1 a:hover {
color:#575757;
text-decoration:none;
}

Code:

div class="featured-article"><div id="featured-article-space"><div class="featured-article-headline"><h2>Featured Article</h2></div></div></div>

<div class="featured-article"><div id="featured-article-box"></div></div>


<div class="featured-article"><div id="featured-article-placement">
<?php $my_query = new WP_Query('category_name=featured-article&showposts=1' );
while ($my_query->have_posts()) : $my_query->the_post(); ?>
<div <?php post_class(); ?> id="post-<?php the_ID(); ?>">
<?php bfa_post_headline('<div class="featured-article-header">','</div>'); ?>
<?php bfa_post_bodycopy('<div class="post-bodycopy clearfix">','</div>'); ?>
<?php endwhile; ?>
</div></div>

The website is: http://coloradoanimalwelfare.org

Please help.

How are you embedding all that css and java between the posts?

The CSS is in the CSS inserts and the HTML is in the Content Above the Loop. It's ugly but I didn't know how else to make it work.

B

Sorry, I was looking at the generated source and I see lots of embedded CSS between posts - css like

.col4top{
	height: 300px;
	margin: 0;
	width:350px;
	padding: 0;
	z-index:5;
	bottom:5px;
	
}
.col5top{
background: url(http://coloradoanimalwelfare.org/wp-content/plugins/featured-posts-list-2/overlay.png);
position: absolute;
width:160px;
top: 0;
left: 360px;
height: 295px;
color: #ccc;
text-indent: 0;
padding:0 5px 5px 5px;
font-size:12px; 
font-weight:normal;
z-index: 50;
bottom:5px;

Unfortunately, that css is from the Featured Posts List2 plugin that puts the picture and the excerpt to the left of the article that I'm trying to correctly place. I'm not sure why he imbedded his CSS when he coded the plugin.

ok, I know why you have the problem. but I have no idea how yoiu are going to fix it.

The first post starts like this

		<!-- Main Column -->
		<td id="middle">
        <div class="featured-headline"><h2>Featured Adoptees</h2></div>
	<p>
	<div id="featuredpost"><div class="featureditem" Style='display: block'> 

The <p> is putting the space before it - the closing </p> doesn't come until after the embedded CSS and scripts.

The second post does not have this <p>

	<div class="featured-article"><div id="featured-article-space"><div class="featured-article-headline"><h2>Featured Article</h2></div></div></div>
	<div class="featured-article"><div id="featured-article-box"></div></div>
        <div class="featured-article"><div id="featured-article-placement">
       					<div class="post-528 post hentry category-articles category-featured-article" id="post-528">
			<div class="featured-article-header">		<h2>			

So FireFox does not put the space before it. Some how you need to get that <p>...</p> into the code

In this case, it looks like FireFox is actually displaying the generated code strictly, whild the other browsers ar a little lax.

This is a bug/issue with the plugin

I LOVE YOU! All fixed! Stupid <p></p>'s! Thank you and I made a donation.

Beth