Overflow (images pushed down) issue in IE and css-fix

Hi community,

this is my first post here and i just want to give something back to you.
I use Gallery since 1.44 i think and switched to 2.0 alpha. The interface is nice but there is the problem with the <div></div> overflow in IE.

I fixed the issue using some css-formating and will show you here. It is done by defining the positions + width for the "main-picture-block" and adjusting the sidebar the same way.

The fix is still "hard-coded" but its possible to put in the theme-related css-file.

Files to create:

./gallery2homedirectory/layouts/matrix/templates/singleBody.tpl.local

{*
 * $Revision: 1.39 $ $Date: 2004/11/22 22:45:58 $
 * If you want to customize this file, do not edit it directly.
 * Instead, copy it to singleBody.tpl.local and edit that version instead.
 * Gallery will look for that file first and use it if it exists
 * and when you upgrade, your changes will not get overwritten.
 *}
{if !empty($layout.imageViews)}
{assign var="image" value=$layout.imageViews[$layout.imageViewsIndex]}
{/if}
      
{include file="gallery:layouts/matrix/templates/pathbar.tpl"}  

<div id="gsContents" style="position:absolute; top:91px; left:10px; width:180px; z-index:1;">
  {include file="gallery:templates/sidebar.tpl"} 
</div>

<div id="gsAlbumContents" style="position:absolute; top:91px; left:190px; z-index:2; width:auto; height:auto;">
    <div class="gbTopFlag">
      <table class="gbTitleBanner">
        <tr>
          <td>
            <h1 class="giTitle">
              {$layout.item.title|default:$layout.item.pathComponent|markup}
            </h1>
            <p class="giDescription">
              {$layout.item.description|markup}
            </p>
          </td>
          <td>
            <ul class="giInfo">
              <li>
                {if !empty($layout.useCaptureDate) && isset($layout.captureTimestamp)}
                {capture name=itemTimestamp}{g->date timestamp=$layout.captureTimestamp}{/capture}
                {else}
                {capture name=itemTimestamp}{g->date timestamp=$layout.item.creationTimestamp}{/capture}
                {/if}
                {g->text text="Date: %s" arg1=$smarty.capture.itemTimestamp}
              </li>
        
              {if count($layout.imageViews) > 1}
              <li>
                {g->text text="Size: "}
                <select onchange="{literal}javascript:if (this.value) { newLocation = this.value; this.options[0].selected = true; location.href= newLocation; }{/literal}">
                  {section name=imageView loop=$layout.imageViews}
                  {if $smarty.section.imageView.index == $layout.imageViewsIndex}
                  {assign var="selected" value="selected=\"selected\""}
                  {else}
                  {assign var="selected" value=""}
                  {/if}
        
                  <option {$selected} value="{g->url arg1="view=core:ShowItem" arg2="itemId=`$layout.item.id`" arg3="imageViewsIndex=`$smarty.section.imageView.index`"}">
                    {if empty($layout.imageViews[imageView].width)}
                      {if isset($layout.imageViews[imageView].isSource)}
                      {g->text text="Source"}
                      {else}
                      {g->text text="Unknown"}
                      {/if}
                    {else}
                    {g->text text="%dx%d" arg1=$layout.imageViews[imageView].width arg2=$layout.imageViews[imageView].height}
                    {/if}
                  </option>
                  {/section}
                </select>
              </li>
              {/if}
        
              {if !empty($layout.sourceImage)}
              <li>
                {g->text text="Full size: "}
                {capture name="fullSize"}
                {if empty($layout.sourceImage.width)}
                {$layout.sourceImage.itemTypeName.0}
                {else}
                {g->text text="%dx%d" arg1=$layout.sourceImage.width arg2=$layout.sourceImage.height}
                {/if}
                {/capture}
                {if count($layout.imageViews) > 1}
                <a href="{g->url arg1="view=core:ShowItem" arg2="itemId=`$layout.item.id`" arg3="imageViewsIndex=`$layout.sourceImageViewIndex`"}">{$smarty.capture.fullSize}</a>
                {else}
                {$smarty.capture.fullSize}
                {/if}
              </li>
              {/if}

              {if $layout.showImageOwner}
              <li>
                {g->text text="Owner: %s" arg1=$layout.owner.fullName|default:$layout.owner.userName}
              </li>
              {/if}
            </ul>
          </td>
        </tr>
      </table>
    </div>

