I have a form. Inside of that a fieldset inside of that a legend tag. For some reason the legend tag is not on top of the border (like it should be). Instead its underneath it, like a block element. Image of the problem

I tried adding the fieldset tag position: relative, and the legend tag padding: 0. Didnt work. Also i tried making a completely new form, outside of all bootstrap or my css code, applied the necessary styles (fieldset tag position: relative, and the legend tag padding: 0) and it had the same problem.

Here is my current html + css:

.contact-form {
  position: relative;
  padding: 10px;
  margin: 20px 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

.contact-form > legend {
  padding: 0;
  font-size: 1.2rem;
  font-weight: bold;
  color: #333;
}

<div class="col-xl-6 col-md-12">
  <form id="contactForm" method="POST" action="some_api.php">
    <fieldset class="contact-form">
      <legend>Ajánlatkérés</legend>
      ... multiple lines of inputs, labels etc...
    </fieldset>
  </form>
</div>

I have a form. Inside of that a fieldset inside of that a legend tag. For some reason the legend tag is not on top of the border (like it should be). Instead its underneath it, like a block element. Image of the problem

I tried adding the fieldset tag position: relative, and the legend tag padding: 0. Didnt work. Also i tried making a completely new form, outside of all bootstrap or my css code, applied the necessary styles (fieldset tag position: relative, and the legend tag padding: 0) and it had the same problem.

Here is my current html + css:

.contact-form {
  position: relative;
  padding: 10px;
  margin: 20px 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

.contact-form > legend {
  padding: 0;
  font-size: 1.2rem;
  font-weight: bold;
  color: #333;
}

<div class="col-xl-6 col-md-12">
  <form id="contactForm" method="POST" action="some_api.php">
    <fieldset class="contact-form">
      <legend>Ajánlatkérés</legend>
      ... multiple lines of inputs, labels etc...
    </fieldset>
  </form>
</div>

• html
• css

Share Improve this question Follow edited Mar 13 at 11:42 Sean 8,26344 gold badges2626 silver badges5353 bronze badges asked Mar 13 at 11:21 PetGamerPetGamer 1144 bronze badges 0

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

For some reason the tag inherited some css from other sources. I don't know from where, so i just added a few lines of css and the !important property at the end of lines. Yeah css is hard to maintain.

.contact-form > legend {
  padding: 0;
  font-weight: bold;
  color: #333;
  float: none !important;
  width: auto !important;
  margin-bottom: 0 !important;
}