Join the dots or rather the check boxes.

[ann]

Hi

 

Does anyone know of a way to get this <a href="http://trichuris.cap.ed.ac.uk/tmp/required.jpg">screenshot</a> type of display in all browsers.

 

My curret set up (<a href="http://zeldia.cap.ed.ac.uk/clade_test.shtml">here</a>) uses a background image in a table and it's great in firefox if you don't change the size of the text but what good's that...

 

So is there another way to tackle the problem; showing the relations between checkboxes (drawing the lines) relative to where the browser positions the checkboxes? Something like an image map but I don't think you can have checkboxes with them.

 

Any advice/sugestions appreciated

Thanks

[wildteen88]

You could probably do it in javascript and draw the lines dynamically. The javacript will then put in spans that are 5 pixels high and have a black background and absolutely position them.

 

Or rather than use HTML check box do it in flash instead. You can not really do what you want with just html and CSS.

[ToonMariner]

in the futre you will probably be able to do this with the display model in css 3...

[Sharon]

Just a thought, but I have not tried this: could you use a background image behind the form, an image that would put the lines where they belong?

[janroald]

I agree with wildteen88; probably there is no good or easy way to do this with html/css/js.

Seems like a fun challenge though :-)

 

My suggestion would be to arrange your hierarchial structure horizontally rather than vertically. Then you will eliminate the problems with text size etc. and in most aspects get an easier task to accomplish. You could make use of solutions typically used in forum-threading etc.