IE6/7/8 tested, not fully functional in IE5.5

tereska · Sep 7, 2009 · 7abf525 · 7abf525
1 parent 2c910f5
commit 7abf525
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 11 deletions.
diff --git a/css/talk.css b/css/talk.css
@@ -1,6 +1,6 @@
 /* **************** TALK BUBBLE ***************** */
-.bubble{overflow:hidden;_zoom:1;margin:10px;}
-.bubble b b{position:absolute;height:0;width:0;border: solid 7px transparent;_border: 7px solid #fff;}
+.bubble{overflow:hidden;_overflow:visible;_zoom:1;margin:10px;}
+.bubble b b{position:absolute;height:0;width:0;border: solid 7px transparent;_border: 7px solid #fff /* set color to match background color for IE6 */;}
 .bubble .bottom{visibility:hidden;}
 /* top bubbles */
 .bubbleTop .inner{margin-top:7px;}

diff --git a/talk.html b/talk.html
@@ -20,7 +20,7 @@ <h1>Talk Bubbles</h1>
 	<p>Talk bubbles allow you to have cartoon-like talk bubbles with zero images. For now, they are based on standard module format.</p>
 	<div class="line">
 		<div class=" unit size1of4">
-			<div class="bubble bubbleTop yowza"> 
+			<div class="mod bubble bubbleTop yowza"> 
 				<b class="top"><b class="tl"></b><b class="tr"></b></b> 
 				<div class="inner">
 					<div class="hd fire">
@@ -34,7 +34,7 @@ <h3>yowza</h3>
 			</div>
 		</div>
 		<div class=" unit size1of4">
-			<div class="bubble bubbleLeft lol"> 
+			<div class="mod bubble bubbleLeft lol"> 
 				<b class="top"><b class="tl"></b><b class="tr"></b></b> 
 				<div class="inner">
 					<div class="hd fire">
@@ -48,7 +48,7 @@ <h3>lol</h3>
 			</div>
 		</div>
 		<div class=" unit size1of4">
-			<div class="bubble bubbleRight meep"> 
+			<div class="mod bubble bubbleRight meep"> 
 				<b class="top"><b class="tl"></b><b class="tr"></b></b> 
 				<div class="inner">
 					<div class="hd fire">
@@ -62,7 +62,7 @@ <h3>meep</h3>
 			</div>
 		</div>
 		<div class=" unit size1of4 lastUnit">
-			<div class="bubble bubbleBottom yoyo"> 
+			<div class="mod bubble bubbleBottom yoyo"> 
 				<b class="top"><b class="tl"></b><b class="tr"></b></b> 
 				<div class="inner">
 					<div class="hd fire">
@@ -79,7 +79,7 @@ <h3>Yoyo</h3>
 	<h2>Extending the talk bubbles</h2>
 	<div class="line">
 		<div class=" unit size1of4">
-			<div class="bubble bubbleTop yowza bubbleVerticalExt"> 
+			<div class="mod bubble bubbleTop yowza bubbleVerticalExt"> 
 				<b class="top"><b class="tl"></b><b class="tr"></b></b> 
 				<div class="inner">
 					<div class="hd fire">
@@ -93,7 +93,7 @@ <h3>yowza + bubbleVerticalExt</h3>
 			</div>
 		</div>
 		<div class=" unit size1of4">
-			<div class="bubble bubbleLeft lol bubbleHorizontalExt"> 
+			<div class="mod bubble bubbleLeft lol bubbleHorizontalExt"> 
 				<b class="top"><b class="tl"></b><b class="tr"></b></b> 
 				<div class="inner">
 					<div class="hd fire">
@@ -107,7 +107,7 @@ <h3>lol + bubbleHorizontalExt</h3>
 			</div>
 		</div>
 		<div class=" unit size1of4">
-			<div class="bubble bubbleRight meep bubbleHorizontalExt"> 
+			<div class="mod bubble bubbleRight meep bubbleHorizontalExt"> 
 				<b class="top"><b class="tl"></b><b class="tr"></b></b> 
 				<div class="inner">
 					<div class="hd fire">
@@ -121,7 +121,7 @@ <h3>meep + bubbleHorizontalExt</h3>
 			</div>
 		</div>
 		<div class=" unit size1of4 lastUnit">
-			<div class="bubble bubbleBottom yoyo bubbleVerticalExt"> 
+			<div class="mod bubble bubbleBottom yoyo bubbleVerticalExt"> 
 				<b class="top"><b class="tl"></b><b class="tr"></b></b> 
 				<div class="inner">
 					<div class="hd fire">
@@ -138,7 +138,7 @@ <h3>Yoyo + bubbleVerticalExt</h3>
 	<h2>Suggested use:</h2>
 	<div class="line">
 		<div class=" unit size1of3">
-			<div class="bubble bubbleBottom discuss"> 
+			<div class="mod bubble bubbleBottom discuss"> 
 				<b class="top"><b class="tl"></b><b class="tr"></b></b> 
 				<div class="inner">
 					<div class="bd">