Recent Posts
- My new HP TouchPad – Better, Faster, Stronger, Overclocked
- New Site Design 2011
- Disable Verizon V-Cast popup / autostart on Android HTC Incredible
- Mock Draft 2010 iPhone, iPad and iPod touch now Available!
- What is SEO? An introduction to Search Engine Optimization and search result rank
- Detect File Types For Files With No Extension
- Seperate the directory and file portions of a string path in PHP
- Migrating wordpress to a new server
- A customized web-based wysiwyg that can clean a paste from MS Word
- Google Talk Crashes When I Select Show current music track Status, using Winamp
- How to Fix Problmes with CSS Float Elements in IE, FireFox, Safari, etc
- Screwball Tees, funny t-shirt site, is alive!
- Starting to Add Google Checkout (as paypal alternative) To Accept Credit Card Payments
- Facebook Soars While MySpace Wilts
- Running multiple versions of IE on Vista
Extra Space in Firefox
I recently encountered what appeared to be a css and/or html display problem that caused extra space to appear at the bottom of my links and was solved by declaring a different doctype. Below are 2 shots illustrating the problem.
incorrect (link):
correct (link):
Using firebug, I noticed that nothing seemed to be occupying the extra space nor was there a borders/margins problem. By chance when putting a wordpress blog onto my site I noticed that this problem was corrected on the word press pages. After carefully looking over the differences and through process of elimination I discovered that changing one line of code fixed this display problem.
The Solutions
One quick fix was to change my DOCTYPE declaration to xhtml 1.0 transitional.
changed this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
to this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
While this does cause Firefox 3.x to render the html and css in a more predictable manner, it is not an ideal fix because it does not allow the developer to write valid XHTML 1.0 STRICT code.
So a second fix was to play with the line-height style property of the container div and the elements within. I ended up changing my container div to a line-height of 0px and my the elements in this container to a line-height of 12px. While I was not able to get an identical result to the xhtml transitional doctype, it was much closer and looks much better visually. (I did not have to do a browser-specific style change. It still displayed correctly in IE6+) and my pages still validate is properly formed XHTML 1.0 Strict.
Why this doctype declaration makes a difference in this case is not known. Browsers do render pages differently depending on the DOCTYPE declaration, but there appears to be no reason for this specific difference and may be a Firefox bug.