<span>

line breaks

[Knowles]

A <span> tag does not produce a line break right?

Then why does code like:

<div>
<span>
links
</span>
<span>
morelinks
</span>
</div>

cause such line breaks?

It is showing up as if there was a line break between them in Mozilla but not in IE?

[pageoneresults]

Sounds like a bug. The <span> element is inline and the <div> is block level. You could have 50 <span> elements on one line and unless you put the <br> in there, the break should not happen.

P.S. Just downloaded Moz to this system here and checked out my test page with the same code you have posted above. No line breaks.

[rewboss]

This is a stupid question, but you never know. Is it possible that you have your browser window sized in such a way that the line-break just happens to occur at that point by co-incidence?

[Nick_W]

I don't think it's stupid rewboss. It almost has to be something else as I've never heard of any <span> bugs. It's a very simple tag, right?

Nick

[Knowles]

No its not the size of the window, I wish. I dont have the code with me, the only thing I can guess is possibly that it has something to do with the CSS. I will check again since there is no known bugs then there shouldnt be an issue.

[moonbiter]

Could be. span {display: block;} would do it. ;)

[ergophobe]

Could it be because of the line breaks in the code? Have you tried

<div>
<span>links</span><span>morelinks</span>
</div>

Tom

[rewboss]

Could it be because of the line breaks in the code?

Only within <pre>, or if white-space: pre; is set. (But if you're seeing the effect in IE4, or in IE5 for Windows; or if you're [b]not[/i] seeing it in IE5 for Mac, it's not the latter.)

[zeus]

I know if you copy a lets say affiliate banner text, there can sometims come those span in there, but if you copy it to noteblock and take the code from there to your html there is no problem.

zeus

p.s I allways delete those span in my html

[Knowles]

yall got me to look at this again.
my code is more like this:

<div>
<span class="leftbg">
Link<br />
Link<br />
</span>
<span class="rightbg">
Link<br />
Link<br />
</span>
</div>

I have 2 sets of divs like this. With a total of 4 divs (1 header 1 footer). The header displays fine, the first set of divs are displaying fine now in IE (Cant check any other browser) but the second one is displaying one on top of the other with the footer beside the lower one. So its like this:
....header.............
leftbg..........rightbg
.................leftbg
footer..........rightbg
does that explain whats wrong any better?

[Knowles]

Here is the css I forgot it earlier oops!

.leftbg {
font-variant: small-caps;
text-align:center;
background-color: black;
color: white;
padding: 4px;
width: 50%;
height : 100%;
margin-right : 2px;<-- look the problem
margin-left : 2px;<--- and again
border : solid black thin;
}
.rightbg {
font-variant: small-caps;
text-align:center;
background-color: black;
color: white;
padding: 4px;
width: 50%;
height : 100%;
margin-right : 2px;
margin-left : 2px;
border : solid black thin;
}

I took out a margin-top : 10px; and it changed the way its displaying now.
....header.....
leftbg.........
rightbg........
leftbg.........
rightbg........
....footer.....
So now the header and footer are working nicely but my spans are still making line breaks!

Please excuse me for my sillyness I should have thought of that sooner! The 50% with the margins on there was making it to big so it was the size of the screen that was causing it cause it was trying to make it over 100%.