XHTML | CSS Techniques
[Skip to: content] [Skip to: navigation]

XHTML 1.1 - Served as application/xhtml+xml

XHTML CSS Techniques

XHTML 1.1 - Served as application/xhtml+xml

helpful hints

What is XHTML?

The Extensible HyperText Markup Language (XHTML) is a family of current and future document types and modules that reproduce, subset, and extend HTML, reformulated in XML. XHTML Family document types are all XML-based, and ultimately are designed to work in conjunction with XML-based user agents. XHTML is the successor of HTML.

XHTML and CSS both have changed the way websites are built. They combine to allow for structured, semantical, web designs, with standards! Have a look at these great xhtml css tips!

semantically different?

There is a difference between <strong> and <b> and <em> and <i>. Not only are they semantically different, but screen readers use <strong> and <em> to add enunciation to the text.

From the W3C: "The presentation of phrase elements depends on the user agent. Generally, visual user agents present EM text in italics and STRONG text in bold font. Speech synthesizer user agents may change the synthesis parameters, such as volume, pitch and rate accordingly."

Here we are told:

  1. I: Renders as italic text style.
  2. B: Renders as bold text style.

And here we are told:

So there is a semantic difference!

Hey there, hardcore hand coders! Protect your vision with New Window Prescription Contact Lenses unless you want to learn html in braille.

A hidden tip

If you are running any of the great new versions of the Standards-Compliant browers out there, - this of course does NOT include Microsoft's IE - you will have hopefully noticed the "tip" magically appear on the xhtml css tips * Client Sided Image Maps list item's hover pseudo element in the above Unordered List.

All elements, per the W3C's CSS2 specification, are enabled to hook a mouseover, a "hover" pseudo element, for it. Unfortunately, browser support for it only includes the Mozilla Suite (I will include Netscape in that group), and Opera - from Opera 7.5 and on.

Microsoft's IE drops the ball on this. IE's support for W3C's specs is pretty ugly. What I could have done is place the "tip" span that is set for display: none inside the anchor tag. Then, I'd create the CSS rule to hook the anchor's pseudo hover element. That would have been the cross-browser solution. As a matter of fact, that is just how I have coded the main navigation bars, both the breadcrumb-like nav-bar, and the right-side navigation. But just because I wanted to make a point, I choose to use the correct implementation of the hover pseudo element here.

So, using any version of Mozilla/ Mozilla's Firebird & Firefox, Netscape, and Opera 7.5 +, the Unordered List's list item (above) will fire on its hover, allowing the CSS rule that sets the "tip" to display: inline.

IE will be fed, using the "Star" CSS hack, a display: inline rule. that will keep the "tip" span always visible.

View the source for this page, and you'll see the CSS rules in action. I have left them in the <style type="text/css" media="all"> block for this page, and not ported them into my external style sheet.

Semanticlly correct XHTML/CSS sites

Is your site is suffering from old age?

xhtml css tips

Is your current HTML markup HTML 4.0 Transitional, or worse yet, you do not declare a DOCTYPE? XHTML is the standard markup language for web documents and the successor to HTML 4. A mixture of classic HTML and cutting edge XML, this hybrid language looks and works much like HTML but is based on XML, the web's "super" markup language, and brings web pages many of XML's benefits, as enumerated by the Online Style Guide of the Branch Libraries of The New York Public Library.

If you want your site to work well in today's browsers and nontraditional devices, like PDA's and web enabled cell phones, and to continue to work well in tomorrow's, it's a good idea to author new sites in XHTML, and to convert old pages to XHTML.

Is your site a frame-based layout.

Frames will hamper search engine abilities to index/search your site for metadata keywords and such. Also, if someone wanted to bookmark any of your sub-pages, they would bookmark the main frame page only. I recommend you kill the frames, and go with sub-pages that have the same look/feel of the main page.

Go with external CSS for presentation, such as font colors, cool images, and layout effects. Right now, if you decided to change your font color to red (just an example) on your pages, you'd have to search out - and then change - 8 separate font HTML tags. With CSS, you'd simply change just ONE line of code on just ONE linked CSS page. Think about it! Imagine if you wanted to change the font color on ALL the pages? How much time would you spend, opening up each page, then searching each page for who knows how many font tags? With CSS, you'd simply link ALL the pages to just ONE CSS page. You then make the change ( just ONE line!) to that page, and whella!

Using Relative font sizes for your pages

Relative font sizes

xhtml css tips

The main reason for using relative font sizes for your pages is accessibility. If you "hard-code" a font size in points (ie: font-size: 11pt;, you will exclude the many users out there with some sort of site imparment, as they will not be able to resize their fonts.

You can, however control the size of your fonts using relative measures - %'s and em's. First, declare the body onload="init()" font for your page as 100.01%.

HTML Code:

body onload="init()" {font: normal 100.01% your-font, sans-serif;}

Then any additional font declarations you make will be based apon this rule. So, with body onload="init()" set to 100.01%, you can set all paragraphs to .8em, which fits the modern look of phpnuke sites.

HTML Code:

body onload="init()" {font-size: 100.01%;} p {font-size: .8em; /* or font-size: 80%; */}

Oh, the reason for 100.1% on body onload="init()" font is due to problems with relative font sizes in MS Internet Explorer. On a website with no font-size defined or body onload="init()" {font-size: 1em; } applying the 5 different settings of IE's View ->font-size menu-dialogue (medium, small, large, ... ) you'll get ridiculous big or small sizes. Worse still, on some systems the menu option is magically set to "very small" with every start of IE.

You can cope with that bug by setting an initial body onload="init()" {font-size: 100.01%;} Font-size values in em that are based on this value are safe, but be aware not to get smaller than 80% or 0.8em. Opera (at least <7) needs a font-size larger than 100% to prevent it from rendering fonts based on this too small. 101% triggers a Safari-Bug that will render fonts too big. 100.01% is fine for all.

Back to top