Rogue Padding Below Images
This post is an old post from my previous blog but I thought it might be still useful to some people so I'll repost it here rather than deleting it.
Last week I was modifying the default Drupal Bluemarine theme to incorporate a custom designed layout for a client, and was getting some strange image padding issues when viewing the web site in Firefox. Each of the <img> tags in the web site has about 2 or 3 pixels of padding below each image, and thus causing horizontal white lines between images in the heading of the site.
I tried everything I could to try to remove the padding but nothing worked. So I did a search around and came across the Quirksmode site, which deals with the different ways browsers interpret the CSS, in particular Strict mode and Quirks mode. At the beginning of every HTML document should be a <!DOCTYPE> tag, which tells the browser which version of HTML or XHTML specification the document uses.
In the case of the Bluemarine theme, the <!DOCTYPE> was set to XHTML 1.0 Strict:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
This Quirksmode page best describes what is happening:
In quirks mode img has a default display: block, while in really strict mode it has a default display: inline.
If an image is displayed inline, it leaves a slight space below it. This is because the image is placed on the baseline of the text, and below the baseline there should be some more space for the descender characters like g, j or q.
The offshoot is that in strict mode it's not possible to make a container fit tightly around the image, unless, of course, you explicitly say img {display: block}.
All I needed to do was to add the following text to my CSS file, and everything displayed fine. If you are ever having trouble with rogue padding, or can't figure out why some of your elements are not displaying the way they should, remember to check your <!DOCTYPE>.
Comments
Rogue Padding Below Images
Submitted by Justin B (not verified) on Monday, November 17, 2008 at 7:34pm.
1.0 Transitional has this same issue.
My basic rule of thumb is : if you're using any tag as a display object always use display:block
display it as a block
Submitted by Techie Talks (not verified) on Monday, June 29, 2009 at 4:13pm.
yes this really works. I have paddings on my images and i just added img{ display:block; }
and everything went the way I like it. Thanks for this
Rogue Padding Below Images
Submitted by Joey (not verified) on Tuesday, November 25, 2008 at 12:18pm.
Thank you for posting! I added the img {display: block} to my CSS and the problem vanished! Thank you so much!!
Props!
Submitted by rk (not verified) on Monday, January 12, 2009 at 5:44pm.
A lot of people spend hours on these kinds of simple problems and when they finally figure out what the cause is, they fix the problem in their code and move on. Thanks so much for taking the time to post this, you've saved people a lot of time.
In the case of the
Submitted by mpcoc (not verified) on Wednesday, February 4, 2009 at 4:27pm.
In the case of the Bluemarine theme, the was set to XHTML 1.0 Strict:
mpcoc
Thanks a lot!!! After
Submitted by Nikolas (not verified) on Wednesday, April 29, 2009 at 5:35am.
Thanks a lot!!!
After spending hours and hours of trying to figure it out, I came across your post which fixed it :)
Brilliant, thanks
Submitted by Jane (not verified) on Thursday, May 21, 2009 at 2:39pm.
I too spent hours puzzling over this and searching forums before coming across this post. Many thanks.
Thank you!
Submitted by Anonymous (not verified) on Friday, August 28, 2009 at 2:25am.
This tip worked perfectly. Thanks for the post.
thank you for the good post
Submitted by alimicill (not verified) on Tuesday, December 29, 2009 at 11:46am.
To choose the very best check out qualitative replica watches online: Rolex replica, Breitling replica, Omega replica and other models.
subvene up to tryst films
Submitted by Appacycib (not verified) on Saturday, January 2, 2010 at 8:51am.
Today i watching smokescreen from here.
this is wondeful film.
Who are watching this?
WJOL Radio's Scott Slocum Interviews Will County Boxing Team
Submitted by Chad (not verified) on Tuesday, January 12, 2010 at 8:39pm.
The following is a transcript of WJOL Radio's interview with some of Will County Boxing Gym team members- Billy Boy Thompson, Owner/ Pro Boxer/ Trainer Joseph Awinongya, Donald Myart, and Derek Drey a rising boxing star conducted by Scott Slocum 9AM Wednesday, Jan. 6, 2010. To listen to full interview visit www.willcountyboxing.com
Scott: That will warm you up on this cold morning. Imagine yourself in a hot gym working up a sweat. That is what we all need as the temperature is going to fall to zero before that snow hits about 9PM tonight. Billy 'Boy' Thompson is in the studio with us and he's brought some guests. The 1964 graduate of the Joliet Township high school with an all time record of 110 and 15 with the 95 knockouts. How are you doing sir? Lets make sure the mics are on. Alright, who do you have with us this morning?
Billy: I have Joseph Awinongya from Ghana, Africa. He's president of our Will County Boxing Gym and Derek Drey. Derek Drey from Joliet, our boxing team and Donald Myart, he's a professional boxer, ex professional boxer-an amateur- boxer and also a broadcaster. We all are on the same page this morning.
Scott: So, ah you know, as long as it has been since you have been active in the ring, you are still so involved in the sport, and it shows by the people you brought in here today.
Billy: Well this guy, Joseph, got me involved. I was sitting back in my garage. I retired from the railroad for three years, worked for 31 years, but Joseph got me, got me to come by and and let's get together. So, I went to help him.
Scott: Well -That Joseph, is that the gentleman here?
Billy: That's correct he's from Ghana, Africa.
Joseph: I am from Ghana, I am from Ghana,- but I grew up in Italy. I am (Clears throat) an ex professional boxer. Don King brought me into this country. I came to Joliet, I was in Chicago, I was going to fight a guy in New York. So, I came to Chicago to train with the Polish fighter, because I was fighting the same guy from Poland. So, I came to Chicago and started training in the Windy City Gym and then the fight just turned off..They told me they did not want me any more. I came to Bolingbrook. I see some of the African stores over there, so I said I will stay right here.
Scott: So you got the youngsters going on now, and you are showing them what you know, huh.
Joseph: (Smiling) Yeah, I am showing them something. I came to Joliet. I found out that Joliet used to be a boxing town. I was in boxing for a long time and I said what am I going to do to bring some people together to see if we can open a boxing gym. It took me 5 years to start, you know, getting every body together, to see exactly what we want to do, and how to bring this about. Exactly, like Derek Drey, kids who have energy and want to burn it somewhere. So, we opened the boxing gym and so far the boxing gym is doing real good. We have some professionals, three professionals, we signed up a lot of kids. The boxing gym is going wonderful and I was very, very surprised.
Scott: Now let's back up a moment, you told me Don King brought you to this country?
Joseph: Yeah, Don King brought me to this country.
Scott: How many people want to be discovered by Don King!
Joseph: Yeah.
Scott: How did you do that?
Joseph: ...I went back home to Africa ...I was going back to Germany. I was sparring with one ex heavy weight champion and he had his people over there. They saw me, and they said they would like to sign me up, and that was my dream, since I was fighting. That was my dream to come to Don King. So, they saw me and then they brought me, I signed with them. I did really good with them. I don't take nothing away from Don King. He put me in a place that I know that I can do more things than I can do. What ever I want to do.
To listen to the full interview visit www.willcountyboxing.com
A lot of people spend hours
Submitted by Club Penguin Cheats (not verified) on Thursday, January 14, 2010 at 2:56am.
A lot of people spend hours on these kinds of simple problems and when they finally figure out what the cause is, they fix the problem in their code and move on. Thanks so much for taking the time to post this, you've saved people a lot of time.
Test, just a test
Submitted by balobol (not verified) on Thursday, January 14, 2010 at 8:23am.
Hello. And Bye.
The only Poker and Gambling
Submitted by pokerleinss (not verified) on Monday, January 18, 2010 at 5:47pm.
Welcome
Tenez vous informé des informations récentes sur le poker en ligne en consultant passion poker.
Vous y trouverez des infos mises à jour quotidiennement sur les sites de poker et sur le poker en france.
Les vidéos et les photos vous permettrons d'en savoir plus sur le poker.
Winner URL: http://passionpoker.biz
