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 [...]
Archive | XHTML/CSS RSS feed for this section
IE6 & IE7 Space Under Image Bug
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 Bullete Disappear When Lists Are Floated To Form Multiple Columns
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
HTML Email Best Practices
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.
Highlighting the Current Navigation Tab with Javascript and PHP
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 [...]
Link: Window, Document sizes and the Different Browsers
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
IE display:block Whitespace Bug
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
IE7 Upgrade Javascript Library
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, [...]
PNG Transparency in IE (Internet Explorer)
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.
IE Doubled Float-Margin Bug
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