0

I have written a javascript-generated web page which can be opened from a lesson page to provide an interactive flashcard exercise for students of Chinese. It functions on a (now deprecated!) frameset page with three 'columns' having frame pages the second and third of which are written on the fly by javascript in the first frame page. Each of the second and third frame pages has an html select dropdown, written with identically structured code. However, although the dropdown in the third frame page appears with a vertical scrollbar, the one in the second frame page (a) has no scrollbar, and (b) 'drops up' (in Firefox on a Linux platform) to extend beyond the top edge of the main browser window, making the top of the dropdown list inaccessible. The structure of the html form containing the select tag is:

<form>
  <select size="1" name="sel_py" id="sel_py">
    <option class="lucidasansu" value="">CHOOSE</option>
    <option class="lucidasansu" value="er4">èr</option>
    <option class="lucidasansu" value="hang2">háng</option>
    <option class="lucidasansu" value="hao3">hǎo</option>
    ....
    <option class="lucidasansu" value="ye3">yě</option>
    <option class="lucidasansu" value="yi1">yī </option>
  </select>
  <span id="py_butt"><input type="button" name="py_button" value="CHECK" onClick="test_py(this.form.sel_py.value)"></span>
</form>

The tag has no 'action' value because the effect of the onClick on the button identified as py_button works within the group of frame pages to check the validity of the choice and to reveal a similar button on the third frame page once the first selection has succeeded.

I have checked out the code of both the second and the third frame pages on the W3C markup validator and they check out with only minor warnings, so I am at a loss to see why two apparently identically-structured dropdowns should have such different performances.

Peter N
  • 1
  • 1
  • You should post a URL if possible. Its hard to follow what you are asking. Or maybe re-phrase your question. – khollenbeck Aug 02 '12 at 02:32
  • Kris, I've saved out the displayed page, and you can find it at the url http://www.skogen.co.uk/frametest The character which is displayed in the left hand frame has the pinyin 'háng' and its keyword is 'business', so you should be able to make the page work, although because it's just a saved version, clicking 'NEXT' at the end doesn't work properly. – Peter N Aug 02 '12 at 10:45
  • I am not sure I am seeing the same issue you are seeing... Are you able to upload a screen shot? When I hit next I get a small iFrame on the left side of the page which is about 200px wide. Is the issue that the iFrame should be bigger? – khollenbeck Aug 02 '12 at 14:25
  • Kris, there's no real problem about the effect in the left-hand (200px) frame, which is what I referred to as the NEXT button not working properly because you are only looking at a page copy of the frameset. However, if you look at the url skogen.co.uk/frametest/snapshots.htm you will be able to see the problem more clearly. Because it relates to the drop-down lists I couldn't use screen capture, but the two digital photographs on that page show what is actually happening in Firefox 14.0.1. – Peter N Aug 02 '12 at 20:49
  • Okay I understand it now.. Thanks for the clarification. I will look into it and see if I can see what is causing it to do that. – khollenbeck Aug 03 '12 at 04:32

1 Answers1

0

So this is defiantly odd. There doesn't seem to be any loaded CSS so that could be part of the problem, but I am thinking the <frame> with HTML5 might be the root of the problem..

Check this link out for more on HTML5 and frames.

will <frameset> work with HTML5?

When messing around in Firebug I managed to get it do dropdown in the right direction by adding this CSS to the select tag. So I am thinking it could be resolved with some CSS as a quick fix. But like I mentioned before. I am thinking using frame and HTML5 might be the root cause.

#sel_py {
    display: block;
    height: 24px;
}

Also Note: I wasn't able to add any more height to the select without it getting messed up again.

This may not be the answer you where looking for. But I hope this helps.

Community
  • 1
  • 1
khollenbeck
  • 16,028
  • 18
  • 66
  • 101
  • Kris: Well, I've tried just about everything, including using the doctype for HTML 4.01 Transitional to give me as much elbow-room as possible, but the difference between the two drop-downs still persists! My quick and dirty fix is to set the 'top' value in the javascript window.open which creates the flashcard window to zero. This doesn't look very well balanced on the monitor, but does at least force the first menu to go down! My priority now is to get content into my site, so the quick and dirty fix will have to do for the present. But nevertheless, thanks for your input to this thread – Peter N Aug 03 '12 at 22:01