Some strange behavior on span tags in Chrome, Safari & Opera But Not FF

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:

  1. Add a number in the ticket quantity box
  2. 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!

Right now it’s sitting on the text baseline which is the height of the <p>. If you gave that parent <p> a border you would see it sitting at the bottom. The default text though (all text not in the span) are set to vertical-align:top by the <p>. So that text is aligned to the top but the spans are on the baseline. You need to set them to vertical-align:top as well as I just said.

Wow, I would have never thought of that in a million years.

A second pair of eyes is always helpful :slight_smile: . I’m sure you would have eventually got it.

Vertical-align only applies to inline elements (or table-cells) so the vertical-align rule will do nothing at all for the text in the p element and the text will be aligned to the baseline by default (unless the p was made an inline element of course).

The span however has vertical-align:top added to it so the spans will appear at the top of the line. Just remove the vertical-align:top from the span and all the text will line up on the baseline as it should.

1 Like

For some reason my brain told me that the paragraph text was appearing at the top of the element since it had that on it…(obviously it’s at the top by default)…that’s embarrassing. Good clarification.

I actually added that vertical-align: top after his post and it did fix it.

Before, without that vertical-align, the text was dropping down. If you want I can remove those so you can see it in it’s original form.

Oh and BTW, Hey there Paul … long time no talk

Funny with all the talk about the vertical-top it made me think to go look at the style sheet and sure enough there it is:

form.tricky p	{
	display: block;
	margin: 0 10px 10px 0;
	vertical-align: top;
	}

It’s part of this new way I built to show input labels I created over a year or so and all I do any more is copy and paste it into new projects… silly me

Yes nice to see you again :smile:

This is what I am seeing on the page in question in Firefox and IE.

Is that what you wanted?

If not remove the vertical-align:top from the spans and from the p element.

If you are checking in Chrome then Chrome is buggily applying a vertical-align:top to the p element when it shouldn’t.

I did manage to get it sorted out, thanks all!

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.