CODEWITHSUNDEEP
htmlcss
user1975126
user1975126

Reputation: 51

CSS stylesheet doesn't work entirely

I have spent some of time (about one hour, probably even more) looking for what is wrong with my code on the Internet, looking for common CSS pitfalls, etc. My guess is it's something pretty silly, but I'm new at HTML and CSS.

The CSS style doesn't seem to apply properly. What should I change? Thank you for your answers in advance and sorry if I'm not asking the question exactly the way I should (I haven't posted on www.stackoverflow.com in years (literally).

What follow is the entirety of the code I have so far:

<html>
    <head>
        <script>

        </script>
        <style>
            *{
                margin:0;
                padding:0;
            }
            .button{
                width:50;
                height:50;
                font-size:25;
                margin:2;
                cursor:pointer;
            }
            .textview{
                width:217;
                margin:5;
                font-size:25px;
                padding:5;
            }
        </style>
    </head>

    <body>
        <div class="main">
            <form name = "form">
                <input class="textview">
            </form>
            <table>
                <tr>
                    <td><input class="button" type="button" value="C"></td>
                    <td><input class="button" type="button" value="<"></td>
                    <td><input class="button" type="button" value="/"></td>
                    <td><input class="button" type="button" value="X"></td>
                </tr>
                <tr>
                    <td><input class="button" type="button" value="7"></td>
                    <td><input class="button" type="button" value="8"></td>
                    <td><input class="button" type="button" value="9"></td>
                    <td><input class="button" type="button" value="-"></td>
                </tr>
                <tr>
                    <td><input class="button" type="button" value="4"></td>
                    <td><input class="button" type="button" value="5"></td>
                    <td><input class="button" type="button" value="6"></td>
                    <td><input class="button" type="button" value="+"></td>
                </tr>
                <tr>
                    <td><input class="button" type="button" value="1"></td>
                    <td><input class="button" type="button" value="2"></td>
                    <td><input class="button" type="button" value="3"></td>
                    <td><input class="button" type="button" value="="></td>
                </tr>             
                <tr>
                    <td><input class="button" type="button" value="1"></td>
                    <td><input class="button" type="button" value="2"></td>
                    <td><input class="button" type="button" value="3"></td>
                    <td><input class="button" type="button" value="+"></td>
                </tr>
            </table>
        </div>
    </body>
</html>

Upvotes: 1

Views: 37

Answers (2)

TwiN
TwiN

Reputation: 3824

Some properties in your stylesheet are missing the unit.

You can try the following:

* {
    margin: 0;
    padding: 0;
}

.button {
    width: 50px;
    height: 50px;
    font-size: 25px;
    margin: 2px;
    cursor: pointer;
}

.textview {
    width: 217px;
    margin: 5px;
    font-size: 25px;
    padding: 5px;
}

The reason why the first margin and padding properties do not require an unit is because their value is 0, thus the unit is unnecessary, though you can still add it if you wish.

Here is a list of all existing units:

em, ex, %, px, cm, mm, in, pt, pc, ch, rem, vh, vw, vmin, vmax

You can read more about them here.

Upvotes: 0

Quentin
Quentin

Reputation: 943579

A CSS validator will highlight the specific problems.

A length, in CSS, requires a unit (like px, em, % or vh), and most of yours are just numbers.

Upvotes: 4

Related Questions