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

1 files changed, 25 insertions, 11 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;