CODEWITHSUNDEEP
csshtml-listshtml
Wijden
Wijden

Reputation: 511

span tag not working after an ul

I have a ul with a background image next to it. I have a text in a span tag which is not working and I can't figure out why.

This is The HTML code :

<div>
    <ul id="first" class="img_yellow_arrow" style="margin-left:120px">
      <span class="brightOrange"style="margin-left:5px">3&nbsp;</span>
      <span class="gris">nouveaux e-mails,</span>
       <li>A</li>
       <li>B</li>
       <li>C</li>
    </ul>
</div>

and this my class :

.img_yellow_arrow{
content:url(images/yellow_arrow_2.png);
vertical-align:middle;
}

As I khow we can put an <span> inside an <ul> and I verified with the following code HTML :

<html>
<body>

<h4>An Unordered List:</h4>
<ul><span>x</span>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

</body>

I would greatly appreciate if you can help me solve this problem. Thanks in advance

Upvotes: 1

Views: 1302

Answers (2)

Jeeva J
Jeeva J

Reputation: 3253

Change your css. Here is the code, http://jsfiddle.net/pTccG/

If you want to use background then, use background- image.

I think here in your code content overlay on the text. 

instead of "content" use "background-image"..

    .img_yellow_arrow{
    background-image:url(images/yellow_arrow_2.png);
    vertical-align:middle;
    }

Upvotes: 1

SW4
SW4

Reputation: 71170

Change your HTML to:

<div><span class="brightOrange" style="margin-left:5px">3&nbsp;</span><span class="gris">nouveaux e-mails,</span>
    <ul id="first" class="img_yellow_arrow" style="margin-left:120px">
        <li>A</li>
        <li>B</li>
        <li>C</li>
    </ul>
</div>

It's currently invalid - <span> tags are not valid child elements of lists so should appear either outside the <ul> element, or within one of its child <li> elements.

See here for further information from w3c

Upvotes: 2

Related Questions