SitePoint Sponsor

User Tag List

Results 1 to 20 of 20
  1. #1
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,764
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    <br /> vs. display: block

    I have the following Event Date that I want on two lines...
    Code:
    	<li>
    		Sioux Falls, SD<br />
    		<small>January 7, 2011</small>
    	</li>
    What is the difference between using a <br /> to put the Date on the second line versus using display: block; to create the same end result?

    Is one better?

    Is one worse?

    Any side effects that could pop up?

    Or are they basically two ways to accomplish the same things?!

    Thanks,


    Debbie

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,801
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    The difference is you are using markup to accomplish a completely presentational task ( which as you know isreally frowned upon, if you can avoid it.)

    This is OK:
    Code:
    <h1>My title:<br /> Some tile words</h1>
    This is weak code:
    <h1>My title:<br /><small> Some tile words</small></h1>
    <h1>My title:<small> Some tile words</small></h1> / tag small {display:block;}  would be the best practice.

    The only way to tell if a BR is totally unavoidable, would be semantics; I just cant think of an example where you couldn't AT LEAST use a SPAN instead of a BR .

  3. #3
    SitePoint Evangelist
    Join Date
    Jun 2007
    Location
    North Yorkshire, UK
    Posts
    483
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    At one level it is really a question of appropriateness of mark up. You should use mark up that is appropriate to the situation. The classic 'no no' is the use of a tables for layout.

    In the example you have given the <br> would seem entirely appropriate.

    If you did use a <div> the you could style it (padding, margin, colour, font etc) but that's about the only advantage.

  4. #4
    Chopped Liver bronze trophy imaginekitty's Avatar
    Join Date
    Aug 2007
    Location
    Pennsyltucky
    Posts
    1,494
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    What about using li { white-space: pre-line; } This will preserve the line break without the use of <span> or <br />.

    Code HTML:
    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="UTF-8" />
    	<title>break</title>
    	<style type="text/css">
    		li {
    			white-space: pre-line;
    	</style>
    </head>
    <body>
    	<ul>
    	<li>
    		Sioux Falls, SD
    		<small>January 7, 2011</small>
    	</li><li>
    		Sioux Falls, SD
    		<small>January 8, 2011</small>
    	</li><li>
    		Sioux Falls, SD
    		<small>January 9, 2011</small>
    	</li></ul>
    </body>
    </html>

  5. #5
    Non-Member
    Join Date
    Sep 2007
    Posts
    148
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I still use <br /> myself as I haven't really come across many people telling me I shouldn't or making references to avoiding it. Though the two examples presented in this thread seem like viable options..

  6. #6
    Chopped Liver bronze trophy imaginekitty's Avatar
    Join Date
    Aug 2007
    Location
    Pennsyltucky
    Posts
    1,494
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Oops. I forgot a "}" in the previous example.

    You can also do something like this:
    Code HTML:
    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="UTF-8" />
    	<title>break</title>
    	<style type="text/css">
    		small:before {
    			content: "\A";
    			white-space: pre;
    		}
    	</style>
    </head>
    <body>
    	<ul>
    		<li>Sioux Falls, SD <small>January 7, 2011</small> </li>
    		<li>Sioux Falls, SD <small>January 8, 2011</small> </li>
    		<li>Sioux Falls, SD <small>January 9, 2011</small> </li>
    	</ul>
    </body>
    </html>
    This may be better as you won't have to consider the line breaks in the markup.

  7. #7
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    a br's use is that of a line beak. If you need a line break then it is the preferred tag to do so. You can wrap each in a span or whatever and say display block do do it the css way instead. Each is acceptable and neither has pros or cons vs. I use br's as that is what they are intended for.

  8. #8
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Song lyrics are the typical correct use of BR where a forced line break is usually desired for obvious reasons and sometimes with forms they tend to make things slightly easier on rare occasion. The markup is always hardcoded and in play whereas the CSS is presentational such as line spacing effects, etc.

  9. #9
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,764
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I ended up going with display: block since it allowed me to have the Date "hug" the Location...

    Code:
    <h3>Current Dates:</h3>
    <ul id="currentDates">
    	<li>
    		Sioux Falls, SD
    		<small>January 7, 2011</small>
    	</li>
    Code:
    #boxWorkshops ul#currentDates li small{
    	display: block;
    	margin-top: -0.1em;
    	font-size: 0.8em;
    }

    Debbie

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    With CSS turned off a break will give you a line break and a span won't.

    Therefore you need to decide :

    a) Whether your text is one line but split onto two only for presentation so a span would be ideal.

    b) If it's two unrelated lines and therefore should be separate block level tags anyway.

    c) If it's basically one train of thought like a poem or song on different lines and then a break would be suitable.

    d) Some gray area between all the above and you have to decide yourself

    To me it looks like a definition list with the DT as the Location and the date as the definition (or a table perhaps).

  11. #11
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,764
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    With CSS turned off a break will give you a line break and a span won't.

    Therefore you need to decide :

    a) Whether your text is one line but split onto two only for presentation so a span would be ideal.
    It could be one line, although two is preferred.


    To me it looks like a definition list with the DT as the Location and the date as the definition (or a table perhaps).
    Don't let DeathShadow hear you say that!!

    BTW, so why is it that I couldn't get the Date to "hug" the Location when I had a <br />?

    When I switched to a display: block, it solved that issue, and thus is why I ditched the <br />.


    Debbie

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    Don't let DeathShadow hear you say that!!
    Different views are what you get in a forum -we don't always have to agree though. There can be good arguments on both sides so don't be swayed by mine or anyone else's but make your own mind up.

    BTW, so why is it that I couldn't get the Date to "hug" the Location when I had a <br />?
    Probably the default line height for the break coming into play. Breaks can be hard to control if you want pixel precision.

  13. #13
    SitePoint Addict
    Join Date
    Jul 2011
    Posts
    365
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    I have the following Event Date that I want on two lines...
    Code:
    	<li>
    		Sioux Falls, SD<br />
    		<small>January 7, 2011</small>
    	</li>
    What is the difference between using a <br /> to put the Date on the second line versus using display: block; to create the same end result?

    Is one better?

    Is one worse?

    Any side effects that could pop up?

    Or are they basically two ways to accomplish the same things?!

    Thanks,


    Debbie
    <br> is for line breaks. What you have is a line break.

    The idea of using CSS for presentation is there to HELP you, not to force you to obey some rules other people make and force you to live under their rule, to your own detriment. CSS makes site-wide maintenance easier. Do you break address lines in many many pages? In other words, do you have that convention of presenting an address on two lines on alot of pages, and do you see yourself changing that in the future? If you use the block idea, in the CSS you could simply remove that block, and all those line breaks in all those addresses will bump back up. Easy change.

    But do you have one address on one page you are breaking? If so, maybe it is better to use a line break. But then think whether or not you will expand the page to include many many addresses with two line breaks, that may eventually have one line. Just make sure CSS and HTML is helping your project, not hindering you just because some purists have a Golden Calf.

  14. #14
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,764
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Different views are what you get in a forum -we don't always have to agree though.
    And you are a bold man to disagree with DeathShadow!!


    Probably the default line height for the break coming into play. Breaks can be hard to control if you want pixel precision.
    So how risky is it to you display: block for fear users will have CSS turned off? (Sounds like <br /> is "guaranteed"...)


    Debbie

  15. #15
    Chopped Liver bronze trophy imaginekitty's Avatar
    Join Date
    Aug 2007
    Location
    Pennsyltucky
    Posts
    1,494
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    I would imagine that someone that disables CSS would expect minor differences. If they're taking the styling out of the rest of the page do you think they'll mind the city on the same line as the date?

    You do ask the best questions here.

  16. #16
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,813
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    What I am still wondering is why so many people write a line break as <br /> when in HTML the tag is <br> and in XHTML it is <br/> (no space). The space is only needed for XHTML served as HTML to Netscape 4 users. Do all these people using <br /> really have that many visitors still using Netscape 4?
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  17. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by imaginekitty View Post
    I would imagine that someone that disables CSS would expect minor differences.)
    My point wasn't really that users will disable css but more that you can get a good idea of the structure of your page by turning css off. If the html is logical and sensible you can get well laid out and readable text. If the whole site is one long line that stretches into infinity then you are doing something wrong

    It shouldn't really be of prime importance that pages work with css turned off but it's a good tool to use occasionally - just like switching images and js off which a lot of advanced users do anyway.

    To be honest it's not an earth shattering decision whether you use a break or a span in the above scenario but is is wrong to use breaks just to make space. Breaks have a meaning and should be used where required.

  18. #18
    Chopped Liver bronze trophy imaginekitty's Avatar
    Join Date
    Aug 2007
    Location
    Pennsyltucky
    Posts
    1,494
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    My point wasn't really that users will disable css but more that you can get a good idea of the structure of your page by turning css off. If the html is logical and sensible you can get well laid out and readable text. If the whole site is one long line that stretches into infinity then you are doing something wrong

    It shouldn't really be of prime importance that pages work with css turned off but it's a good tool to use occasionally - just like switching images and js off which a lot of advanced users do anyway.

    To be honest it's not an earth shattering decision whether you use a break or a span in the above scenario but is is wrong to use breaks just to make space. Breaks have a meaning and should be used where required.
    I do agree. I've never disabled CSS after the fact. I always try to have my markup complete before adding CSS so I guess I do it inside out.

  19. #19
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,764
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by imaginekitty View Post
    You do ask the best questions here.
    Thanks!!


    Debbie

  20. #20
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,764
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    My point wasn't really that users will disable css but more that you can get a good idea of the structure of your page by turning css off. If the html is logical and sensible you can get well laid out and readable text. If the whole site is one long line that stretches into infinity then you are doing something wrong
    Yep, the whole point of my Release #2 is to streamline my code...


    To be honest it's not an earth shattering decision whether you use a break or a span in the above scenario but is is wrong to use breaks just to make space. Breaks have a meaning and should be used where required.
    Well Paul, oddz recently said...
    Code:
    On a scale of 1 – 10 the things you always seem to get caught up on are a 1… maybe a 2.
    
    Man… if you working in the industry you would be making about a dollar an hour in regards to how much you concern yourself with micro issues.
    As the saying goes, "Do one thing, and do it better than anyone!"

    (Hey, I'm an Analyst by day. What else would you expect?!)

    Thanks,


    Debbie


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •