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

arthurmild · #1 May 10, 2012, 09:26 AM

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

juggledad · #2 May 10, 2012, 09:37 AM

where are you adding the jscript?

arthurmild · #3 May 10, 2012, 11:09 AM

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

juggledad · #4 May 10, 2012, 11:50 AM

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?

arthurmild · #5 May 10, 2012, 12:28 PM

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

juggledad · #6 May 10, 2012, 03:16 PM

ummm...so...just where did you put that css?

arthurmild · #7 May 12, 2012, 10:00 PM

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