photo via flickr (credit)

BR generates a line-break and it is only a line-break. As this element has no content, there are only few styles that make sense to apply on it, like clear or position. You can set BR‘s border but you won’t see it as it has no visual dimension.

If you like to visually separate two sentences, then you probably want to use the horizontal ruler which is intended for this goal. Since you cannot change the markup, I’m afraid using only CSS you cannot achieve this.

It seems, it has been already discussed on other forums. Extract from Re: Setting the height of a BR element using CSS:

[T]his leads to a somewhat odd status for BR in that on the one hand it is not being treated as a normal element, but instead as an instance of A in generated content, but on the other hand it is being treated as a normal element in that (a limited subset of) CSS properties are being allowed on it.

I also found a clarification in the CSS 1 specification (no higher level spec mentions it):

The current CSS1 properties and values cannot describe the behavior of the ‘BR’ element. In HTML, the ‘BR’ element specifies a line break between words. In effect, the element is replaced by a line break. Future versions of CSS may handle added and replaced content, but CSS1-based formatters must treat ‘BR’ specially.

photo via flickr (credit)

In what situations is it more appropriate to use an HTML IMG tag to display an image, as opposed to a CSS background-image, and vice-versa?

Single-reason answers are welcome, but I’m hoping eventually to see a consolidated list of scenarios, rationales, etc. that can be used as a best-practice guide for making this kind of GUI design decision. Or rather, two lists: Pro and Con.

Factors may include accessibility, browser support, dynamic content, or any kind of technical limits or usability principles.

Pro and Con lists:

PRO

• Use IMG plus alt attribute if the image is part of the content such as a logo or diagram or person (real person, not stock photo people).
• Use IMG if you intend to have people print your page and you want the image to be included by default.
• Use IMG (with alt text) when the image has an important semantic meaning, such as a warning icon. This ensures that the meaning of the image can be communicated in all user-agents, including screen readers.
• Use IMG if you rely on browser scaling to render an image in proportion to text size.
• Use IMG for multiple overlay images in IE6.
• Use IMG with a z-index in order to stretch a background image to fill its entire window.
• Using img instead of background-image can dramatically improve performance of animations over a background.

CON

• Use CSS background images if the image is not part of the content.
• Use CSS background images when doing image-replacement of text eg. paragraphs/headers.
• Use background-image if you intend to have people print your page and you do not want the image to be included by default.
• Use background-image if you need to improve download times, as with CSS sprites.
• Use background-image if you need for only a portion of the image to be visible, as with CSS sprites.

photo via flickr (credit)

Sizing text and line-height in ems, with a percentage specified on the body (and an optional caveat for Safari 2), was shown to provide accurate, resizable text across all browsers in common use today. This is a technique you can put in your kit bag and use as a best practice for sizing text in CSS that satisfies both designers and readers.

via AListApart

%: Some browsers doesn’t handle percent for font-size but interprets 150% as 150px. (Some NN4 versions, for instance.) IE also has problems with percent on nested elements. It seems IE uses percent relative to viewport instead of relative to parent element. Yet another problem (though correct according to the W3C specs), in Moz/Ns6, you can’t use percent relative to elements with no specified height/width.

em: Sometimes browsers use the wrong reference size, but of the relative units it’s the one with least problems. You might find it interpreted as px sometimes though.

pt: Differs greatly between resolutions, and should not be used for display. It’s quite safe for print use tough.

px: The only reliable absolute unit on screen. It might be wrongly interpreted in print though, as one point usually consist of several pixels, and thus everything becomes ridiculously small.

display:none means that the the tag in question will not appear on the page at all (although you can still interact with it through the dom). There will be no space allocated for it between the other tags. Visibility:hidden means that unlike display:none, the tag is not visible, but space is allocated for it on the page.

The short answer is:

@import url("base.css");

Howerever, bare in mind that every @import statement is a new request to the server. This might not be a problem for you but when optimal performance is required you should avoid the @import. Think twice!!! Do you even need to have 5 stylesheet files.

What is a good method for testing website layout designs across multiple browsers and operating systems?

Screen capturing services are a great way to do this.

BrowserShots (Free)

http://browsershots.org/

BrowserCam & LitmusApp (Paid)

http://www.browsercam.com
http://litmusapp.com

These kinds of services are nice because they allow you to specify a certain amount of time to wait for the page to load, and allow you have them perform actions (clicking links etc). Then you get a nice array of screenshots you can quickly browse to ensure your site looks like you expected across your desired platforms.