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 » Center area post/pages »

[SOLVED] Browser ignoring CSS Position: property - help me rule out ATA or WP please


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 May 10, 2012, 09:26 AM
arthurmild
 
50 posts · Aug 2010
Cape Town
Hello,

I want to use a simple image fader on this WP site with ATA theme - http://bit.ly/KNT3rl

Chrome and firebug tell me that the relevant CSS is being read but the browser is ignoring the positioning property

Consequently the images float under each other rather than being absolutely positioned and shuffled due to z index

I have given imgs coloured 6px borders to show what is going on

For reference here is another site I built where the effect works as it should

QUESTION: is there something about either WP or ATA which would cause the position propery to be ignored/overidden

PS - it still gets ignored if I use !important;

CSS -

Code:
.post div#slideshow IMG {
* * position:absolute;
* * top:0;
* * left:0;
* * z-index:8;
* * opacity:0.0;
	border:solid 6px yellow;
}
  #2  
Old May 10, 2012, 09:37 AM
juggledad's Avatar
juggledad
 
22,382 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
where are you adding the jscript?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old May 10, 2012, 11:09 AM
arthurmild
 
50 posts · Aug 2010
Cape Town
At the moment - and as a planned temp measure - it is hard coded into header.php - (see extract below)

But - I started off pasting it into ATO HTML/CSS inserts - Header Section

The script seems to execute by virtue of the opacity fading and 'class' appendages to each image (as evidenced by the border color changes)

Just the positioning doesnt' do its thing..


Code:
...

</head>	

<body <?php body_class(); ?><?php bfa_incl('html_inserts_body_tag'); ?>>
<?php bfa_incl('html_inserts_body_top'); ?>


<div id="wrapper">


<!-- psd image rotation -->
	
	<script type="text/javascript">

SCRIPT HERE...
  #4  
Old May 10, 2012, 11:50 AM
juggledad's Avatar
juggledad
 
22,382 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
Depending on what the script does, I seen jscripts ignore CSS positioning. This is one of the issues with the fade in/out code Atahualpa uses (CrossSlide jQuery plugin by Tobia Conforto). It ignores the CSS positioning and puts things at position 0,0

without access to the script/plugin I can't tell you much - have you asked the author about it?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Last edited by lmilesw; May 10, 2012 at 02:05 PM.
  #5  
Old May 10, 2012, 12:28 PM
arthurmild
 
50 posts · Aug 2010
Cape Town
Thanks JD -

It may have to go in the 'weird' pile then...

FWIW here is the script and the CSS - and as per the OP my site where it executes as it should


Code:
	<script type="text/javascript">




/*** 
    Simple jQuery Slideshow Script
    Released by Jon Raasch (jonraasch.com) under FreeBSD license: free to use or modify, not responsible for anything, etc.  Please link out to me if you like it :)
***/




function slideSwitch() {
    var $active = $('#slideshow IMG.active');




    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');




    // use this to pull the images in the order they appear in the markup ...
	
		// 1. commented out the two lines  in script below - 
		// 2. IF remove class="active" from first image in html
		// 	  effect is all images are random - but it takes time to load images on reresh or new page - effect is white gap.
		// 3. SO keep class="active" on one image - thsi willbe key image for every page, all images thereafgter will be random
	
	
   		// var $next =  $active.next().length ? $active.next()
      	
		//  : $('#slideshow IMG:first');




    // uncomment the 3 lines below to pull the images in random order - AS DONE HERE
 
 
     var $sibs  = $active.siblings();
     var rndNum = Math.floor(Math.random() * $sibs.length );
     var $next  = $( $sibs[ rndNum ] );


    $active.addClass('last-active');


    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1200, function() {
            $active.removeClass('active last-active');
        });
}



$(function() {
    setInterval( "slideSwitch()", 5000 );
});




	</script>
Code:
.post div#slideshow {
position: relative;
height: 260px;
width: 780px;
float:left;
border:solid 4px green;  /* steve for debug only */

}



.post div#slideshow IMG {
position:absolute;
top:0;
left:0;
z-index:8;
opacity:0.0;
border:solid 6px yellow;  /* steve for debug only */
}




.post div#slideshow IMG.active {
z-index:10;
opacity:1.0;
border:solid 6px red;  /* steve for debug only */
}



.post div#slideshow IMG.last-active {
* * z-index:9;
}
  #6  
Old May 10, 2012, 03:16 PM
juggledad's Avatar
juggledad
 
22,382 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
ummm...so...just where did you put that css?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #7  
Old May 12, 2012, 10:00 PM
arthurmild
 
50 posts · Aug 2010
Cape Town
A ha ! - SOLVED

Well I had put it in an external CSS file (and obviously provided a link to this file at the top of ATO HTML/CSS inserts)

This caused the CSS border and width properties to be displayed but not the position property. Bizarre - but as you say js scripts sometimes do this

HOWEVER

when I added the CSS directly to ATO (using HTML/CSS inserts) the position property is executed.

(using this ATO feature cause the CSS to be added directly to the <head> of the page (right?) in addition to all the other CSS generated by ATO)

My js now works - but I wonder why it was ignoring one part of a range of CSS properties when they were in an external file.?

So what I have here is my JS hardcoded into header.php and the CSS effectively in the <head> of the same page.

As it works I am going to 'let sleeping dogs lie' and just make a note to remember to update header.php if/when I upgrade ATA for this site

Thanks JD

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] tag inserted between sliced <img>'s - a WP thing? but want to rule out ATA arthurmild Center area post/pages 2 Apr 16, 2012 11:30 PM
Inserting horizontal rule removes the content of the whole post Jacek01 Center area post/pages 7 Apr 24, 2011 08:04 PM
[SOLVED] Modifying horizontal rule RHCdG Header configuration & styling 4 Feb 27, 2010 01:07 PM
[SOLVED] Add property in index.php miseroprospero Center area post/pages 6 Feb 1, 2010 08:11 AM
[SOLVED] Align horizontal rule in body of post PrairieProg Center area post/pages 2 Dec 29, 2009 04:20 PM


All times are GMT -6. The time now is 09:27 PM.


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