Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

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

[SOLVED] CSS Problem with float in Firefox only


  #1  
Old Feb 1, 2010, 01:47 PM
bplazar
 
39 posts · Oct 2009
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
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
How are you embedding all that css and java between the posts?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
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
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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;
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
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
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #7  
Old Feb 2, 2010, 03:15 PM
bplazar
 
39 posts · Oct 2009
I LOVE YOU! All fixed! Stupid <p></p>'s! Thank you and I made a donation.

Beth

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 01:55 AM.


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