From bdf72598979590e621181a8a5b83bcd82f5eef25 Mon Sep 17 00:00:00 2001
From: Ilya Kantor <iliakan@gmail.com>
Date: Mon, 9 Mar 2015 19:16:21 +0300
Subject: [PATCH] fix carousel task li space

---
 .../6-carousel/solution.view/index.html       | 20 ++++++++--------
 .../6-carousel/solution.view/style.css        |  4 ++++
 .../6-carousel/source.view/index.html         | 24 +++++++++----------
 .../6-carousel/source.view/style.css          |  4 ++++
 .../1-modal-dialog/solution.view/index.html   |  4 ++--
 5 files changed, 32 insertions(+), 24 deletions(-)

diff --git a/2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/solution.view/index.html b/2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/solution.view/index.html
index 4da04229..5059dcaf 100755
--- a/2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/solution.view/index.html
+++ b/2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/solution.view/index.html
@@ -11,16 +11,16 @@
     <button class="arrow prev">⇦</button>
     <div class="gallery">
       <ul class="images">
-        <li><img src="https://js.cx/carousel/1.png">
-          <li><img src="https://js.cx/carousel/2.png">
-            <li><img src="https://js.cx/carousel/3.png">
-              <li><img src="https://js.cx/carousel/4.png">
-                <li><img src="https://js.cx/carousel/5.png">
-                  <li><img src="https://js.cx/carousel/6.png">
-                    <li><img src="https://js.cx/carousel/7.png">
-                      <li><img src="https://js.cx/carousel/8.png">
-                        <li><img src="https://js.cx/carousel/9.png">
-                          <li><img src="https://js.cx/carousel/10.png">
+        <li><img src="https://js.cx/carousel/1.png"></li>
+        <li><img src="https://js.cx/carousel/2.png"></li>
+        <li><img src="https://js.cx/carousel/3.png"></li>
+        <li><img src="https://js.cx/carousel/4.png"></li>
+        <li><img src="https://js.cx/carousel/5.png"></li>
+        <li><img src="https://js.cx/carousel/6.png"></li>
+        <li><img src="https://js.cx/carousel/7.png"></li>
+        <li><img src="https://js.cx/carousel/8.png"></li>
+        <li><img src="https://js.cx/carousel/9.png"></li>
+        <li><img src="https://js.cx/carousel/10.png"></li>
       </ul>
     </div>
     <button class="arrow next">⇨</button>
diff --git a/2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/solution.view/style.css b/2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/solution.view/style.css
index 73997cdb..9ff8a831 100755
--- a/2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/solution.view/style.css
+++ b/2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/solution.view/style.css
@@ -61,6 +61,10 @@ body {
   padding: 0;
   list-style: none;
   transition: margin-left 250ms;
+  /* remove white-space between inline-block'ed li */
+  /* http://davidwalsh.name/remove-whitespace-inline-block */
+  
+  font-size: 0;
 }
 
 .gallery li {
diff --git a/2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/source.view/index.html b/2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/source.view/index.html
index 6de9e7eb..59e72f15 100755
--- a/2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/source.view/index.html
+++ b/2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/source.view/index.html
@@ -14,22 +14,22 @@
 
 
   <ul>
-    <li><img src="https://js.cx/carousel/1.png">
-      <li><img src="https://js.cx/carousel/2.png">
-        <li><img src="https://js.cx/carousel/3.png">
-          <li><img src="https://js.cx/carousel/4.png">
-            <li><img src="https://js.cx/carousel/5.png">
-              <li><img src="https://js.cx/carousel/6.png">
-                <li><img src="https://js.cx/carousel/7.png">
-                  <li><img src="https://js.cx/carousel/8.png">
-                    <li><img src="https://js.cx/carousel/9.png">
-                      <li><img src="https://js.cx/carousel/10.png">
+    <li><img src="https://js.cx/carousel/1.png"></li>
+    <li><img src="https://js.cx/carousel/2.png"></li>
+    <li><img src="https://js.cx/carousel/3.png"></li>
+    <li><img src="https://js.cx/carousel/4.png"></li>
+    <li><img src="https://js.cx/carousel/5.png"></li>
+    <li><img src="https://js.cx/carousel/6.png"></li>
+    <li><img src="https://js.cx/carousel/7.png"></li>
+    <li><img src="https://js.cx/carousel/8.png"></li>
+    <li><img src="https://js.cx/carousel/9.png"></li>
+    <li><img src="https://js.cx/carousel/10.png"></li>
   </ul>
 
 
   <script>
-    /* этот код помечает картинки цифрами, для удобства разработки
-          его можно убрать, если не нужен */
+    // этот код помечает картинки цифрами, для удобства разработки
+    // его можно убрать, если не нужен
     var lis = document.getElementsByTagName('li');
     for (var i = 0; i < lis.length; i++) {
       lis[i].style.position = 'relative';
diff --git a/2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/source.view/style.css b/2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/source.view/style.css
index 9b8680d6..430a725e 100644
--- a/2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/source.view/style.css
+++ b/2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/source.view/style.css
@@ -24,6 +24,10 @@ ul {
   margin: 0;
   padding: 0;
   list-style: none;
+  /* убрать между inline-block li лишние пробелы, которые есть в HTML */
+  /* http://davidwalsh.name/remove-whitespace-inline-block */
+  
+  font-size: 0;
 }
 
 ul img {
diff --git a/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/solution.view/index.html b/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/solution.view/index.html
index cc7c74cb..ef7cbfd0 100755
--- a/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/solution.view/index.html
+++ b/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/solution.view/index.html
@@ -75,8 +75,8 @@
   </div>
 
   <script>
-    /* Показать полупрозрачный DIV, затеняющий всю страницу 
-        (а форма будет не в нем, а рядом с ним, чтобы не полупрозрачная) */
+    // Показать полупрозрачный DIV, затеняющий всю страницу 
+    // (а форма будет не в нем, а рядом с ним, чтобы не полупрозрачная) 
     function showCover() {
       var coverDiv = document.createElement('div');
       coverDiv.id = 'cover-div';