CODEWITHSUNDEEP
htmlcss
user3443528
user3443528

Reputation: 47

HTML text color of my button isn't coming out correctly

I'm a n00b, so go easy on me. :)

Right now I'm stuck because I need to figure out why the text color of the two named buttons (Resume and Programs) isn't white. The buttons reside inside divs of class outerdiv; thus they should inherit the property font-color: #FFFFFF. But apparently they aren't doing that, since the font is still black.

Please explain the HTML logic that corrects this problem.

Code:

<html>
<head>
    <title>my site</title>


    <style type="text/css">
        p
        {
            font-family: Arial;
            color: #FFFFFF;
        }
        #mtx_bckgd
        {
            font-family: "Courier New";
            height: 750px;
            width: 1000px;
            position: absolute;
            z-index: -1;
            background: linear-gradient(180deg, #39275b, #FFFFFF);
        }
        #mtx_bckgd > p
        {
            word-wrap: break-word;
            color: #D8D8D8;     
            overflow: hidden;
        }
        #headerbox
        {
            height: 50px;
            top: 25px;
            left: 5px;
        }
        h1
        {
            color: #FFFFFF;
            font-weight: 400;
            text-align: center;
            margin: auto;
            padding: auto;
            text-shadow: 2px 2px rgb(51,51,51);

        }
        #navbar
        {
            top: 120px;
            left: 5px;
            width: 1000px;
            height: 30px;
        }
        #uwlogo
        {
            height: 50px;
            float: left;
        }
        #JaminWEB
        {
            margin: 0px auto;
        }
        .navbutton
        {
            width: 33%;
            height: 25px;
            background-color: rgba(51,51,51,0.5);
            margin: 0px;
            padding: 0px;
        }
        #footer
        {
            top: 800px;
        }
        .outerdiv
        {
            position: absolute;
            font-family: Arial;
            width: 1000px;
            border: solid 2px #FFFFFF;
            background-color: rgba(215,169,0,0.5);
            margin: 0px;
            padding: 0px;
            font-color: #FFFFFF;
        }

    </style>
    <script type="text/javascript">
        function change_bckgd()
        {
            var bitstr = "";
            for (var i = 0; i < 4000; ++i)
                bitstr += Math.floor(Math.random() * 10) % 2 ? "0" : "1";
            document.getElementById("mtx_txt").innerHTML = bitstr;

        }

    </script>


</head>
<body>
    <div id="mtx_bckgd">
        <p id="mtx_txt"></p>
    </div>
    <div class="outerdiv" id="headerbox">
        <div id="uwlogo">
            <img src="C:\Users\XXXXXX\Desktop\uwlogo.png" height="50px">
        </div>
        <div id="JaminWEB">
            <h1>JaminWEB</h1>
        </div>

    </div>

    <div class="outerdiv" id="navbar">
        <input type="button" class="navbutton" value="Resume"/>
        <input type="button" class="navbutton" value="Programs"/>
        <input type="button" class="navbutton"/>



    <div class="outerdiv" id="footer">
        <p>Last modified: March 21st, 2014</p>
    </div>
    <script type="text/javascript">
        setInterval(change_bckgd, 200);
    </script>
</body>
</html>

Upvotes: 0

Views: 730

Answers (3)

j08691
j08691

Reputation: 207891

First, in your .outer-div rules, you have font-color which isn't a property, it's just color. But if you correct that, you'll see the text is still black, the default color. That's because browsers are notorious for having issues when rendering form controls.

As the MDN says:

CSS font and text features can be used easily with any widget (and yes, you can use @font-face with form widgets). However, browsers' behaviors are often inconsistent. By default, some widgets do not inherit font-family and font-size from their parents. And many browsers use the system default appearance instead.

The easiest way to fix this would be to add color:inherit; or color:white to your .navbutton class

jsFiddle example

Upvotes: 1

Jacques
Jacques

Reputation: 3774

You can set .navbutton to have a color of white in the css, or adding color:inherit should work. And the proper "font-color" property in CSS is just "color", fyi.

Example:

.navbutton
    {
        width: 33%;
        height: 25px;
        background-color: rgba(51,51,51,0.5);
        margin: 0px;
        padding: 0px;
        color: #fff;
    }

Inputs don't automatically inherit all parent styles, so you have to specify to inherit, or specify the style you want.

Upvotes: 0

raju
raju

Reputation: 1

.outerdiv input[type=button]
        {
           color:#fff;
        }

Upvotes: 0

Related Questions