PDA

View Full Version : Facebox 1.1 not displaying correctly



CrystalSC
04-10-2010, 09:51 PM
1) Script Title: Facebox 1.1

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/facebox/index.htm

3) Describe problem: the facebox is stretched to 100% width rather than wrapped around image. Also, the gray border is tripled on the sides.

Example: http://thenewdeep.com/art/photography.html

I've used facebox before and never had a problem. :( It's almost as if the script is being called multiple times but I've checked my html files and my directory but I cannot located any problems.

Any help would be greatly appreciated. Thanks!!

******SOLVED*******
After playing with an updated version of Facebox, I got it to work properly. Thank you anyway. Mods can feel free to delete this thread.

jscheuer1
04-11-2010, 03:19 AM
It does look like that. But it's just inheriting styles from other declarations in your stylesheet.

I'm not sure if this will fix it in all, but in Firefox developer tools setting (additions highlighted):


#facebox .b {
background:url(http://thenewdeep.com/facefiles/b.png);
padding: 0;
}

and:


#facebox table {
margin: auto;
border-collapse: collapse;
width: auto;
}

in facebox.css took care of it. So obviously it's something about your other styles, I think it's (highlighted and red from your styles.css file):


/* Tables */

table {margin-bottom: 1.4em; width: 100%;}
th {font-weight: bold;}
thead th {background: #C3D9FF;}
th,td,caption {padding: 4px 10px 4px 5px;}
tr.even td {background: #F2F6FA;}
tfoot {font-style: italic;}
caption {background: #EEE;}

So if my advice doesn't work for all, perhaps you can figure out another workaround based upon what's causing this. You can always set the styles in styles.css for a class of table and a class of td and add those calsses to the table(s) and td(s) that you actually want them to apply to, so that they won't apply to facebox's table and tds.

In other browsers there may be other styles from your styles.css or your on page stylesheet that are messing up facebox. if so, those will have to be traced down and/or fixed in a similar manner as I have done with the table width and the td padding in facebox.css.