Jump to content

Fun fact with <a> and <span> tags


pwired
 Share

Recommended Posts

 

I just wonder for how many of you this isn't any surprise ?

I didn't know any better than that back-ground images are only used with <div> tags.
But today I bumped into a html template where I saw highly surprised that both a <a> and a <span> tag
where css configured with a background-image :o

.info a {
    background: url(../images/msg-icon.png)1px 2px no-repeat;
}

.info span {
    background: url(../images/c-icon.png) 0px 0px no-repeat;
}

Doing so the content inside the <a> tag has an email icon on the left
and the <span> tag a mobile phone icon on the left.

To be honest I never saw this before in websites, tutorials, the forum, etc.
so I guess this is a case where one out of habit uses css in a limited way ;)

 

 

Link to comment
Share on other sites

6 minutes ago, pwired said:

I just wonder for how many of you this isn't any surprise ?

No surprise here..

6 minutes ago, pwired said:

I didn't know any better than that back-ground images are only used with <div> tags.

:)

 

6 minutes ago, pwired said:

I saw highly surprised that both a <a> and a <span> tag
where css configured with a background-image

I guess I am from the old school. A 'long time' ago, logos used to be background images set on anchors (<a> tags). Menu items (<a> tags) used to have background images called sprites that would 'shift' on hover to create a nice hover effect...;)

  • Like 6
Link to comment
Share on other sites

51 minutes ago, pwired said:

I didn't know any better than that back-ground images are only used with <div> tags.

ahem... not sure if serious? ???

OTOH, I just recently found out about the :empty pseudo-selector, which would have helped me to avoid some stupid workarounds or hacks in some situations...

https://developer.mozilla.org/en-US/docs/Web/CSS/:empty

 

  • Like 1
Link to comment
Share on other sites

  • 4 weeks later...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...