CODEWITHSUNDEEP
htmlcsstext
Otaku Me
Otaku Me

Reputation: 13

Text color will not change in <p>

In the piece of code below, I cannot seem to change the color in the <p> tags, and I have no clue why. I want to change the TITLE text to gray, but for some reason nothing I do changes the color.

Any help would be appreciated!

HTML:

<div class="rec-anime-list-container">
<ul class="rec-anime-list container">
    <li>
        <a href="#">
            <div class="column"><img src="http://dummyimage.com/120x80/000/fff" /></div></a>
            <div class="column rightcol"><p class="rec-anime-title">TITLE</p><strong class="sub">[Sub]</strong></div>
    </li> 
    <li>
        <a href="#">
            <div class="column"><img src="http://dummyimage.com/120xTITLE80/000/fff" /></div></a>
            <div class="column rightcol"><p class="rec-anime-title">TITLE</p><strong class="sub">[Sub]</strong></div>
    </li> 
    <li>
        <a href="#">
            <div class="column"><img src="http://dummyimage.com/120x80/000/fff" /></div></a>
            <div class="column rightcol"><p class="rec-anime-title">TITLE</p><strong class="sub">[Sub]</strong></div>
    </li> 
    <li>
        <a href="#">
            <div class="column"><img src="http://dummyimage.com/120x80/000/fff" /></div></a>
            <div class="column rightcol"><p class="rec-anime-title">TITLE</p><strong class="sub">[Sub]</strong></div>
    </li>     
    <li>
        <a href="#">
            <div class="column"><img src="http://dummyimage.com/120x80/000/fff" /></div></a>
            <div class="column rightcol"><p class="rec-anime-title">TITLE</p><strong class="sub">[Sub]</strong></div>
    </li>
    <li>
        <a href="#">
            <div class="column"><img src="http://dummyimage.com/120x80/000/fff" /></div></a>
            <div class="column rightcol"><p class="rec-anime-title">TITLE</p><strong class="sub">[Sub]</strong></div>
    </li>    
</ul>​​​​​​​​​​​​​​

CSS:

.rec-anime-list-container {
    float:right;
    text-decoration: none;
}
.rec-anime-list {
    max-width: 480px;
}
.container li{
    float:left;
    width:230px;
    margin-right:10px;
    margin-bottom: 10px;
}
.column {
    display:inline-block;
    vertical-align:middle
}
.rightcol {
    width:100px;
}​
.rec-anime-title {
    color:gray;
}
.sub {
    color:blue;
    font-size:16px;
}
.dub {
    color:red;
}

Upvotes: 0

Views: 292

Answers (2)

Evan Langlois
Evan Langlois

Reputation: 4353

You have some weird character at the end of your .right-col definition that doesn't print or show up, but causes the parser to ignore the next definition. This is why it works for the answer above. Remove that definition and re-add and be careful of hitting extra keys or use an editor that displays all characters (even extra spaces).

Upvotes: 1

David Coder
David Coder

Reputation: 1138

your html is perfect the problem is in your css. I run above code in my pc even i dont get p tag text in grey color. So i changed the code and its working.

Remove your .rightcol class and give width to .rec-anime-title class

**

.rec-anime-list-container {
    float:center;
    text-decoration: none;
}
.rec-anime-list {
    max-width: 480px;
}
.container li{
    float:left;
    width:230px;
    margin-right:10px;
    margin-bottom: 10px;
}
.column {
    display:inline-block;
    vertical-align:middle
}
.rec-anime-title
{
	color:grey;
	width:100px;
}
.sub {
    color:blue;
    font-size:16px;
}
.dub {
    color:red;
}
<html>
<head>
  <body>
<div class="rec-anime-list-container">
<ul class="rec-anime-list container">
    <li>
        <a href="#">
            <div class="column"><img src="http://dummyimage.com/120x80/000/fff" /></div></a>
            <div class="column rightcol"><p class="rec-anime-title">TITLE</p><strong class="sub">[Sub]</strong></div>
    </li> 
    <li>
        <a href="#">
            <div class="column"><img src="http://dummyimage.com/120xTITLE80/000/fff" /></div></a>
            <div class="column rightcol"><p class="rec-anime-title">Deep parekh</p><strong class="sub">[Sub]</strong></div>
    </li> 
    <li>
        <a href="#">
            <div class="column"><img src="http://dummyimage.com/120x80/000/fff" /></div></a>
            <div class="column rightcol"><p class="rec-anime-title">TITLE</p><strong class="sub">[Sub]</strong></div>
    </li> 
    <li>
        <a href="#">
            <div class="column"><img src="http://dummyimage.com/120x80/000/fff" /></div></a>
            <div class="column rightcol"><p class="rec-anime-title">TITLE</p><strong class="sub">[Sub]</strong></div>
    </li>     
    <li>
        <a href="#">
            <div class="column"><img src="http://dummyimage.com/120x80/000/fff" /></div></a>
            <div class="column rightcol"><p class="rec-anime-title">TITLE</p><strong class="sub">[Sub]</strong></div>
    </li>
    <li>
        <a href="#">
            <div class="column"><img src="http://dummyimage.com/120x80/000/fff" /></div></a>
            <div class="column rightcol"><p class="rec-anime-title">TITLE</p><strong class="sub">[Sub]</strong></div>
    </li>    
</ul>
 
</body>
</html>

Upvotes: 0

Related Questions