IE7 display:inline padding bottom issue

wkdown · 07-30-2009, 07:31 PM

I was just wrestling with a VERY annoying issue with IE7. I wanted to create an <h1> with a background color that expanded only as far as the dynamic text inside it. When the <h1> was set to display:inline, I got the desired effect in every browser (including IE6!) except IE7. The <h1> would not display any bottom padding. I added a border around it and saw that it didn't show the bottom border! Only cut it off. I tried vertical-align, height, padding, margin, !important, other unorthodox display types (inline-block, table-cell, etc) and nothing.

Then for some reason, I thought about line spacing. So I added line-height:2; and viola! Now I got my padding that I wanted. Hopefully the next person to have this issue will come across this post and not burn 1.5 hours on a stupid issue.

07-30-2009, 07:31 PM	#1
wkdown New Member Join Date: Jul 2009 Posts: 3	IE7 display:inline padding bottom issue I was just wrestling with a VERY annoying issue with IE7. I wanted to create an <h1> with a background color that expanded only as far as the dynamic text inside it. When the <h1> was set to display:inline, I got the desired effect in every browser (including IE6!) except IE7. The <h1> would not display any bottom padding. I added a border around it and saw that it didn't show the bottom border! Only cut it off. I tried vertical-align, height, padding, margin, !important, other unorthodox display types (inline-block, table-cell, etc) and nothing. Then for some reason, I thought about line spacing. So I added line-height:2; and viola! Now I got my padding that I wanted. Hopefully the next person to have this issue will come across this post and not burn 1.5 hours on a stupid issue.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode