Empty album color difference

[kegobeer]

In all themes, I've noticed that empty albums aren't one solid color.

[Tranz]

I noticed that before in 1.3 whenever using Opera. I was surprised to see it happen in 1.4 in Internet Explorer and FireFox. Strangely, it doesn't happen in my theme, which I based on Project vii. I still see this behavior with 1.4 in Opera, regardless of theme.

[Tranz]

I swapped things around to see what the source of the problem was. Nothing made a difference.

I could only use v1.4 style.css with v.1.3.2 since there are functions in theme.php which are incompatible. However, there was no change in color in empty table cells. So, v 1.3.2 looked fine even with 1.4's style.css

When I replaced the entire project vii folder of 1.4 with 1.3.2's folder, v. 1.4 still had the issue with empty album color.

So I'm guessing the bug exists beyond the theme folders.

[Tranz]

But strangely, my theme that I made based on project vii doesn't have that problem. I didn't update my theme from v. 1.3.2 though.

I've already mentioned it, but now that I've uploaded my cpg dev installation, you can see for yourself. http://cpg.thu.lunarpages.com/

[Tarique Sani]

I had posted a fix for this in the CSS theme thread - my connects today are too bad and I am barely able to surf - please look up that thread and fix

[Tranz]

I had posted a fix for this in the CSS theme thread - my connects today are too bad and I am barely able to surf - please look up that thread and fix

I went through several threads after running a search for "css theme" authored by you, Tarique. I think this is the one. I am guessing this is the post where you posted the solution.

It didn't work though. The color still shows up in the blank areas; it's just lighter. I put the exact same maintable code in my theme into the project vii. The color still showed in blank cells. I removed the background-color attribute and the page just didn't look right. When I removed the same attribute from my theme, it didn't make a difference.

For demonstration purposes, I made the maintable's background-color bright red so you can compare the difference when viewing Classic and my theme when using this in style.css:

Code Select Expand

.maintable {
        border: 1px solid #0E72A4; //specific to Classic theme
        background-color: #FF0000;
        margin-top: 1px;
        margin-bottom: 1px;
}

[Tarique Sani]

Code Select Expand

.maintable {
        border: 1px solid #0E72A4; //specific to Classic theme
        background-color: #FF0000;
        margin-top: 1px;
        margin-bottom: 1px;
}

Try this instead (of course specific to Classic still)

Code Select Expand

.maintable {
        border: 1px solid #0E72A4; //specific to Classic theme
        background-color: #efefef;
        margin-top: 1px;
        margin-bottom: 1px;
}

[Tranz]

Yes, it works. However, I think it hides a problem rather than addresses it. With the current stable version, it is unnecessary to be so specific with the background-color to make things match. Every theme would have to be edited to make the blank area match, instead of fixing the source(s) of the problem. Know what I mean?

[donnoman]

In doing more research on this problem I've also uncovered a number of bad html tags in the themes:

These are specific instances in rainy_day:

Code Select Expand



line 274
<img src="images/spacer.gif" width="1" height="1" border="0" alt="" /<br />

283
<img src="images/spacer.gif" width="1" height="1" border="0" alt="" /

304
      <img src="images/spacer.gif" width="1" height="1" border="0" alt="" /<br />

383
  <img src="images/spacer.gif" width="1" height="1" border="0" alt="" /<br />

392
<img src="images/spacer.gif" width="1" height="1" border="0" alt="" /

413
<img src="images/spacer.gif" width="1" height="1" border="0" alt="" /<br />

919
<img src="images/spacer.gif" width="1" height="1" border="0" alt="" /</td>'

920
<img src="images/spacer.gif" width="1" height="1" border="0" alt="" /</td>'


They are also found in eyeball, styleguide, and fruity.

[donnoman]

Found the problem with maintable showing through.

At some point during the process the height="100%" attributes had been removed.

In order for it to work all elements starting with <td width="{COL_WIDTH} down need to be changed as in this example:

Note: The HTML tags were also fixed in this example for rainy_day

Code Select Expand


<!-- BEGIN c_empty_cell -->
        <td width="{COL_WIDTH}%" height="100%" valign="top">
        <table width="100%" cellspacing="0" height="100%" cellpadding="0">
        <tr>
                <td height="1" valign="top" class="tableh2">
                        <b>&nbsp;</b>
                </td>
        </tr>
        <tr>
                <td>
                        <img src="images/spacer.gif" width="1" height="1" border="0" alt="" /> <br />
                </td>
        </tr>
        <tr height="100%">
        <!-- debug c_empty_cell -->
                <td width="100%" height="100%" valign="top" class="tableb_compact">
                        &nbsp;
                </td>
        </tr>
        </table>
        </td>
