Does anyone know how this website Travel Mail are doing their rounded corners, especially the Lastest Travel News box? From what I can tell there are no background images and they aren't using html5 or javascript.

2 answers

danwellman 5600

They are using spans and background-images. You can see this in Firebug (other DOM explorers are available...)

Answered over 8 years ago by danwellman
  • Weird, I looked in Firebug but I didn't see anything about background images or spans. Can you post a screenshot? Paul Sheldrake over 8 years ago
  • here is a screenshot: :) danwellman over 8 years ago

Below is the code for the active list item with the tab. The two corner background images are very small images that are part of a sprite. They go in the two spans above the span that surrounds the link.

<li class="travel">
<span class="tl">&nbsp;</span>
<span class="tr">&nbsp;</span>
<span class="link-wocc linkro-wocc">
<a href="/travel/index.html">Travel</a>
Answered over 8 years ago by Artistic Abode