Issue
This HTML is for a page in a mobile app, so all of the CSS styles have to be defined inline. I have a section of the page that I want to have a dark background and white text, but somehow the text is being rendered as black and I don't know why. What do I need to do to define the color property for a div? Every color:#FFFFFF definition is being ignored, in spite of the !important tag. Here is a scaled down version of the page:
<!DOCTYPE html><html>
<head>
<title>Test file (1)</title>
<meta name="viewport" content="width=device-width, user-scalable=no">
<style>
body{background-color:#FFFFFF;}
p, blockquote, pre, ol, ul, li {color:#000000;}
h1, h2, h3 {color:#0a3454;}
</style>
</head>
<body>
<div id="page" style="margin:0;padding:0;width:100%;">
<div class="section-wrap" style="position:relative;top:-8px;left:-8px;right:-8px;margin:auto;width:104%;padding: 0;">
<section style="background-color: #0a3454;">
<div style="color: #FFFFFF;">
<div style="padding: 1.5em 0.3em 1.5em 0em; color:#FFFFFF !important; ul{color:#FFFFFF;} li{color:#FFFFFF !important;}">
<strong><ul style="color:#FFFFFF !important;">
<li>This text is supposed to be white but instead is black because of the initial style definition.</li>
<li>Does anyone know why?</li>
</ul></strong>
</div>
</div>
</section>
</div>
</div>
</body></html>
Solution
Because the ul
and li
selectors are more specific than the color from the div and are therefore prioritized by CSS.
Remove them and the text gets white.
Demo:
<head>
<title>Test file (1)</title>
<meta name="viewport" content="width=device-width, user-scalable=no">
<style>
body{background-color:#FFFFFF;}
p, blockquote, pre, ol {color:#000000;}
h1, h2, h3 {color:#0a3454;}
</style>
</head>
<body>
<div id="page" style="margin:0;padding:0;width:100%;">
<div class="section-wrap" style="position:relative;top:-8px;left:-8px;right:-8px;margin:auto;width:104%;padding: 0;">
<section style="background-color: #0a3454;">
<div style="color: #FFFFFF;">
<div style="padding: 1.5em 0.3em 1.5em 0em; color:#FFFFFF !important; ul{color:#FFFFFF;} li{color:#FFFFFF !important;}">
<strong><ul style="color:#FFFFFF !important;">
<li>This text is supposed to be white but instead is black because of the initial style definition.</li>
<li>Does anyone know why?</li>
</ul></strong>
</div>
</div>
</section>
</div>
</div>
</body></html>
Answered By - ArSeN
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.