<div class="gbNavBar">
      {include file="gallery:layouts/matrix/templates/itemNavigator.tpl"}
    </div>

    <div class="gsSingleImage">
      {if !empty($layout.imageViews)}
      {capture name="fallback"}
      <a href="{g->url arg1="view=core:DownloadItem" arg2="itemId=`$layout.item.id`"}">
        {g->text text="Download this %s" arg1=`$layout.sourceImage.itemTypeName.1`} 
      </a>
      {/capture}

      {if ($layout.can.viewInline[$layout.imageViewsIndex])}
	{if isset($layout.frame)}
	  {include file=$layout.frame.template ImageFrame_data=$layout.frame.data
		   ImageFrame_frame=$layout.frame.photoFrame item=$layout.item image=$image}
	{else}
	  {g->image item=$layout.item image=$image fallback=$smarty.capture.fallback}
	{/if}
      {else}
	{$smarty.capture.fallback}
      {/if}
      {else}
	{g->text text="There is nothing to view for this item."}
      {/if}
    </div>

    {if !empty($layout.itemDetailFiles)}
    {foreach from=$layout.itemDetailFiles key=moduleId item=detailFile}
    {include file="gallery:$detailFile" l10Domain="modules_$moduleId"}
    {/foreach}
    {/if}

    <div class="gbBottomFlag">
      <div class="gbNavBar">
        {include file="gallery:layouts/matrix/templates/itemNavigator.tpl"}
      </div>
    </div>
</div>

./gallery2homedirectory/templates/sidebar.tpl.local

{*
 * $Revision: 1.6 $ $Date: 2004/11/23 06:18:55 $
 * If you want to customize this file, do not edit it directly.
 * Instead, copy it to sidebar.tpl.local and edit that version instead.
 * Gallery will look for that file first and use it if it exists
 * and when you upgrade, your changes will not get overwritten.
 *}
{if $layout.show.sidebar}
<div id="gsSidebar" style="width:180px">

  {* System links in sidebar? *}
  {if (!empty($layout.show.systemLinks) && !empty($layout.systemLinks))}
  <div class="gbMenu">
    {if $layout.show.sidebarGreeting}
    <h3 class="giTitle">
      {g->text text="Welcome, %s" arg1=$layout.user.fullName|default:$layout.user.userName}
    </h3>
    {/if}
    <ul>
      {foreach from=$layout.systemLinks item=link}
	<li> <a href="{$link.url}">{$link.text}</a> </li>
      {/foreach}
    </ul>
  </div>
  {/if}

  {* Navigation to parents in sidebar? *}
  {if (!empty($layout.show.parents) && !empty($layout.parents))}
  <div class="gbMenu">
    <h3 class="giTitle">{g->text text="Navigation"}</h3>
    <ul>
    {foreach from=$layout.parents item=parent}
      <li>
        &
        <a href="{g->url arg1="view=core:ShowItem" arg2="itemId=`$parent.id`"}">
          {$parent.title|default:$parent.pathComponent|markup}
        </a>
      </li>
    {/foreach}
    </ul>
  </div>
  {/if}

  {* Core System content *}
  {if isset($layout.systemContent.core.login)}
  {assign var=moduleFile value=$layout.systemContent.core.login}
  {include file="gallery:$moduleFile" l10Domain="modules_core"} 
  {/if}

  {* Search form, if module is activated *}
  {if isset($layout.systemContent.search.searchBox)}
  {assign var=moduleFile value=$layout.systemContent.search.searchBox}
  {include file="gallery:$moduleFile" l10Domain="modules_search"} 
  {/if}

  {if isset($smarty.capture.sidebarInsert_1)} {$smarty.capture.sidebarInsert_1} {/if}

  {* Item actions *}
  {if ($layout.show.sidebarActions && !empty($layout.itemLinks))}
  <div class="gbMenu">
    <h3 class="giTitle">{g->text text="Actions"}</h3>
    <ul>
      {foreach from=$layout.itemLinks item=link}
      <li><a href="{$link.url}">{$link.text}</a></li>
      {/foreach}
    </ul>
  </div>
  {/if}

  {* Peer items *}
  {if $layout.show.sidebarPeers}
  <div class="gbMenu">
    <h3 class="giTitle"> {$layout.parent.title|default:$layout.parent.pathComponent|markup}</h3>
    <p class="giDescription">
      {g->text one="(%d item)" many="(%d items)" count=$layout.peerCount arg1=$layout.peerCount}
    </p>

    <ul>
      {assign var="lastIndex" value=0}
      {foreach from=$layout.peers item=peer}
      {assign var="title" value=$peer.title|default:$peer.pathComponent|markup}
      {if ($peer.peerIndex - $lastIndex > 1)}
      <li>...</li>
      {/if}

      {if ($peer.id == $layout.item.id)}
      <li class="giSelected">
        {g->text text="%d. %s" arg1=$peer.peerIndex arg2=$title|entitytruncate:14}
      </li>
      {else}
      <li><a href="{g->url arg1="view=core:ShowItem" arg2="itemId=`$peer.id`"}">
        {g->text text="%d. %s" arg1=$peer.peerIndex arg2=$title|entitytruncate:14}</a></li>
      {/if}
      {assign var="lastIndex" value=$peer.peerIndex}
      {/foreach}
    </ul>
  </div>
  {/if}

  {if isset($smarty.capture.sidebarInsert_2)} {$smarty.capture.sidebarInsert_2} {/if}

  {* Extra modules system content *}
  {foreach from=$layout.systemContent key=moduleId item=moduleContent}
  {foreach from=$moduleContent key=moduleContentKey item=moduleFile}
  {if ($moduleId != 'search' || $moduleContentKey != 'searchBox') && ($moduleId != 'core' || $moduleContentKey != 'login')}
    {include file="gallery:$moduleFile" l10Domain="modules_$moduleId"}
  {/if}
  {/foreach}
  {/foreach}

  {if isset($smarty.capture.sidebarInsert_3)} {$smarty.capture.sidebarInsert_3} {/if}

