Wordpress Themes - WP Forum at BFA
Click Here To DONATE! Support the theme development, get more attention and additional benefits based on your donation level. Your forum name will be highlighted.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme »

[SOLVED] CSS Problem with float in Firefox only


Build custom WP THEMES, without
coding.
Click here for THEMEFRAME

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
  #1  
Old Feb 1, 2010, 01:47 PM
bplazar
 
39 posts · Oct 2009
[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.
  #2  
Old Feb 2, 2010, 05:51 AM
juggledad's Avatar
juggledad
 
21,712 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
How are you embedding all that css and java between the posts?
__________________
If you like my help, please consider donating. I am happy to provide greater detail on this and other topics if you hire me. Please send detailed support requests to me as a private message, thank you.
Juggledad | Forum Moderator/Support
  #3  
Old Feb 2, 2010, 08:37 AM
bplazar
 
39 posts · Oct 2009
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
  #4  
Old Feb 2, 2010, 12:52 PM
juggledad's Avatar
juggledad
 
21,712 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
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;
__________________
If you like my help, please consider donating. I am happy to provide greater detail on this and other topics if you hire me. Please send detailed support requests to me as a private message, thank you.
Juggledad | Forum Moderator/Support
  #5  
Old Feb 2, 2010, 01:01 PM
bplazar
 
39 posts · Oct 2009
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.
  #6  
Old Feb 2, 2010, 02:56 PM
juggledad's Avatar
juggledad
 
21,712 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
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
__________________
If you like my help, please consider donating. I am happy to provide greater detail on this and other topics if you hire me. Please send detailed support requests to me as a private message, thank you.
Juggledad | Forum Moderator/Support

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Mouseover Hover CSS problem IE8 Ber|Art Page & Category Menu Bars 20 Jan 22, 2011 04:34 AM
CSS problem beneath Post Title JakeThePeg Post-Kicker, -Byline & -Footer 0 Sep 9, 2009 05:54 AM
Is 3.4 CSS problem resolved? lhanft New Versions, & Updating 1 Jul 10, 2009 08:18 PM
Having a problem with my custom header displaying using FireFox als_lespaul Header configuration & styling 2 Jan 26, 2009 08:21 PM


All times are GMT -6. The time now is 02:56 AM.


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