Unknown CSS Appearing on Fieldset

user_10431939 0
Viewed 32

I am having the hardest time styling this fieldset. it seems to be picking up random styling that I didn't place on it. There is a random margin that is show in the inpsect and its pushing the label to a new line. Additionally its center aligned and I can't find any code that is tells it to do that.

https://sidecoinc.com/contact/

I've attached the code but this doesn't seem to be the problem.

I am trying to get it to just look normal. Check boxes with labels next to them and left aligned.

      <fieldset for="MSM_custom_Interests">      
        <legend>What do you need help with?</legend>      
        <input type="checkbox" class="custom_input" name="MSM_custom_JamesHardie" value="True">James Hardie<br>
        <input type="checkbox" class="custom_input" name="MSM_custom_MarvinWindowsDoors" value="True">Marvin Windows & Doors<br>  
        <input type="checkbox" class="custom_input" name="MSM_custom_TimberTech" value="True">TimberTech<br>
        <input type="checkbox" class="custom_input" name="MSM_custom_MoistureManagement" value="True">Moisture Management info<br>   
        <input type="checkbox" class="custom_input" name="MSM_custom_OutdoorLiving" value="True">Outdoor Living Options<br>     
        <input type="checkbox" class="custom_input" name="MSM_custom_Everything" value="True">Everything<br>
        <input type="checkbox" class="custom_input" name="MSM_custom_Other" value="True">Other<br> 
     </fieldset>  


#marketsharpmFieldSet input.custom_input {
  width: auto;
  height: auto;
}
#marketsharpmFormDiv input {
  border-spacing: 0px;
  margin: 0px;
  padding: 0px;
  space: 0px;
  display: block;
}
#marketsharpmFieldSet input {
  width: 100%;
  height: 32px;
}
css html
1 Answers

The issue is the display block on the input - that is forcing the input to be the full width and so the label is pushed to the next line.

Change the display: block - to display: inline-block.... note that this will bring the checkboxes and labels to the same line - but you have styling somewhere that is centering the content so that will need to be resolved. I would also suggest adding a margin right to the checkbox (or margin-left to the label) to space them out a bit.

#marketsharpmFormDiv input {
  border-spacing: 0px;
  margin: 0px;
  padding: 0px;
  space: 0px;
  display: inline-block; // /changes this line
}

Effect of changing block to inline-block:

enter image description here

user_58675720
Related