</div>
{/if}

So what had i done here? I specified the width of the sidebar manually and format it "hard" in the "Main display tpl". I also reformated some <div></div> things. Just have a look and excuse my bad english.

"The main thing":

...
<div id="gsContents" style="position:absolute; top:91px; left:10px; width:180px; height:150px; z-index:1;">
  {include file="gallery:templates/sidebar.tpl"} 
</div>

<div id="gsAlbumContents" style="position:absolute; top:91px; left:190px; z-index:2; width:auto; height:auto;">
    <div class="gbTopFlag">
...

I did not tested it with other browsers than IE, but maybe someone could do it? It should work, cause its "minimal" CSS and i checked the restrictions via "selfhtml". They sad that positioning should always work on DIV-tags. There might be some problems with other tags i.e. TABLE etc. So it should work. ( imo IE has the baddest css-support of all actuall browsers)

The "height:150px" is not required. I'll remove it in the first post.

Thanks for feedback.

doc

EDIT:

You may check, how it looks like here:

http://www.n0t.de

I tested it with Firefox 1.0 (Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.5) Gecko/20041107 Firefox/1.0)

And it works very well.

doctormord, you don't understand the problem or perhaps you wanted to solve a different problem.
I browsed to your G2 website and the the thumbnail images move all below the sidebar if the browser windows is small enough (about < 800px). I tested it in IE 6 SP2, opera 7.x, firefox 1.
Plus, IE 6 and firefox 1 show a different result than opera when looking at images with a huge width, see http://www.n0t.de/main.php/view/user_bilder/hbtje/lfa2k4/IMG_0573.jpg?g2_imageViewsIndex=4

@thumb70: this overflow with the extreme wide images causes also the problem in the embedded G2s. When embedded, G2 should have scroll bars instead of just overflow.

somehow the header width is correct in opera 7.x for the wide image from the above link, but not in IE / firefox.
...good luck. i tweaked the css for the tabbed menu of my website (www.nei.ch) for weeks (or months?) to get it finally working. yes, finding css that works in all browsers to get a semantically correct websites (tableless) is a real pain.

