Hi tee,
I played a bit around with your examples, didn't find a good answer
yet why the browsers are rendering it that way, but I can tell that it
is not a [padding-top|bottom] issue. It is rather like a white space as
the space above is exactly like adding a [ ] and it stays the same
even for [padding-left or padding-right 1px or 100px], but
[white-space: no-wrap] didn't help. Firefox displays it correctly, if
you remove the [display:block] from the image and make both
inline-elements again. The other solutions is to make the A-tag a block
level element by giving it a [display: inline-block|block]. All
browsers seem to like that!
Hope that helps and that maybe someone else has an answer for this
inline-elements vs. block-level-elemets behaviour ;)
Cheerio,
Albert
Am Thu Sep 29 20:17:19 2011 schrieb tee:
Please go to these pages from Webkit browsers (first) and Firefox.
There shouldn't have padding top for the image for "We Recommend", padding top is caused
by the "padding-left:13px;" – any value will trigger the padding in the EVEN set of the
floated block in Webkit browsers [1].
a[href^="http"]{background: url(icon-external.png) no-repeat right
3px;padding-left:13px;}
http://jsbin.com/ozeqon [1]
If you change "padding-left" to "padding-top" or "padding-bottom", the extra
padding goes away.
In these two examples the paddings are gone.
padding-top
http://jsbin.com/ozeqon/3/
padding-bottom
http://jsbin.com/ozeqon/5
[1] If you check the page from Firefox, you will see that all images have padding (top) above
image (this is the reason for my "or Firefox" in the subject line), however in my
origninal code I had "padding-right:13px
(which is why I first thought it's webkit bug - all in all wasted my 3
working days to find the cause and I assure you nobody can't imagine how upset
I was when I found what caused the issue – and I think I will go jump from the
bridge if anybody going to tell me the padding in the above rule isn't the
issue but my other CSS codes).
a[href^="http"]{background: url(icon-external.png) no-repeat right
3px;padding-right:13px;}
http://jsbin.com/ozeqon/4/
Let see what padding:13px does. It's identical to "padding-left:13px;" above.
http://jsbin.com/ozeqon/6
tee
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
*******************************************************************
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
*******************************************************************