<!-- END c_empty_cell -->


[donnoman]

I went through CVS Logs rev 1.44 of rainy day had the comment that hieght attribute was removed for <table> <tr> and <td> for standards compliance.

I don't know if it helps to rewrite these with CSS, but here it is anyway using inline styles. It required fewer attribute modifications than the first attempt.

Code Select Expand


<!-- BEGIN c_empty_cell -->
        <td width="{COL_WIDTH}%" valign="top" style="height:100%">
        <table width="100%" cellspacing="0" cellpadding="0" style="height:100%">
        <tr>
                <td height="1" valign="top" class="tableh2">
                        <b>&nbsp;</b>
                </td>
        </tr>
        <tr>
                <td>
                        <img src="images/spacer.gif" width="1" height="1" border="0" alt="" /><br />
                </td>
        </tr>
        <tr>
                <td width="100%" valign="top" class="tableb_compact" style="height:100%">
                        &nbsp;
                </td>
        </tr>
        </table>
        </td>
<!-- END c_empty_cell -->


[Tranz]

Awesome, thanks for figuring this out, donnoman. I implemented this fix and it worked for albums that belong to categories. However, empty cells in tables containing albums that don't belong to categories still had the bug.

So I added  style="height:100%"
to
<!-- BEGIN empty_cell --> (specifically the one under $template_album_list)
<!-- BEGIN c_album_cell -->

Here's my test gallery

At the time of this post I have updated Rainy Day theme (but have not committed the changes pending approval).

[Tranz]

In doing more research on this problem I've also uncovered a number of bad html tags in the themes:

These are specific instances in rainy_day:

Code Select Expand



line 274
<img src="images/spacer.gif" width="1" height="1" border="0" alt="" /<br />

283
<img src="images/spacer.gif" width="1" height="1" border="0" alt="" /

304
<img src="images/spacer.gif" width="1" height="1" border="0" alt="" /<br />

383
<img src="images/spacer.gif" width="1" height="1" border="0" alt="" /<br />

392
<img src="images/spacer.gif" width="1" height="1" border="0" alt="" /

413
<img src="images/spacer.gif" width="1" height="1" border="0" alt="" /<br />

919
<img src="images/spacer.gif" width="1" height="1" border="0" alt="" /</td>'

920
<img src="images/spacer.gif" width="1" height="1" border="0" alt="" /</td>'


They are also found in eyeball, styleguide, and fruity.

Thank you for the report. I have fixed the errors and committed the changes.

[Tranz]

argh... the empty cell still shows up in a different color in Opera, just as with cpg 1.3x.

[donnoman]

My guess is the problem with Opera isn't related to these changes, or maybe it never paid attention to the height attributes in the first place.

I'll install opera and do some testing tonite.

[Joachim Müller]

putting the height attribute back in is not an option imo, we should only do so if there's no other way to fix this issue. There have been troubles in the past with browsers handling empty cells differently - maybe putting &nbsp; into empty cells might help...

Joachim

[Casper]

I have just modified the water drop theme for xhtml compliance, and this fix, although not causing a validation failure with either the css or xhtml, only worked for FF, not IE.
And the empty cells already have '&nbsp;' in them.

[donnoman]

What about dynamically changing the hieght of spacer.gif in the empty cells based on the minimum height configured for thumbnails by the system?

[donnoman]

I fixed the background showing through in Firefox, Opera, and IE 6 for Rainy_Day in 1.4devel

I tested this fix with album list thumbnails set at 100, 75, and 50.

I did see some odd heights that were throwing off my measurements that I tracked down to height
differences returned by two function in index.php.

In these tests Album List Thumbnails were set to 50 in the config.

theme_display_album_list_cat returned a height 1 pixel taller than theme_display_album_list

Code Select Expand


<img src="albums/Bruce/Strip%20Wood%20Floors/thumb_WIND.JPG" class="image"  height="51" border="0" alt="WIND.JPG" />

theme_display_album_list

Code Select Expand


<img src="albums/Bruce/Plank%20Wood%20Floors/thumb_WMASTM.JPG" class="image"  height="50" border="0" alt="WMASTM.JPG" />


My html is set to account for the difference at 50, but at 75 they were 1 pixel off, at 100 the were the same again.
I think this has been happening all along, and its just because I was counting every pixel to get my fix to look right
that I caught it. Regardless of picture size I don't think those two functions should return anything other than what's in the system config.
But I couldn't track it down.

Empty Cell Fix for Rainy_Day, the cvs version as of 12/2/04):