I asked several people to test this hack and all told me, that the picture is beside the sidebar not under it so i think it works. :D

Yes, they did. I even asked some more ppl and all of them told me, that it works:

Browsers tested:

Opera 7.54
Firefox 1.0
IE 6.0
konqueror 3.3.1

Hmm, i only asked german Users to test this, maybe it depends on the language Setting in Browser? :~

But maybe "position:absolute/relative + width, height and px settings" CSS is a way in the right direction. :|

doctormord, I still believe there's a misunderstanding here.

the main problem we're talking about is this:
1. go to http://www.n0t.de/main.php/view/user_bilder/hbtje/lfa2k4/?g2_page=1
2. resize your browser window, make it quite narrow (decrease the width)
-> effect:
thumbnails drop below the sidebar.

thumb70, i only fixed it for the image-view. When you browse the thumbnails and narrow the browser, then the table will get wrapped, thats right.

I'll fix it for the thumbnail-view too, stay tuned.

I fixed it for the album-view too now.

Basicly its the same tweaking like in the image-view.

albumBody.tpl.local

{*
 * $Revision: 1.59 $ $Date: 2004/11/23 01:08:12 $
 * If you want to customize this file, do not edit it directly.
 * Instead, copy it to albumBody.tpl.local and edit that version instead.
 * Gallery will look for that file first and use it if it exists
 * and when you upgrade, your changes will not get overwritten.
 *
 * To Do:
 * 1. Figure out how to get Gallery homepage to display album items that span full width of browser window.
 * 2. Reconsider albums in a single td... 
 *
 *}

{include file="gallery:layouts/matrix/templates/pathbar.tpl"}

<div id="gsContents" style="position:absolute; top:91px; left:10px; width:180px; z-index:1;">
  {include file="gallery:templates/sidebar.tpl"}
</div>

