[yelp-xsl] Fix placement of stuff in xhtml & strict mode

[Shaun McCance <shaunm src gnome org>]

commit 537970b9b9e30e745d3267c20efa5d957430dcaa
Author: Shaun McCance <shaunm gnome org>
Date:   Sat Nov 3 22:23:26 2012 -0400

    Fix placement of stuff in xhtml & strict mode
    
    Note to self: in strict mode, anything inline-like has space
    reserved underneath it for descenders. That includes anything
    that's inline-block. It also includes img and video, which
    are considered inline by default.

 xslt/common/html.xsl                 |    1 +
 xslt/mallard/html/mal2html-media.xsl |   22 ++++++++++++++++++++++
 xslt/mallard/html/mal2html-page.xsl  |   15 +++++----------
 3 files changed, 28 insertions(+), 10 deletions(-)
---
diff --git a/xslt/common/html.xsl b/xslt/common/html.xsl
index 2dda3c6..a10c3d1 100644
--- a/xslt/common/html.xsl
+++ b/xslt/common/html.xsl
@@ -1238,6 +1238,7 @@ pre span.prompt {
 }
 span.sys { font-family: monospace; }
 span.var { font-style: italic; }
+.media-block { display: block; }
 div.media-video > div.inner { display: inline-block; text-align: center; }
 div.media-video > div.inner video { margin: 0; }
 div.media-controls {
diff --git a/xslt/mallard/html/mal2html-media.xsl b/xslt/mallard/html/mal2html-media.xsl
index bba004d..59ff9a0 100644
--- a/xslt/mallard/html/mal2html-media.xsl
+++ b/xslt/mallard/html/mal2html-media.xsl
@@ -42,6 +42,17 @@ FIXME
   <img src="{$node/@src}">
     <xsl:copy-of select="@height"/>
     <xsl:copy-of select="@width"/>
+    <xsl:attribute name="class">
+      <xsl:text>media </xsl:text>
+      <xsl:choose>
+        <xsl:when test="$inline">
+          <xsl:text>media-inline</xsl:text>
+        </xsl:when>
+        <xsl:otherwise>
+          <xsl:text>media-block</xsl:text>
+        </xsl:otherwise>
+      </xsl:choose>
+    </xsl:attribute>
     <xsl:attribute name="alt">
       <xsl:choose>
         <xsl:when test="$inline">
@@ -125,6 +136,17 @@ FIXME
   <xsl:param name="node" select="."/>
   <xsl:param name="inline" select="false()"/>
   <audio src="{$node/@src}" autobuffer="autobuffer" controls="controls">
+    <xsl:attribute name="class">
+      <xsl:text>media </xsl:text>
+      <xsl:choose>
+        <xsl:when test="$inline">
+          <xsl:text>media-inline</xsl:text>
+        </xsl:when>
+        <xsl:otherwise>
+          <xsl:text>media-block</xsl:text>
+        </xsl:otherwise>
+      </xsl:choose>
+    </xsl:attribute>
     <xsl:choose>
       <xsl:when test="$inline">
         <xsl:apply-templates mode="mal2html.inline.mode" select="$node/node()"/>
diff --git a/xslt/mallard/html/mal2html-page.xsl b/xslt/mallard/html/mal2html-page.xsl
index 9e109ad..da58966 100644
--- a/xslt/mallard/html/mal2html-page.xsl
+++ b/xslt/mallard/html/mal2html-page.xsl
@@ -937,9 +937,8 @@ div.ui-overlay {
   z-index: 10;
 }
 div.ui-overlay > div.inner {
-  text-align: </xsl:text><xsl:value-of select="$right"/><xsl:text>;
   display: inline-block;
-  padding: 0 8px 8px 8px;
+  padding: 8px;
   background-color: </xsl:text><xsl:value-of select="$color.gray_background"/><xsl:text>;
   border: solid 1px </xsl:text><xsl:value-of select="$color.text_light"/><xsl:text>;
   box-shadow: 0 2px 4px </xsl:text><xsl:value-of select="$color.text_light"/><xsl:text>;
@@ -947,17 +946,13 @@ div.ui-overlay > div.inner {
   -webkit-border-radius: 6px;
   border-radius: 6px;
 }
-div.ui-overlay > div.inner > div.contents {
-  text-align: </xsl:text><xsl:value-of select="$left"/><xsl:text>;
-  margin-top: -8px;
-}
 a.ui-overlay-close {
-  display: inline-block;
+  display: block;
+  float: </xsl:text><xsl:value-of select="$right"/><xsl:text>;
   width: 12px; height: 12px;
   font-size: 12px; line-height: 12px;
-  position: relative;
-  top: -8px;
-  </xsl:text><xsl:value-of select="$right"/><xsl:text>: -16px;
+  margin-top: -16px;
+  margin-</xsl:text><xsl:value-of select="$right"/><xsl:text>: -17px;
   padding: 1px 2px 3px 2px;
   text-align: center;
   border: none;