Billy’s Web Design Blog
A Blog For Web Developers and Digital Freelancers
2009
01.21
01.21
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.
Hello,
I was searching for a solution to a similar problem, and ran across your article. The Strict/Transitional fix doesn’t work in this case, and the issue is occurring in Firefox and Safari, and I assume in other browsers as well.
Although margins, paddings and borders are set to zero, I’m getting space I don’t want around some elements in an image gallery template I am developing. I have a sample posted here: http://demo.theturninggate.net/death2red/. The offending spaces are shown in red.
Any thoughts on where these extra pixels might be coming from, and how I can get rid of them?
Thanks,
Matt
Matt,
Adding the css:
font-size: 0;
to #trueContainer
should fix it.
Billy, this has saved my b*tt so many times. Thanks so much for the tip. By the way, love your blog theme, great design. (no, this is not a Russian spamming you, ha!)