<div id="gsAlbumContents" style="position:absolute; top:91px; left:190px; z-index:2; width:auto; height:auto;">
    
    <div class="gbTopFlag">
      <table class="gbTitleBanner">
        <tr>
          <td>
            <h1 class="giTitle">
              {$layout.item.title|default:$layout.item.pathComponent|markup}
            </h1>
            <p class="giDescription">
              {$layout.item.description|markup}
            </p>      
          </td>
  
          <td>
            <ul class="giInfo">
              <li>
                {capture name=creationTimestamp}
                {g->date timestamp=$layout.item.creationTimestamp}
                {/capture}
                {g->text text="Date: %s" arg1=$smarty.capture.creationTimestamp}
              </li>
    
              <li>
                {g->text one="Size: %d item" many="Size: %d items"
                         count=$layout.childCount arg1=$layout.childCount}
                {if $layout.descendentCount > $layout.childCount}
                  {g->text one="(%d item total)" many="(%d items total)"
                           count=$layout.descendentCount arg1=$layout.descendentCount}
                {/if}
              </li>    
              {if $layout.showAlbumOwner}
              <li>
                {g->text text="Owner: %s" arg1=$layout.owner.fullName|default:$layout.owner.userName}
              </li>
              {/if}
            </ul>
          </td>
        </tr>
      </table>
    </div>
    
    <div class="gbNavBar">
      {include file="gallery:layouts/matrix/templates/itemNavigator.tpl"}
    </div>
    
    {if count($layout.children) > 0}
    {assign var="childrenInColumnCount" value=0}
    <table id="gbThumbMatrix">
      <tr>
        {foreach from=$layout.children item=child}

        {* Move to a new row *}
        {if ($childrenInColumnCount == $layout.columnSize)}
      </tr>
      <tr>
        {assign var="childrenInColumnCount" value=0}
        {/if}

        {assign var=childrenInColumnCount value="`$childrenInColumnCount+1`"}
        <td class="{if $child.canContainChildren}gbItemAlbum{else}gbItemImage{/if}" 
            style="width: 10%">
          <div class="giThumbImage">
	    {capture name="link"}<a href="{g->url arg1="view=core:ShowItem"
						  arg2="itemId=`$child.id`"}">{/capture}
	    {if $child.canContainChildren}
	      {assign var=frameType value="albumFrame"}
	    {else}
	      {assign var=frameType value="itemFrame"}
	    {/if}
	    {if isset($layout.frame.$frameType) && isset($child.thumbnail)}
	      {include file=$layout.frame.template ImageFrame_data=$layout.frame.data
		       ImageFrame_frame=$layout.frame.$frameType item=$child image=$child.thumbnail
		       ImageFrame_pre=$smarty.capture.link ImageFrame_post="</a>"}
	    {else}
	      {$smarty.capture.link}
              {if isset($child.thumbnail)}
              {g->image item=$child image=$child.thumbnail}
              {else}
              {g->text text="no thumbnail"}
              {/if}
	      </a>
	    {/if}

            {if !empty($child.itemLinks)}
            <select onchange="{literal}javascript:if (this.value) { newLocation = this.value; this.options[0].selected = true; location.href= newLocation; }{/literal}" class="giActionSelect">
              <option label="{if $child.canContainChildren}{g->text text="&amp; album actions &amp;"}{else}{g->text text="&amp; item actions &amp;"}{/if}" value="">{if $child.canContainChildren}{g->text text="&amp; album actions &amp;"}{else}{g->text text="&amp; item actions &amp;"}{/if}</option>

              {foreach from=$child.itemLinks item=link}
              <option label="{$link.text}" value="{$link.url}">{$link.text}</option>
              {/foreach}
            </select>
            {/if}
          </div>

          <h2 class="giTitle">
            {if $child.canContainChildren}
            {g->text text="Album: %s" arg1=$child.title|default:$child.pathComponent|markup}
            {else}
            {$child.title|default:$child.pathComponent|markup}
            {/if}
          </h2>

          <p class="giDescription">
            {$child.summary|entitytruncate:256|markup}
          </p>

          <ul class="giInfo">
            <li>
              {if !empty($layout.useCaptureDate) && isset($child.captureTimestamp)}
              {capture name=childTimestamp}{g->date timestamp=$child.captureTimestamp}{/capture}
              {else}
              {capture name=childTimestamp}{g->date timestamp=$child.creationTimestamp}{/capture}
              {/if}
              {g->text text="Date: %s" arg1=$smarty.capture.childTimestamp}
            </li>
            
            {if ($child.canContainChildren && $layout.showAlbumOwner) || (!$child.canContainChildren && $layout.showImageOwner)}
            <li>
              {g->text text="Owner: %s"
                       arg1=$layout.ownerMap[$child.ownerId].fullName|default:$layout.ownerMap[$child.ownerId].userName}
            </li>
            {/if}

            {if ($child.canContainChildren && $child.childCount > 0)}
            <li>
              {g->text one="Size: %d item" many="Size: %d items"
                       count=$child.childCount arg1=$child.childCount}
              {if $child.descendentCount > $child.childCount}
                {g->text one="(%d item total)" many="(%d items total)"
                         count=$child.descendentCount arg1=$child.descendentCount}
              {/if}
            </li>
            {/if}

            {if ($child.viewCount > 0)}
            <li>
              {g->text text="Views: %d" arg1=$child.viewCount}
            </li>
            {/if}

            {foreach from=$child.itemSummaries item=summary}
            <li>
              {$summary}
            </li>
            {/foreach}

          </ul>
        </td>
        {/foreach}

        {* flush the rest of the row with empty cells *}
        {section name="flush" start=$childrenInColumnCount loop=$layout.columnSize}
        <td>&amp;</td>
        {/section}
      </tr>
    </table>
    {else}
    <div id="gsStatus">
      <p class="giEmpty">
      {g->text text="This album is empty."}
      </p>
    </div>
    {/if}

    {if !empty($layout.itemDetailFiles)}
    {foreach from=$layout.itemDetailFiles key=moduleId item=detailFile}
    {include file="gallery:$detailFile" l10Domain="modules_$moduleId"}
    {/foreach}
    {/if}

    <div class="gbBottomFlag">
      <div class="gbNavBar">
        {include file="gallery:layouts/matrix/templates/itemNavigator.tpl"}
      </div>
      <ul class="giHorizontalLinks">
        {if !empty($layout.jumprange)}
	<li>{g->text text="Page:"}</li>
	{/if}
        {assign var="lastPage" value=0}
        {foreach name=jumprange from=$layout.jumprange item=page}
        {if ($page - $lastPage >= 2)}
        <li>
          {if ($page - $lastPage == 2)}
          <a href="{g->url arg1="view=core:ShowItem" arg2="itemId=`$layout.item.id`" arg3="page=`$page-1`"}">{$page-1}</a>
          {else}
          ...
          {/if}
        </li>
        {/if}

        {if ($layout.currentPage == $page)}
        <li class="giSelected">
          {$page}
        </li>
        {else}
        <li>
          <a href="{g->url arg1="view=core:ShowItem" arg2="itemId=`$layout.item.id`" arg3="page=$page"}">{$page}</a>
        </li>
        {/if}
        {assign var="lastPage" value=$page}
        {/foreach}
      </ul>
    </div>
