Why are these 2 CSS SPANs not ligning on same line!

HTML & CSS
1

Hi,

As you know SPANs are supposed to by default line up on the same line.
So we have 2 SPANs that are not doing this! And we have tried everything for these 2 SPANs to be on the same line and not have a break line, but they keep having a break line and being on 2 lines.
You can see the test page here:

https://www.anoox.com/news/my_notes_test.php

And the 2 SPANs have the ids:
id=“note_lbl”
id=“notes_count”

with innerHTML of:

My Note

  • I have Posted 3 Notes to date

BTW, we have some Tables in this page, So for those pure CSS guys, please put that aside
and if you can just tell us why in GODs name these 2 SPANs are not aligning up on same line?

Thanks,

2

That’s what display block does.

<span class="notes_back" id="notes_count" style="display: block;"> 
							- I have Posted <span id="post_val">3</span> Notes to date
						</span>

And the invalid HTML can’t be helping any

https://validator.w3.org/check?uri=https%3A%2F%2Fwww.anoox.com%2Fnews%2Fmy_notes_test.php&charset=(detect+automatically)&doctype=Inline&group=0

4 Likes
3

Do you mean that if you have a <span> tag and give it {display:block} it will behave like a “block” element such as a paragraph or div???

Who wouldda thought. :thinking:

4

Ah so these 2 SPANs are Displaying on 2 different lines because of display: block; in the 2nd SPAN!
Ayayayay :frowning:
FYI, we have the display: block; is in the 2nd SPAN because at times this display is set to none, so that that SPAN does not display at all. But no problem, we will get around that via Php coding not to display that SPAN at designated times.
Just real blown away that display: block; was behind this multi line display of these SPANs!

Curious: is there a CSS code that will display 2 SPANs in same line even IF one of them has display: block;?

Thanks,

5

Perhaps what you are looking for is display: inline-block.

Or if you simply want to revert from display: none to normal span behaviour, display: inline.

2 Likes
6

Yes, a fix to get all those spans in the same row, one that does not require any changes in the scripts, only to the “style_new.css” after the ruleblock on line 226:

/* add the below ruleblock */
.lbl_xl{
    float: left; /* let following elements flow adjacent */
    margin-right: .4em; /* to simulate a space character */
    line-height: 22px; /* to level the children */
}

This will work also when the block span is not displayed. Guessing a javascript sets the inline style.

Edit)
You should probably remove the <br> tag after the spans.

7

Ok, Thanks.

8

Thanks U2.

9

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