Span inside button does not move with button

Monday, November 02, 2009 1:52 AM

SincP

I have a span element inside a button element inside a table, and I recently noticed that the span does not follow the button if the button's location changes due to the hiding or showing of a div element elsewhere in the table. I have only noticed the problem in IE8, which makes me suspect that it was not in previous versions. Other browsers (Flock, Opera, Safari) do not have the problem.

I found out that I can open the developer tools and set the document mode to IE8 standards to get rid of the problem, but that's not really a useful solution, as I can't require that my web page visitors do this. The other two document modes - quirks mode (the default) and IE7 standards - both have the problem. For the demo page below, IE8 doesn't even display the compatibility button next to the address field, so apparently it doesn't feel that there might be any compatibility issues.

Below is the full HTML code for the page that demonstrates the problem. There are two tables on the page, each containing a button which can be clicked to show or hide a block of text in the table. The buttons are aligned to the bottom of their cells, so their positions will change when the tables grow or shrink to fit the new text. The two tables demonstrate opposite movements of the button from its initial position, and in both cases the button label (i.e. the span) fails to follow the button in IE8 (quirks mode).

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>Span inside Moving Button Does Not Follow Button</title>
<style type="text/css">
<!--
table td { border: 1px solid black; }
.stat { background-color: #FFAAAA; }
.dyn { background-color: #AAFFAA; }
-->
</style>
<script language="JavaScript1.3" type="text/javascript">
<!--
function showhide(n)
{
  var dynstyle = document.getElementById("dyn" + n).style;
  if (dynstyle.display == "none") {
    dynstyle.display = "block";
  } else {
    dynstyle.display = "none";
  }
}

// -->
</script>
</head>

<body>

<form name='frm' action=''>
<table>
  <tr>
    <td>
      <div class='stat'>
        The block below is initially visible.<br>
        Click button1 to show/hide it, and see<br>
        if the button text follows the button.
      </div>
      <div id='dyn1' class='dyn' style='display:block'>
        This block<br>
        can be shown<br>
        or hidden.
      </div>
    </td>
    <td style='vertical-align: bottom;'>
      <button type='button' name='b1' onclick='showhide(1);'>
        <span style='position:relative'>Button1</span>
      </button>
    </td>
  </tr>
</table>

<pre>






</pre>
<hr>

<table>
  <tr>
    <td>
      <div class='stat'>
        The block below is initially hidden.<br>
        Click button2 to show/hide it, and see<br>
        if the button text follows the button.
      </div>
      <div id='dyn2' class='dyn' style='display:none'>
        This block<br>
        can be shown<br>
        or hidden.
      </div>
    </td>
    <td style='vertical-align: bottom;'>
      <button type='button' name='b2' onclick='showhide(2);'>
        <span style='position:relative'>Button2</span>
      </button>
    </td>
  </tr>
</table>
</form>

</body>
</html>

Any ideas why it is doing this? This looks like a bug, doesn't it?

All Replies

Monday, November 02, 2009 8:45 PMIECUSTOMIZERMVP

1
Sign In to Vote
Hi,

The w3c validator (nor Total Validator) does not pick it up, but it is unusual to have a nested span within a <button> tag.

I made the following change to the second button only

      <button type='button' name='b2' onclick='showhide(2);'>
        Button2
      </button>

and the page then loaded in IE8 Standards mode (as expected) and BOTH buttons behaved as expected.

I loaded the same page in FX and run the total validator and the page passed also. However, there are some strange characters appearing at the very top of the page when viewed in FX.
ï»¿

Using DebugBar in IE to validate the markup, it is showing that your Doctype declaration is being ignored by the browsers and that the error handling (in both IE and FX) is falling back to correct the issue by assuming a HTML 4 transitional doctype. (get the Debugbar from http://www.debugbar.com)

The correct Doctype declaration is

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

see - http://www.w3.org/QA/2002/04/valid-dtd-list.html

and also

http://msdn.microsoft.com/en-us/library/ms535242(VS.85).aspx

The error handing between browsers is quite different, and so we end up with differences in the way different browsers finally render pages (after their error handling).

Conclusion: The Validation services are not perfect. Hedge your testing cycle by using a number of different validation services. I strongly endorse the Debugbar.

I would intuatively NOT use <span> blocks nested within <button> tags.

You can report issues with IE at the MS Feedback portal - connect.microsoft.com

This is a public Forum...MS moderate the forum but rarely answer questions directly. Connect.microsoft.com is the ONLY place you can be sure that your issue reports will be looked at and actioned by the appropiate MSFT staff.

Regards.

Rob^_^
- Reply
- Quote
Monday, November 02, 2009 10:34 PMSincP

0
Sign In to Vote
Hi Bob,

That extension to the doctype did the trick! It makes IE8 use IE8 standards mode as the default for the page. Thanks! I think I copied this doctype tag from a W3C validator report years ago, but as you said - the validors aren't perfect.

The quirks mode and IE7 standards mode still get it wrong, though, so maybe I should make a bug report for those, because I can't believe it's supposed to be like this in any mode, and I'm still not sure that IE7 actually had this problem.

The <button> element (which is defined to have display:inline-block in CSS2.1) is supposed to allow (almost) any kind of markup inside - that's the good thing about it compared to the <input> element of type "button". And the <span> tag is about the simplest markup you can imagine. I know that my simplified demo doesn't justify the use of a <span> tag inside the button, but my real application does, because it uses the borders of the span to draw an arrow.

Anyway, my problem is solved for now. Thanks again!
- Reply
- Quote