fixed firefox problem (need a clear:both after the float:left;

tiles to stop the popup shrinking vertically. Also separated css
AlanBell · Jun 14, 2012 · 0363ebc · 0363ebc
1 parent 994fc95
commit 0363ebc
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 86 deletions.
diff --git a/numbers.html b/numbers.html
@@ -143,7 +143,7 @@ <h2>Numbers</h2>
 <div class="wordtile noun">
 One Hundred
 </div>
-
+<br style="clear:both;"/>
 <script>
 $(document).ready( $(".wordtile").click(function(){say(this)}));
 </script>

diff --git a/speak.html b/speak.html
@@ -7,7 +7,7 @@
 
 <script type="text/javascript" src="fancybox/jquery.fancybox.js"></script>
 <link rel="stylesheet" href="fancybox/jquery.fancybox.css" type="text/css" media="screen" />
-
+<link rel="stylesheet" href="wespeak.css" type="text/css" media="screen" />
 <script type="text/javascript"  src="say.js"></script>
 <script>
 $(document).ready(function() {
@@ -21,57 +21,6 @@
 <title>Click to speak</title>
 
 </head>
-<style>
-body{
-font-family:"Ubuntu";
-}
-.wordtile{
-border:none;
-width:100px;
-height:180px;
-float:left;
-text-align:center;
-margin:5px;
-cursor: pointer;
-padding-top:10px;
-border-radius:15px;
-box-shadow:rgba(0,0,0,0.5) 0px 0px 24px;
-position:relative;
-cursor:pointer;
-}
-.wordtile img{
-width:80px;
-margin:10px;
-position:absolute;
-left:0px;
-bottom:10px;
-}
-.wordtile:hover img{
-filter: alpha(opacity=85); /* for the sake of IE < 9 */
-opacity: 0.85;
-}
-.wordtile:hover{
-box-shadow:rgba(0,0,0,.3) 0px 0px 24px;
-}
-.verb{
-background:#e8b7a6;
-}
-.verb:hover{
-background:#dcaf9e;
-}
-.noun{
-background:#89a8cd;
-}
-.noun:hover{
-background:#82a0c3;
-}
-.other{
-background:#9aeab3;
-}
-.other:hover{
-background:#92deaa;
-}
-</style>
 
 <body>
 <h1>What do you want to say?</h1>

diff --git a/time.html b/time.html
@@ -75,7 +75,7 @@ <h2>Time Words</h2>
 <div class="wordtile noun">
 Bedtime
 </div>
-
+<br style="clear:both;"/>
 
 <script>
 $(document).ready( $(".wordtile").click(function(){say(this)}));

diff --git a/weather.html b/weather.html
@@ -6,42 +6,13 @@
 <script type="text/javascript"  src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
 <script type="text/javascript" src="fancybox/jquery.fancybox.js"></script>
 <link rel="stylesheet" href="fancybox/jquery.fancybox.css" type="text/css" media="screen" />
+<link rel="stylesheet" href="wespeak.css" type="text/css" media="screen" />
+
 <script type="text/javascript"  src="say.js"></script>
 
 
 </head>
-<style>
-body{
-font-family:"Ubuntu";
-}
-.wordtile{
-border:none;
-width:100px;
-height:180px;
-float:left;
-text-align:center;
-margin:5px;
-padding-top:10px;
-border-radius:15px;
-box-shadow:rgba(0,0,0,0.5) 0px 0px 24px;
-position:relative;
-}
-.wordtile img{width:80px;
-margin:10px;
-position:absolute;
-left:0px;
-bottom:10px;}
 
-.verb{
-background:#e8b7a6;
-}
-.noun{
-background:#89a8cd;
-}
-.other{
-background:#9aeab3;
-}
-</style>
 
 <body>
 <h2>Weather Words</h2>
@@ -68,7 +39,7 @@ <h2>Weather Words</h2>
 <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b1/Avers%C4%83_de_ninsoare.png/120px-Avers%C4%83_de_ninsoare.png">
 Snow
 </div>
-
+<br style="clear:both;"/>
 
 <script>
 $(document).ready( $(".wordtile").click(function(){say(this)}));

diff --git a/wespeak.css b/wespeak.css
@@ -0,0 +1,49 @@
+body{
+font-family:"Ubuntu";
+}
+.wordtile{
+border:none;
+width:100px;
+height:180px;
+float:left;
+text-align:center;
+margin:5px;
+cursor: pointer;
+padding-top:10px;
+border-radius:15px;
+box-shadow:rgba(0,0,0,0.5) 0px 0px 24px;
+position:relative;
+cursor:pointer;
+}
+.wordtile img{
+width:80px;
+margin:10px;
+position:absolute;
+left:0px;
+bottom:10px;
+}
+.wordtile:hover img{
+filter: alpha(opacity=85); /* for the sake of IE < 9 */
+opacity: 0.85;
+}
+.wordtile:hover{
+box-shadow:rgba(0,0,0,.3) 0px 0px 24px;
+}
+.verb{
+background:#e8b7a6;
+}
+.verb:hover{
+background:#dcaf9e;
+}
+.noun{
+background:#89a8cd;
+}
+.noun:hover{
+background:#82a0c3;
+}
+.other{
+background:#9aeab3;
+}
+.other:hover{
+background:#92deaa;
+}