Need to add a class to the css, I thought this method was peferrable to burying a +7 in the code somewhere when calculating height.
If a user changes their .image class it will throw off the height needed for spacer.gif.

Code Select Expand


.blank_image {
/* Margin should = .image (margin+border-width) */
       border:0;
       margin: 3px;
}


Everything else is in theme.php

In function theme_display_album_list_cat AND function theme_display_album_list find

Code Select Expand


   $params = array('{COL_WIDTH}' => $column_width);
   $empty_cell = template_eval($empty_cell, $params);


Replace with

Code Select Expand


   $params = array('{COL_WIDTH}' => $column_width,
   '{SPACER_HEIGHT}' => $CONFIG['alb_list_thumb_size']
   );
   $empty_cell = template_eval($empty_cell, $params);


Replace the empty_cell section starting at line 294

Code Select Expand


<!-- BEGIN empty_cell -->
       <td width="{COL_WIDTH}%" valign="top">
       <table width="100%" cellspacing="0" cellpadding="0">
       <tr>
               <td height="1" valign="top" class="tableh2">
               &nbsp;
               </td>
       </tr>
       <tr>
               <td>
                       <img src="images/spacer.gif" width="1" height="1" border="0" alt="" /><br />
               </td>
       </tr>
       <tr>
               <td align="center" class="thumbnails">
                       <img src="images/spacer.gif" width="1" height="2" border="0" alt="" /><br />
                       <img src="images/spacer.gif" width="1" height="{SPACER_HEIGHT}" class="blank_image" alt="" /><br />
               </td>
       </tr>
       </table>
       </td>
<!-- END empty_cell -->


Replace the c_empty_cell section starting at line 404

Code Select Expand


<!-- BEGIN c_empty_cell -->
       <td width="{COL_WIDTH}%" valign="top">
       <table width="100%" cellspacing="0" cellpadding="0">
       <tr>
               <td height="1" valign="top" class="tableh2">
               &nbsp;
               </td>
       </tr>
       <tr>
               <td>
                       <img src="images/spacer.gif" width="1" height="1" border="0" alt="" /><br />
               </td>
       </tr>
       <tr>        
               <td align="center" class="thumbnails">
                       <img src="images/spacer.gif" width="1" height="1" border="0" alt="" /><br />
                       <img src="images/spacer.gif" width="1" height="{SPACER_HEIGHT}" class="blank_image" alt="" /><br />
               </td>
       </tr>
       </table>
       </td>
<!-- END c_empty_cell -->



I know this may be an ugly fix, but at least its a starting point.

[donnoman]

This is the more refined fix that went into core.inc.php

from $template_album_list

Code Select Expand


<!-- BEGIN empty_cell -->
       <td width="{COL_WIDTH}%" valign="top">
       <table width="100%" cellspacing="0" cellpadding="0">
       <tr>
               <td height="1" valign="top" class="tableh2">
                       <b>&nbsp;</b>
               </td>
       </tr>
       <tr>
               <td>
                       <img src="images/spacer.gif" width="1" height="1" border="0" alt="" /><br />
               </td>
       </tr>
       <tr>
               <td width="100%" valign="top" class="tableb_compact">
                   <div class="thumbnails" style="background-color:transparent"><img src="images/spacer.gif" width="1" height="{SPACER}" border="0" class="image" style="border:0;margin-top:1;margin-bottom:0" alt="" /></div>
               </td>
       </tr>
       </table>
       </td>
<!-- END empty_cell -->

from $template_album_list_cat

Code Select Expand


<!-- BEGIN c_empty_cell -->
       <td width="{COL_WIDTH}%" valign="top">
       <table width="100%" cellspacing="0" cellpadding="0" >
       <tr>
               <td height="1" valign="top" class="tableh2">
                       <b>&nbsp;</b>
               </td>
       </tr>
       <tr>
               <td>
                       <img src="images/spacer.gif" width="1" height="1" border="0" alt="" /><br />
               </td>
       </tr>
       <tr>
               <td width="100%" valign="top" class="tableb_compact" >
                     <div class="thumbnails" style="background-color:transparent"><img src="images/spacer.gif" width="1" height="{SPACER}" border="0" class="image" style="border:0;margin-top:1;margin-bottom:0" alt="" /></div>
               </td>
       </tr>
       </table>
       </td>
<!-- END c_empty_cell -->


from function theme_display_album_list & theme_display_album_list_cat

Code Select Expand


   $params = array('{COL_WIDTH}' => $column_width,
         '{SPACER}' => $thumb_cell_width
         );
   $empty_cell = template_eval($empty_cell, $params);