skip to Main Content

I encountered a very strange thing, my css did not respond properly, my button should have a blue background color and white text but it did not display properly
Does anyone know how to solve it?
I try move the code over div container, it still does not working well.
I have no idea to solve this problem.
html code

    <!DOCTYPE html>
<html lang="en">
<head>
    <title>Restaurant Club</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="stylesheets/style.css">
</head>

<body>
        <section>
            <h2>Welcome to restaurant Club</h2>
        </section>

    <div class="div_design">
        <aside>
            <form>
                <fieldset class="label_design">
                    <legend class="title_design">Evaluate your choice of restaurant</legend>
                    <label for="Users" class="label_design">Restaurant evaluate</label>
                    <input id="Users" type="text" class="text_input" placeholder="Restaurant evaluation">
                    <button type="button" class="button_design" value="add">Add</button>
                </fieldset>
            </form>
        </aside>
    </div>
</body>
</html>

css code

body {
  padding: 1.2em;
  font: 1.3em "Lucida Grande", Helvetica, Arial, sans-serif;
  background-color: #F3F2EF;
}

a {
  color: #00B7FF;
}

.div_design {
  background-color: #ffffff;
  height:auto;
  margin: 8%;
  margin-right: 5%;
  border-radius: 1%;
};

.field_design {
  border:none;
};

.label_design {
  display:block;
  margin: 0.25em;
};

.title_design {
  font-size: 2.5rem;
  margin: 2%;
  border-bottom: 1% solid blue;
}
.text_input {
  font-size: 1.2em;
  line-height: 1.5;
  display: block;
  margin: 0.25em;
  border-radius: 3px;
};

.button_design {
  color:blue;
  margin: 0.25em;
  background-color: rgba(51,121,245,0.88);
};

it is really strange, i never met this problem.
enter image description here

2

Answers


  1. i think you have to remove those semicolons in your css file.

    I tried, it works for me.

    Can you try to remove them ?

    Login or Signup to reply.
  2. I found the problem. This happens because you added semicolons (;) at the end of the class or element. You have to remove all these semicolons.

    Refer below image

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search