CoppermineFetch layout problem in Firefox

[lurkalot]

Hi all,

I'm running SMF 1.1.5 / Tinyportal 0.9.8, bridged with Coppermine 1.4.18, and currently using coppermineFetch to pull images on to my front page (Latest gallery images). 

Thanks to Nibbler I now have my owners name, how many hits, and how many comments shown underneath the thumbnails.     However, I noticed when viewing my home page in Internet Explorer 6 everything looks fine, but when viewed in Firefox, the images go out of line with the text info.   Any ideas how to fix this would be greatly appreciated.

Here's a IE screen grab,

http://i25.photobucket.com/albums/c89/lurkalot/internetexplorer.jpg [Edit GauGau] Replaced hotlinked image with attachment [/Edit]

And here's a Firefox screen grab

http://i25.photobucket.com/albums/c89/lurkalot/firefox.jpg [Edit GauGau] Replaced hotlinked image with attachment [/Edit]


Code I'm using as follows, Added to a center phpbox in Tinyportal.

Code Select Expand


echo "<center>";
chdir("../gallery/cpmfetch/");
include "cpmfetch.php";                   
$objCpm = new cpm();
$options = array("imageheight"=>"80","subtitle" => "<center>{{pTitle}} <br> <center> <FONT color=#ff0000 size=2>Image By</FONT></STRONG> {{pOwner_name}} <br>{{pHits}} Views <center> <FONT color=#2A00B3 size=2>Comments</FONT></STRONG> {{pComCount}} </center>");
$objCpm->cpm_viewLastAddedMedia(2,4,$options,$filter);
$objCpm->cpm_close();
chdir("../../");
echo '<a href="http://cameracraniums.com/gallery?action=gallery">View more latest images</a>';
echo "</center>";


And a link to my site, www.cameracraniums.com

[Nibbler]

First of all, don't post screenshots in JPG format, use PNG and attach them to your post instead of hotlinking them.

Change the center tags you are wrapping cpmfetch with to a div and then apply styles using that, so:

Change

Code Select Expand


echo "<center>";
...
echo "</center>";


to

Code Select Expand


echo '<div id="cpmfetch">';
...
echo '</div>';


Then add the styles to your css file.

Code Select Expand


#cpmfetch table {
    width: 100%;
}

#cpmfetch td {
    text-align: center;
    width: 25%;
}


That will align and space out the table.

[lurkalot]

Nibbler, apologies for the screen grabs.   I'll remember that in future posts.

Thanks for the help. 

Now I understand the center tag stuff, but when you say "Then add the styles to your css file."  What css file are you referring to, and where would I find it please? 

Sorry if that's a dumb question, but I'm still trying to learn.

[Nibbler]

Your css file is here: http://cameracraniums.com/forum/Themes/cranium%202/style.css?fin11

[lurkalot]

Thanks again,

does it matter where I add the code in the css file?  as I've done it and it made no difference. 

[Nibbler]

You need to refresh the page for the updated css to take effect.

[lurkalot]

Thank you very much, that fixed it. 

[lurkalot]

Well it did fix it apart from the link at the bottom (View more latest images), this is now shown to the left hand side of my block, this used to be centered.  Any way to fix this?  I've marked it in bold below.
 

echo '<div id="cpmfetch">';
chdir("../gallery/cpmfetch/");
include "cpmfetch.php";                   
$objCpm = new cpm();
$options = array("imageheight"=>"80","subtitle" => "<center>{{pTitle}} <br> <center> <FONT color=#ff0000 size=2>Image By</FONT></STRONG> {{pOwner_name}} <br>{{pHits}} Views <center> <FONT color=#2A00B3 size=2>Comments</FONT></STRONG> {{pComCount}} </center>");
$objCpm->cpm_viewLastAddedMedia(2,4,$options,$filter);
$objCpm->cpm_close();
chdir("../../");
echo '<a href="http://cameracraniums.com/gallery?action=gallery">View more latest images</a>';
echo '</div>';

[Nibbler]

Change the css to this:

Code Select Expand


#cpmfetch table {
    width: 100%;
}

#cpmfetch td {
    width: 25%;
}

#cpmfetch {
    text-align: center;
}


[lurkalot]

Thanks Nibbler, that done the trick.   

Promise to stop pestering you now.

Thanks again.