Applying CSS to PHP code

[asas111]

I have the following PHP code to display random images from a gallery:

<?php include_once "./pictures/cpmfetch/cpmfetch.php";$objCpm = new cpm('./pictures/cpmfetch/cpmfetch_config.php');$objCpm->
cpm_viewRandomMediaFrom("album=lastup",2,4); $objCpm->cpm_close(); ?>

And I have the following CSS code to add opacity to image borders

<DIV align="center"><div style="width:300px;height:200px;background:url(http://www.example.com/images/calla.jpg) repeat;border:1px solid white;"><div style="width:280px;height:180px;border:10px solid white;filter:alpha (opacity=50);-moz-opacity:.50;opacity:.50;-khtml-opacity: 0.5;"></div></div></DIV>

I have been trying for so long to apply the CSS code to the PHP code, but dont know how. Any help plz?

[edited by: tedster at 8:20 am (utc) on Oct. 13, 2008]
[edit reason] use example.com in code [webmasterworld.com] [/edit]

[swa66]

Your php code there calls other php software that's most likely producing some html.

You have a few options:

• add the CSS style info in the code itself. Basically you change that php software you're calling, or you wrap something around it. How to do that: best ask the maker of your gallery software and/or the php forum out here
  
• you add CSS directly to the header of the html in a <style> tag. This is much more easy provided you can target the generated code. (if you want a hand, post some relevant generated code)
  
• you add CSS code to an external CSS file that is or will be called from the header of the html. Again you need to be able to target the generated code.
  

[asas111]

Thank you,

I am so close to finding the solution, but still not there yet. So frustrating. Basically the opacity is being applid to the pictures, but when hovered, the original image colors are not restored.

I have already applied this to another page, but that one is easy because it is straightforward links. This howvere is a PHP script so it is a little harder.

This is how I have applied this:

<td class="opacityit" width="66%" height="130" valign="top" colspan="4" align="center">
<p align="center">

But still, only one state is working, while the other is not (hovering to get the original image with colors)

Any help would be greatly appreciated.

Thanks a lot,

[swa66]

I guess you have a .opacityit {...} and a .opacityit:hover {...} ? Please let us see what's in them.

Since you'll be hovering over a <td>, you do know that IE6 will not support that without some help from javascript ? IE7.js will fix this among many other things.
All other browsers should do fine.

php might be an extra layer in it all, but in essence php generates server-side html that is sent to the browser: it becomes a two step process:

1. determine what the browser gets now and what it should get to make it work
   
2. find a way in the code to make the script send the right stuff
   

[asas111]

Yes that is exactly what I have. I have it on another page and it works perfectly (it is only HTML though, no PHP)

This is what I have:

.opacityit img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
-moz-opacity: 0.4;
}

.opacityit:hover img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1;
}

Again, the opacity works, but hovering doesn't work (i.e the original image is not restored when mouse is on top of it)

Thanks a lot

[swa66]

php only generates html server side.

Take a look at the source code your browser gets (view source ...). Somewhere there's going to be enough of a difference to explain it.

If the html you have applies the class opcaityit to an anchor ( an <a> tag) and you're using IE6 and the generated html uses the class on a table cell (a <td> tag): This is expected behavior: IE6 doesn't support hover anything but <a> tags.

Otherwise it's unexpected for me unless there's something strange going on.

Try to capture the generated html with "view source" and put it in a static html file, that way you can change and simplify it without having to code php. It'll not solve the problem, but it'll bring understanding of the problem that leads to the solution.

Side note: I'd put the filter proprietary IE statements in a conditional comment, but don't worry too much about that now.