开发者

div Background color hides its content before select tag in a XSLT with IE

开发者 https://www.devze.com 2023-01-23 23:55 出处:网络
I\'ve got 开发者_如何转开发a div with an inline background color (style attribute) in which I\'ve got a header, a noscript tag and a form with a drop-down menu (select tag).

I've got 开发者_如何转开发a div with an inline background color (style attribute) in which I've got a header, a noscript tag and a form with a drop-down menu (select tag).

If the header and the noscript are found before the drop-down-menu, then they are hidden behind the background color, only coming in focus again if the text is selected with the mouse. Following is an example of the minimum code needed to reproduce the issue (I stripped the javascript code for example). This code also have been a static html document, and the issue doesn't appear then.

<?xml version='1.0' encoding='ISO-8859-1'?>
<xsl:stylesheet version='1.0' xmlns:xsl='http://www.w3.org/1999/XSL/Transform'>
<xsl:template match='/'>
  <html>
  <head>
  <title>Help Center</title>
  </head>
  <body style="font-family:Arial, sans-serif;margin:0px;">
    <div style="background-color:#fffacd;">
      <h1 style="z-index:2">Help Center</h1>
      <noscript>
      <p><font color="red"><b>The Help Center require javascript for optimal use.</b></font></p>
      </noscript>
      <form>
      <select name="release" onchange="return showHide(this);">
      <option value="632" selected="selected">632</option>
      <option value="633">633</option>
      <option value="634">634</option>
      </select>
      </form>
      <br />
    </div>
  </body>
  </html>
</xsl:template>
</xsl:stylesheet>

However, if the content is after the select tag, then all is displayed correctly.

<?xml version='1.0' encoding='ISO-8859-1'?>
<xsl:stylesheet version='1.0' xmlns:xsl='http://www.w3.org/1999/XSL/Transform'>
<xsl:template match='/'>
  <html>
  <head>
  <title>Help Center</title>
  </head>
  <body style="font-family:Arial, sans-serif;margin:0px;">
    <div style="background-color:#fffacd;">
      <form>
      <select name="release" onchange="return showHide(this);">
      <option value="632" selected="selected">632</option>
      <option value="633">633</option>
      <option value="634">634</option>
      </select>
      </form>
      <h1 style="z-index:2">Help Center</h1>
      <noscript>
      <p><font color="red"><b>The Help Center require javascript for optimal use.</b></font></p>
      </noscript>
      <br />
    </div>
  </body>
  </html>
</xsl:template>
</xsl:stylesheet>

UPDATE: There were a missing element to reproduce the problem: in my problem code, there is <br /> after the form tag. Incidentally, removing the <br /> solve the problem.

Now, I ask myself if it is worth it not removing the question. If there is no comment about it in the next day, or I am advised to, I will remove it.


UPDATE2: I've brought the example online. Both how it should look and the problematic xslt-transformed xml are present on http://kingdom7.free.fr/helpcenter/index.html


Put

<xsl:output 
  method="html"
  doctype-public="-//W3C//DTD HTML 4.01 Transitional//EN"
  doctype-system="http://www.w3.org/TR/html4/loose.dtd"/>

in your stylesheet (as a child of the xsl:stylesheet element).

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号