Is it possible via css to “disable” a <br> tag’s line break?
br {display:none}
You might want to add some white space before/after <br> to avoid lines being displayed together.
Cool. Thanks. I thought of a better method for what I’m trying to accomplish, however, that doesn’t need the <br>.
I wanted to create a footer on my site that with one stylesheet is vertically stacked text, and with another stylesheet is one line below the content. In the vertical version, I wanted to be able to force a line break in the copyright list item, to balance the line lengths.
I decided to wrap an <em> tag around each portion of the copyright, and style the <em> to display:block for the vertical option. For the horizontal option, I made the list items display:inline to create the one line of text:
<div id="footer">
<ul>
<li><a href="about.php">About this site</a></li>
<li><em>© 2004 BlahBlah.</em>
<em>All Rights Reserved.</em></li>
<li><a href="#">xhtml</a></li>
</ul>
</div>
/* Vertical Orientation */
#footer ul {
list-style: none;
margin: 0;
padding: 0;
}
#footer em {
display:block;
font-style:normal;
}
/* One line Horizontal Orientation */
#footer ul {
list-style: none;
margin: 0;
padding: 0;
}
#footer ul li, #footer em { display:inline; }
Using the <em> is more semantically correct than putting a <br>, too.
Good to know about the br{display:none} trick, though.
Using the <em> is more semantically correct than putting a <br>, too.
Not unless you actually want to emphasize the copyright crap… If you don’t then <em> is semantically worse than <br>… If you don’t want to add any semantics to your copyright stuff then use <span>
Point taken (sort of).
However, many times you will see a copyright line italicized, and italics is one form of emphasis. In fact, it’s pretty standard these days for <em> to still really just mean “italics”. So it’s not that strange for the copyright line to be <em>phasized.
Granted, either way in my example there is slightly extraneous code in the HTML, but at least in some respects the <em> does make some sense. A <span> would be completely extaneous code (for markup purposes only in this case), with no meaning at all. I weighed the options, and I preferred emphasizing the copyright to just putting “fake” span tags.
If I hadn’t seen that italicizing/emphasizing the copyright (in an unstyled version for example) would be acceptible, I would have used <span>.
<em> is not the same as italics. Screen-readers handle emphasized and italicized text differently. Emphasized text is generally spoken louder by the screen-reader (because it’s emphasized text, of course.) Italicized text is purely visual and is not emphasized by screen-readers. I don’t think it’s necessary to emphasize the copyright statement (afterall, it will seem like you are yelling at the people with screen-readers that “it’s copyrighted! Don’t steal anything!” which I think would be a turn-off for them.) I would recommend using a <span> tag and using CSS to make the text italic, this way it can still have a visual emphasis but it won’t be yelled out of screen-readers. That’s just my opinion, of course.
Just because screen readers choose to say <em> louder doesn’t mean that’s the real intent of the tag. <strong> should be read louder, but <em> should be read with an emphasis (which is not necessarily volume, otherwise why would there be a <strong> also). Screen readers can have poorly implemented “standards” just like visual web pages can.
You don’t code for screen readers alone. You code so things work as good as possible in as many formats as possible.
Hey, if you want italics but not emphasize, use <i>! It’s perfectly valid.
<edit>
btw, <strong> is “strong emphasize”… It has been suggested that in XHTML2 <strong> will be replaced with <em><em></em></em>.
</edit>
Hmm, <em><em></em></em> that would a nice waste of elements still looks like 2010.
brilliant! solution completely escaped me. thanks for posting!