I am working on an incredibly complex form for a client and just today noticed some very strange behavior on two span tags. The spans wrap words in one of the form elements and are initially set to display: none until a series of elements in the form are clicked. Based on what the user clicks the spans will be turned on or off.
The spans are showing up pushed down from the base line of rest of the paragraph. It is happening in Chrome, Safari & Opera but not in Firefox or in IE 8 (I don’t have a machine that supports any IE over 8)
I can not publish a direct link to this page as it is not live so please take out the spaces to see the page in a browser.
https:// foac-pac.org/ Buy-Gun-Bash-Tickets
The two spans in question look like this:
<span id='other' style='display: none;'>other</span>
and
<span id='people_text' style='display: none'>(not including yourself)</span>
There are no styles in the stylesheet on generic spans nor these elements
To see what I mean you need to follow this pattern:
- Add a number in the ticket quantity box
- Select the no radio button next to ‘are all tickets to be issued to the same person’
After you do that you will see two more lines that are made visible via jQuery:
Are you (the credit card holder) being issued any of the tickets?
and
Amount of people receiving tickets
Pay attention to the 2nd one (amount of people) and click the yes radio button next to ‘Are you (the credit card holder) being issued an of the tickets.’
I change the style on both the spans using jQuery when they click the yes button using this code:
$('#other').show();
$('#people_text').show();
As you will see in the browsers I mentioned the word ‘other’ and ‘(not including yourself)’ are pushed down. The dropdown is also being pushed down.
I even tried setting the display in the jQuery call to inline and inline-block and nothing seems to help.
going out of my MIND trying to figure this out!