When creating web pages, a big question arises. “Should I use HTML or XHTML?”. Sometimes it’s not even as easy as choosing one over the other. You’re confronted with different DTD (Document Type Description) versions and Loose, Transitional or Strict types.
The most important differences:
- XHTML elements must be properly nested
- XHTML elements must always be closed
- XHTML elements must be in lowercase
- XHTML documents must have one root element
- in strict XHTML, all inline elements must be contained in a block element
- XHTML is XSL ready
List of Doctypes lifted from W3C
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
AutisticCuckoo from the Sitepoint forums claims that XHTML is not good to use for webpages because IE and other browsers doesn’t support it. But why does our XHTML pages work on IE?
Resources
Problem Description:
IE6 and IE7 adds an extra space under an image.
Fix:
Add font-size:1px into the containing div.
Fix courtesy of http://blog.creonfx.com/internet-explorer/ie6-image-whitespace-bug
IE6 bullets disppear when lists are floated to form multiple columns. This happens because IE converts the lists <li> into inline (display:inline) elements when floated.
A solution would be to put the bullets in the encasing link or span, inside the <li></li>
Reference: http://www.sitepoint.com/forums/showthread.php?t=549599
If you are already pulling your hair because of the different quirks of the different web browsers, you’d easily go bald trying to figure out how to make CSS work in HTML Emails. [...]
One of our projects required highlighting of the current navigation tab. So naturally, I googled and here’s what I found:
- http://www.alistapart.com/articles/keepingcurrent
- http://www.hicksdesign.co.uk/journal/highlighting-current-page-with-css
- http://www.websiteoptimization.com/speed/tweak/current/
However, none of them was the solution to what we exactly needed because of our file structure. We had a unique sidebar navigation include (nav.inc.php) for every subdirectory.
The ALA solution was ugly, they inserted php snippets in every <li> entry. Hicksdesign’s solution was ok, but it required coding in a unique ID on every individual page, which was not a good idea for us.
So we came up with our own solution.
Here’s what we did:
- Get the Page’s name. In this case, our URL was structured in this way, http://website.com/category1/section1/page-name
- Set IDs to each of the sidebar navigation links, to match the page names.
- Invoke javascript to set class=”selected” to the navigation link where the current page is on.
Here’s the Javascript code that was used:
<script language="javascript">
function set_current_nav()
{
document.getElementById('<?=$current_page?>').setAttribute('class','selected');
}
set_current_nav();
</script>
JavaScript tutorial – Window size and scrolling
A table of what the different browsers support with respect to:
- window.innerHeight
- document.body.clientHeight
- docuemnt.documentElement.clientHeight
The Problem
IE adds more spacing than the others when using the display:block declaration.
The Solution
Insert these two statements in your li tag:
float:left;
clear:left;
References
http://www.hicksdesign.co.uk/journal/ie-whitespace-bug
Dean Edwards created the following IE7 upgrade javascript library to fix the CSS shortcomings of the earlier versions.
The library fixes the following issues:
- supports the following CSS selectors:
- parent > child
- adjacent + sibling
- adjacent ~ sibling
- [attr], [attr="value"], [attr~="value"] etc
- .multiple.classes (fixes bug)
- :hover, :active, :focus (for all elements)
- :first-child, :last-child, only-child, nth-child, nth-last-child
- :check, :disabled, :enabled
- :empty, :contains(), :not()
- :before/:after/content:
- :lang()
- supports imported style sheets
- preserves the cascade of the style sheet
- does not alter the document structure
- does not repeatedly query the DOM tree using JavaScript
- uses pure CSS to enforce style sheet rules
- supports the W3C box model in both standards and quirks mode
- supports fixed positioning (flicker free)
- supports overflow:visible
- supports min/max-width/height
- fixes broken (X)HTML elements (abbr, object)
- standardised forms behavior
- supports PNG alpha transparency
- lightweight script (11KB)
- works for Microsoft Internet Explorer 5+ (Windows only)
The Problem
IE does not render PNG transparency, it just greys the transparent area. We thought Microsoft engineers were smart?
The Solutions
- Use Microsoft’s AlphaImageLoader solution.
- Eric Meyer’s Javascript based solution to detect browsers and spit out browser specific code.
- Drew McLellan’s Supersleight seems to be the best solution.
The Problem
IE mysteriously doubles the margin on a floated element. Suppose that you float:left an element and at the same time specify a margin-left setting, IE doubles the margin on that element.
The Fix
The fix is surprisingly simple. Adding a display:inline to the element takes out the bug.
References
http://www.positioniseverything.net/explorer/doubled-margin.html