0

I have the following code in my index.html

<li>
<select name="cmbtype" style="display:none" id="cmbtype" onChange="Changetype()">
<option value="0">
<input type="image" src="images/ocean.png" value="Play" onclick="previewplay(); " /> 
</option>
</select> 
</li>

In firefox, opera and IE 7 I see the ocean.png and am able to click it. When I do, it accordingly plays the mp3 it is supposed to!

When I load this same code in Safari (Windows and Mac), as well as in Chrome the ocean.png is not seen and there is no button to click?

Is there something I can add or do to get this code/design to work in Safari and Chrome?

Thanks

cgp
  • 41,026
  • 12
  • 101
  • 131

2 Answers2

7

Why do you have the input in your select?

It probably inherits the display: none therefor not getting rendered, which I would assume would be the correct behaviour.

Maybe IE, firefox and opera finds it illegal syntax and rewrite the input outside of the select, but webkit does not.

jishi
  • 24,126
  • 6
  • 49
  • 75
  • Hey thanks ... that was the problem! As for why I had that there... Im a hack... learning :) –  Dec 21 '08 at 12:30
3

It is illegal HTML markup and not supposed to work.

  • <li> stands for list item and must be inside an <ol> (ordered list) or <ul> (unordered list)

  • <select> can have <optgroup> and <option>

  • <option> can have characters but no element

In this case Chrome and Safaris way of doing it is the correct way to do it.

some
  • 48,070
  • 14
  • 77
  • 93