CODEWITHSUNDEEP
htmlcssgoogle-chrome
dkarv
dkarv

Reputation: 73

Chrome <span> background-color

I have a problem with Chrome. I created a website, the html-code looks like that:

<div id="Content"> 
<h1><span id="back-color">Heading</span></h1> 
<p><span id="back-color">bla bla bla:</span></p> 
  <ul id="bild-liste"> 
    <li><span id="back-color"><a href="?section=Bilder&ID=1">AAAAAA</span></li> 
    <li><span id="back-color"><a href="?section=Bilder&ID=2">BBBBBB</span></li> 
    <li><span id="back-color"><a href="?section=Bilder&ID=3">CCCCCC</span></li> 
    <li><span id="back-color"><a href="?section=Bilder&ID=4">DDDDDD</span></li> 
    <li><span id="back-color"><a href="?section=Bilder&ID=5">EEEEEE</span></li> 
  </ul> 
</div>

The interesting part of my css-stylesheet looks like the following:

#back-color
{
      background-color: white;
}

So I just want the color behind letters to be white. This works quite good in Opera, but when watching the site in Chrome, the background is only white behind the headline and behind "AAAAAA", but not behind the other elements of the list. That's quite confusing, because it only doesn't work in Chrome. Maybe someone has a solution for this problem. thanks!

Upvotes: 0

Views: 808

Answers (2)

Blender
Blender

Reputation: 298166

id is used to reference a unique element, so using it multiple times will produce unexpected results.

class, on the other hand, is used to group elements together. For example:

<div class="indent">

You can have multiple elements that share a class. The CSS selector to reference a class is this:

.indent {
  foo: 'bar';
}

Try using a class instead of an id and see how things work.

Upvotes: 0

MTilsted
MTilsted

Reputation: 5545

An id may only be used once on a website. Use css classes instead

(Replace id="back-color" with class="back-color" and use .back-color instead of #back-color in your css-stylesheet

Upvotes: 4

Related Questions