Use of Explicit styles in the layout

Serge D
Serge D's picture

Joined: 2009-06-11
Posts: 2466
Posted: Tue, 2009-06-23 16:02

Is there a specific reasons why explicit style definition is used in some cases?
Example: Album grid cells have a DIV with style="margin-top: 83px;", actually 83 may vary by the image (experimental build).

While I may understand visibility/block use, margins, etc are killing the custom layouts.
would it be removed in the future or where is the code which doing this is located?
 
bharat
bharat's picture

Joined: 2002-05-21
Posts: 7994
Posted: Tue, 2009-06-23 23:51

Where do you see that? We put all CSS into the theme as much as possible so that the theme can override it.
---
Problems? Check gallery3/var/logs
bugs/feature req's | upgrade to the latest code | use git | help! vote!
 
Serge D
Serge D's picture

Joined: 2009-06-11
Posts: 2466
Posted: Wed, 2009-06-24 03:12
Quote:
<li class="gItem gAlbum" id="gItemId-5">
<DIV style="MARGIN-TOP: 83px" jQuery1245812728857="46"><A href="..."><IMG class=gThumbnail alt="..." src="..." width=200 height=46> </A>
<H2><SPAN></SPAN><A href="...">...</A></H2>
<UL class=gMetadata>
<LI>Views: 220</LI>
<LI>By: <A href="#">...</A></LI></UL></DIV>

This is a sample from the page source visible in Source Explorer/Developer Tools (F12) of IE8
It may be a "deception" of the tool or code injected by jQuery. I would suspect the tool but somehow it only happened with update to latest experimental code
 
floridave
floridave's picture

Joined: 2003-12-22
Posts: 27300
Posted: Wed, 2009-06-24 13:45

Viewing the source of the file in Firefox I don't see this;

<ul id="gAlbumGrid">
                      <li id="gItemId-2" class="gItem gAlbum">
        <a href="/index.php/Alexis Bledel">
      <img class="gThumbnail" src="/var/thumbs/Alexis Bledel/.album.jpg?m=1243850928" alt="Alexis Bledel" width="100" height="200"/>    </a>
        <h2><span></span><a href="/index.php/Alexis Bledel">Alexis Bledel</a></h2>
    <ul class="gMetadata">
      <li>Views: 13</li><li>By: <a href="#">admin</a></li>    </ul>

  </li>
  </ul>

but do when using the web developer tools ( firefox plugin);

<li id="gItemId-2" class="gItem gAlbum">
<div style="margin-top: 20px;">
<a href="/index.php/Alexis%20Bledel">
<img class="gThumbnail" height="200" width="100" alt="Alexis Bledel" src="/var/thumbs/Alexis%20Bledel/.album.jpg?m=1243850928"/>
</a>
<h2>
<span/>
<a href="/index.php/Alexis%20Bledel">Alexis Bledel</a>
</h2>
<ul class="gMetadata">
<li>Views: 13</li>
<li>
By:
<a href="#">admin</a>
</li>
</ul>
</div>
</li>

So it does seem to me like a combination of the jQuery and the tool/tools of IE and FF.
I will see if the css/html/ui expert can chime in.

Dave
_____________________________________________
Blog & G2 || floridave - Gallery Team
 
thumb
thumb's picture

Joined: 2004-05-26
Posts: 238
Posted: Thu, 2009-06-25 05:29

There's a jQuery function in the default theme which handles vertical alignment of thumbnails. It does a calculation and enters that value on page load. It should work across browsers and thumbnail sizes.

--
2tbsp.com

 
Serge D
Serge D's picture

Joined: 2009-06-11
Posts: 2466
Posted: Thu, 2009-06-25 12:19

What call are you refereing to and where is it in templates?
 
thumb
thumb's picture

Joined: 2004-05-26
Posts: 238
Posted: Thu, 2009-06-25 14:35

The call is in default/js/ui.init.js, look for vAlign().
--
2tbsp.com

 
Serge D
Serge D's picture

Joined: 2009-06-11
Posts: 2466
Posted: Thu, 2009-06-25 16:43

Thank you. Commenting out the call did help