</div>

The important part is the following:

<div id="gsContents" style="position:absolute; top:91px; left:10px; width:180px; z-index:1;">
  {include file="gallery:templates/sidebar.tpl"}
</div>

<div id="gsAlbumContents" style="position:absolute; top:91px; left:190px; z-index:2; width:auto; height:auto;">

Just set the sidebar in its own <div></div> and put the rest in a second.
Then remove one </div> at the end, because we dont need it anymore.

The sidebar got tweaked at the top of this thread.

Excuse my english, i hope you understand me. :oops:

doctormord, that is a good workaround but I don't think it's a good long term solution. valiant, if you look closely you'll see this is using absolute positioning of the main content block.. as soon as someone modifies their global.tpl with a custom header they will complain how the content covers the header! You can even see the problem in the link above by making the window skinny enough that the breadcrumb line-wraps...

sure, its just a work-around. But its possible to get it "real-work" when you also setup the global.tpl to "position"-thingies. An other way is to do it with position:relative and those stuff. There is also another way to format html via css-tables". That arent real tables, but they work like a real table, just with css-cmds. They're good for formating XML-Data.

Basicly, you need to "rewrite" the Design-Enginge... :o

Hey, doctormord, nice work. I haven't reviewed it detail, but I think we'll get a permanent solution out of this that takes the hacks and absolute positioning considerations into account.

I believe a combination of CSS updates with some shifting of how elements are nested in the HTML markup will correct this problem. I've been so focused on CSS fixes that I haven't considered the impact of div container relationships within the document.

mindless, are you going to make this fix your self in next version of G2?
Because the current situation awful.
Thanks.

valiant, just you understand why I asked.
I am planing to migrate from G1 to G2 now step-by-step.
I am not going to show this G2 for users, just for me in current stage.
But I must be shure that in final G2 this problem will be fixed.
That's why I asked this question.

so, i've finally actually taken a look at this.. here's my take:
the sidebar and main content in matrix layout use css floats.. each is float:left, sidebar is width:20% and content is width:78%.. as this total width is < 100% then gecko based browsers won't wrap the content down below the sidebar, even if album content overflows the 78% width. I guess IE expands the content container when the content overflows and it decides to wrap and place it below the sidebar.
Here's an alternate strategy that may work.. maybe people can try it on various browsers and give feedback.
In templates/layout.css.php change:

#gsSidebar, #gsAdminSidebar {
        float: left;
        width: 20%;
}

#gsAlbumContents, #gsAdminContents, #gsOtherContents {
    float: left;
    width: 78%;
}

to:

#gsSidebar, #gsAdminSidebar {
        display: table-cell;
        vertical-align: top;
        padding-right: 1em;
}

#gsAlbumContents, #gsAdminContents, #gsOtherContents {
    display: table-cell;
    vertical-align: top;
}

These two blocks aren't actually right next to eachother in the file.. just edit each where you find them. This strategy makes the two divs behave like table cells so they don't wrap.

Makes things worse!
Before:
Firefox: Content didn't wrap down if window was very small.
IE6: Content did wrap down if window was very small.

With changes:
Firefox: Content wraps down even if window is very very wide. And it's quite unstable. If I activate the webdeveloper extension of firefox, and make the css and box borders visible, suddenly the content is where it should be, well nearly where it should be.
IE6: Content wraps down even if window is very very wide AND the horizontal lines (<hr>) of the sidebar are as wide as the whole monitor/window.