Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Atahualpa 3 Wordpress theme (http://forum.bytesforall.com/forumdisplay.php?f=2)
-   -   [SOLVED] CSS Problem with float in Firefox only (http://forum.bytesforall.com/showthread.php?t=5649)

bplazar Feb 1, 2010 01:47 PM

[SOLVED] CSS Problem with float in Firefox only
 
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.:)

juggledad Feb 2, 2010 05:51 AM

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

bplazar Feb 2, 2010 08:37 AM

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

juggledad Feb 2, 2010 12:52 PM

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

.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;


bplazar Feb 2, 2010 01:01 PM

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.

juggledad Feb 2, 2010 02:56 PM

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
HTML Code:

                <!-- 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>
HTML 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">
                                              <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

bplazar Feb 2, 2010 03:15 PM

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

Beth


All times are GMT -6. The time now is 12:49 AM.

Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.