Lock items in separate divs to prevent sloppy focus when scaled down/up

3 files changed, 53 insertions, 31 deletions

diff --git a/templates/styles.css b/templates/styles.css
index 6d14e38..8a303da 100644
--- a/templates/styles.css
+++ b/templates/styles.css
@@ -184,7 +184,13 @@ div.album_thumbs {
    font-size: 90%;
 }
 
-a.album_item {
+div.album_item {
+   float: left;
+   width: 19.9em;
+   height: 21.4em;
+}
+
+div.album_item a {
    position: relative;   /*  CSS positioning sucks  */
    float: left;
    width: 19em;
@@ -195,22 +201,23 @@ a.album_item {
    -moz-border-radius: 0.5em;
    -webkit-border-radius: 0.5em;
    background-color: #232729;
-   margin: 4px;     /*  Needs to be changed below in a.album_item:hover */
+   margin: 1px;     /*  Needs to be changed below in a.album_item:hover */
    border: 1px solid #6b6c69;  /*  Cannot use em units here otherwise the box will become jumpy  */
 }
 
-a.album_item:hover {
+
+div.album_item a:hover {
    background-color: #32332F;
-   margin: 3px;    /*  a.album_item->margin - 1px  */ 
+   margin: 0px;    /*  a.album_item->margin - 1px  */ 
    border: 2px solid #A3BED4;
 }
 
-a.album_item img {
+div.album_item img {
    /* landscape */
    padding-top: 2.25em;
 }
 
-a.album_item img.portrait {
+div.album_item img.portrait {
    /* portrait */
    padding-top: 1em;
 }
@@ -264,7 +271,14 @@ div.index_thumbs {
    font-size: 90%;
 }
 
-a.index_item {
+div.index_item {
+   float: left;
+   width: 53.5em;
+   height: 20em;
+   margin: 0.7em;
+}   
+
+div.index_item a {
    position: relative;   /*  CSS positioning sucks  */
    float: left;
    width: 53em;
@@ -275,19 +289,19 @@ a.index_item {
    -moz-border-radius: 0.5em;
    -webkit-border-radius: 0.5em;
    background-color: #232729;
-   margin: 9px;     /*  Needs to be changed below in a.index_item:hover */
+   margin: 1px;     /*  Needs to be changed below in a.index_item:hover */
    border: 1px solid #6b6c69;  /*  Cannot use em units here otherwise the box will become jumpy  */
    color: #BABDB6;
 }
 
-a.index_item:hover {
+div.index_item a:hover {
    background-color: #32332F;
-   margin: 8px;    /*  a.index_item->margin - 1px  */ 
+   margin: 0px;    /*  a.index_item->margin - 1px  */ 
    border: 2px solid #A3BED4;
    color: #A3BED4;
 }
 
-a.index_item img {
+div.index_item img {
    position: absolute;
    left: 1.4em;
    top: 1.4em;
diff --git a/templates/template-album.tmpl b/templates/template-album.tmpl
index 0e5eec3..7123b5a 100644
--- a/templates/template-album.tmpl
+++ b/templates/template-album.tmpl
@@ -34,16 +34,20 @@
   <div class="album_thumbs">
   <!-- $(BEGIN_IMG_LIST) -->
     <!-- $(BEGIN_IMG_LIST_LANDSCAPE) -->
-      <a class="album_item" href="<!-- $(IMG_SUBPAGE) -->" id="<!-- $(IMG_LIST_ID) -->">
-        <img src="<!-- $(IMG_THUMBNAIL) -->" alt="<!-- $(IMG_TITLE) -->" />
-        <span class="album_thumb_text"><!-- $(IMG_FILENAME) --></span>
-      </a>
+      <div class="album_item" id="<!-- $(IMG_LIST_ID) -->">
+        <a href="<!-- $(IMG_SUBPAGE) -->">
+          <img src="<!-- $(IMG_THUMBNAIL) -->" alt="<!-- $(IMG_TITLE) -->" />
+          <span class="album_thumb_text"><!-- $(IMG_FILENAME) --></span>
+        </a>
+      </div>  
     <!-- $(END_IMG_LIST_LANDSCAPE) -->
     <!-- $(BEGIN_IMG_LIST_PORTRAIT) -->
-      <a class="album_item" href="<!-- $(IMG_SUBPAGE) -->" id="<!-- $(IMG_LIST_ID) -->">
-        <img src="<!-- $(IMG_THUMBNAIL) -->" alt="<!-- $(IMG_TITLE) -->" class="portrait" />
-        <span class="album_thumb_text"><!-- $(IMG_FILENAME) --></span>
-      </a>
+      <div class="album_item" id="<!-- $(IMG_LIST_ID) -->">
+        <a href="<!-- $(IMG_SUBPAGE) -->">
+          <img src="<!-- $(IMG_THUMBNAIL) -->" alt="<!-- $(IMG_TITLE) -->" class="portrait" />
+          <span class="album_thumb_text"><!-- $(IMG_FILENAME) --></span>
+        </a>
+      </div>  
     <!-- $(END_IMG_LIST_PORTRAIT) -->
     <!-- $(BEGIN_LIST_SEPARATOR) -->
       <div class="separators">
diff --git a/templates/template-index.tmpl b/templates/template-index.tmpl
index 0545fe2..22a8ad3 100644
--- a/templates/template-index.tmpl
+++ b/templates/template-index.tmpl
@@ -34,20 +34,24 @@
   <div class="index_thumbs">
   <!-- $(BEGIN_IMG_LIST) -->
     <!-- $(BEGIN_IMG_LIST_LANDSCAPE) -->
-      <a class="index_item" href="<!-- $(ALBUM_SUBPATH) -->" id="<!-- $(IMG_LIST_ID) -->">
-         <img src="<!-- $(IMG_THUMBNAIL) -->" alt="<!-- $(IMG_TITLE) -->" />
-         <span class="album_text"><!-- $(IMG_TITLE) --></span><br />
-         <span class="album_subtext"><!-- $(IMG_DESCRIPTION) --></span>
-         <span class="album_note">(<!-- $(ALBUM_NUM_ITEMS) --> items)</span>
-      </a>
+      <div class="index_item" id="<!-- $(IMG_LIST_ID) -->">
+        <a href="<!-- $(ALBUM_SUBPATH) -->">
+           <img src="<!-- $(IMG_THUMBNAIL) -->" alt="<!-- $(IMG_TITLE) -->" />
+           <span class="album_text"><!-- $(IMG_TITLE) --></span><br />
+           <span class="album_subtext"><!-- $(IMG_DESCRIPTION) --></span>
+           <span class="album_note">(<!-- $(ALBUM_NUM_ITEMS) --> items)</span>
+        </a>
+      </div>  
     <!-- $(END_IMG_LIST_LANDSCAPE) -->
     <!-- $(BEGIN_IMG_LIST_PORTRAIT) -->
-      <a class="index_item" href="<!-- $(ALBUM_SUBPATH) -->" id="<!-- $(IMG_LIST_ID) -->">
-         <img src="<!-- $(IMG_THUMBNAIL) -->" alt="<!-- $(IMG_TITLE) -->" />
-         <span class="album_text_portrait"><!-- $(IMG_TITLE) --></span><br />
-         <span class="album_subtext_portrait"><!-- $(IMG_DESCRIPTION) --></span>
-         <span class="album_note">(<!-- $(ALBUM_NUM_ITEMS) --> items)</span>
-      </a>
+      <div class="index_item" id="<!-- $(IMG_LIST_ID) -->">
+        <a href="<!-- $(ALBUM_SUBPATH) -->">
+           <img src="<!-- $(IMG_THUMBNAIL) -->" alt="<!-- $(IMG_TITLE) -->" />
+           <span class="album_text_portrait"><!-- $(IMG_TITLE) --></span><br />
+           <span class="album_subtext_portrait"><!-- $(IMG_DESCRIPTION) --></span>
+           <span class="album_note">(<!-- $(ALBUM_NUM_ITEMS) --> items)</span>
+        </a>
+      </div>  
     <!-- $(END_IMG_LIST_PORTRAIT) -->
     <!-- $(BEGIN_LIST_SEPARATOR) -->
       <div class="separators">