What's causing this input selector and its label to overlap?

Question

I am having issues with a search form, using code I've not created myself.

The issue is that the input selector is being overlapped by its label.

This is obviously a CSS issue, although I have been unable to determine what specific styling is causing the issue.

The following HTML and CSS replicates the issue.

Here's a screenshot of it occurring, on the actual site in question:

Here is a code snippet of the specific HTML element, and the CSS that applies to it.

#LABEL_1 {
    background-position: 0px 0px;
    border-bottom-color: rgb(255, 255, 255);
    border-left-color: rgb(255, 255, 255);
    border-right-color: rgb(255, 255, 255);
    border-top-color: rgb(255, 255, 255);
    box-sizing: border-box;
    color: rgb(255, 255, 255);
    cursor: pointer;
    display: block;
    float: left;
    font-family: Arial, san-serif;
    font-size: 21px;
    height: 21px;
    line-height: 21px;
    list-style-type: none;
    margin-bottom: 5px;
    margin-right: 10px;
    max-width: 100%;
    min-height: 20px;
    outline-color: rgb(255, 255, 255);
    overflow-wrap: break-word;
    text-align: justify;
    text-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 3px;
    text-size-adjust: 100%;
    width: 96.8906px;
    word-wrap: break-word;
    column-rule-color: rgb(255, 255, 255);
    -webkit-font-smoothing: antialiased;
    -webkit-locale: "en-US";
    perspective-origin: 48.4375px 10.5px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-text-emphasis-color: rgb(255, 255, 255);
    -webkit-text-fill-color: rgb(255, 255, 255);
    -webkit-text-stroke-color: rgb(255, 255, 255);
    transform-origin: 48.4375px 10.5px;
    background: rgba(0, 0, 0, 0) none repeat scroll 0px 0px / auto padding-box border-box;
    border: 0px none rgb(255, 255, 255);
    border-top: 0px none rgb(255, 255, 255);
    border-right: 0px none rgb(255, 255, 255);
    border-bottom: 0px none rgb(255, 255, 255);
    border-left: 0px none rgb(255, 255, 255);
    border-color: rgb(255, 255, 255);
    font: normal normal normal normal 21px / 21px Arial, san-serif;
    list-style: none outside none;
    margin: 0px 10px 5px 0px;
    outline: rgb(255, 255, 255) none 0px;
    -webkit-border-after: 0px none rgb(255, 255, 255);
    -webkit-border-before: 0px none rgb(255, 255, 255);
    -webkit-border-end: 0px none rgb(255, 255, 255);
    -webkit-border-start: 0px none rgb(255, 255, 255);
    -webkit-transform-origin: 48.4375px 10.5px;
}/*#LABEL_1*/

#INPUT_2 {
    background-color: rgba(0, 0, 0, 0);
    border-bottom-color: rgb(1, 179, 224);
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    border-bottom-style: none;
    border-bottom-width: 0px;
    border-left-color: rgb(1, 179, 224);
    border-left-style: none;
    border-left-width: 0px;
    border-right-color: rgb(1, 179, 224);
    border-right-style: none;
    border-right-width: 0px;
    border-top-color: rgb(1, 179, 224);
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-top-style: none;
    border-top-width: 0px;
    bottom: -4px;
    color: rgb(1, 179, 224);
    display: block;
    font-family: Arial, san-serif;
    font-size: 21px;
    font-weight: bold;
    height: 30px;
    left: 1px;
    line-height: 21px;
    list-style-type: none;
    margin-right: 5px;
    outline-color: rgb(1, 179, 224);
    overflow-wrap: break-word;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    position: absolute;
    right: 1163.81px;
    text-size-adjust: 100%;
    top: 1px;
    width: 14px;
    word-wrap: break-word;
    -webkit-appearance: radio;
    column-rule-color: rgb(1, 179, 224);
    -webkit-font-smoothing: antialiased;
    -webkit-locale: "en-US";
    perspective-origin: 7px 15px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-text-emphasis-color: rgb(1, 179, 224);
    -webkit-text-fill-color: rgb(1, 179, 224);
    -webkit-text-stroke-color: rgb(1, 179, 224);
    transform-origin: 7px 15px;
    background: rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box;
    border: 0px none rgb(1, 179, 224);
    border-top: 0px none rgb(1, 179, 224);
    border-right: 0px none rgb(1, 179, 224);
    border-bottom: 0px none rgb(1, 179, 224);
    border-left: 0px none rgb(1, 179, 224);
    border-width: 0px;
    border-color: rgb(1, 179, 224);
    border-style: none;
    border-radius: 3px 3px 3px 3px;
    font: normal normal bold normal 21px / 21px Arial, san-serif;
    list-style: none outside none;
    margin: 0px 5px 0px 0px;
    outline: rgb(1, 179, 224) none 0px;
    padding: 0px;
    -webkit-border-after: 0px none rgb(1, 179, 224);
    -webkit-border-before: 0px none rgb(1, 179, 224);
    -webkit-border-end: 0px none rgb(1, 179, 224);
    -webkit-border-start: 0px none rgb(1, 179, 224);
    -webkit-transform-origin: 7px 15px;
}/*#INPUT_2*/

<label for="round_trip" id="LABEL_1">
 <input type="radio" checked="checked" name="trip_type" id="INPUT_2" value="true" /> Round trip
</label>

PLEASE NOTE: The code was generated using a Chrome extension called SnappySnippet, which I discovered via a Stackoverflow question. It allows me to select an HTML element, and then take a snapshot of all CSS and HTML relevant to that element. This has a tendency of pulling through a lot of CSS. I apologise for the confusion that may cause.

Can someone please advise what aspect of the inclded CSS is causing this issue?

@rJ7 I would simply like the selector to be next to the label. To the left of it. — inspirednz, Dec 08 '16 at 17:01

Jon Uleis · Accepted Answer · 2016-12-08T16:46:17.760

2

There was a TON of excess, unnecessary CSS on here. I have no idea what generated your code, but I tidied it up a bit by removing as much of the unneeded stuff as possible, and fixed the overlap specifically by removing some absolute positioning on the radio button.

#LABEL_1 {
  color: #fff;
  cursor: pointer;
  display: block;
  font-family: Arial, san-serif;
  font-size: 21px;
  height: 21px;
  line-height: 27px;
  text-shadow: rgba(0, 0, 0, 0.3) 0px 1px 3px;
  margin: 0px 10px 5px 0px;
}

#INPUT_2 {
  height: 30px;
  outline-color: rgb(1, 179, 224);
  padding: 0;
  width: 14px;
  margin: 0px 8px 0px 0px;
  vertical-align: top;
}

<label for="round_trip" id="LABEL_1">
  <input type="radio" checked="checked" name="trip_type" id="INPUT_2" value="true" />Round trip
</label>

edited Dec 08 '16 at 16:46

answered Dec 08 '16 at 16:40

Jon Uleis

17,693
2
33
42

Thanks Jon for the tidy-up. I've added a note to the question to explain the reason for the overload of CSS. If used SnappySnippet to extract the CSS affecting the HTML element in question. If you happen to know of a better way to extract HTML and all relevant CSS from a web page, please let me know. Would love to have a better way to go about it. – inspirednz Dec 08 '16 at 16:48
@inspirednz Have you found copying/pasting out of Chrome Developer Tools to not be enough? I've never looked into third party tools for extracting code, since it's all available in the browser natively. – Jon Uleis Dec 08 '16 at 16:50
1

I was not sure how to go about that in such a way that I could be sure I'd grabbed all relevant CSS. My line of thinking was that if I don't post all CSS affecting the HTML elements in question, then it may be impossible for people to answer my question. Especially because in this case what caused the form (and various other elements) to begin displaying incorrectly was the installation of a WordPress plug-in. So I gather that plug-in may have introduced some CSS that somehow started affecting existing CSS on the site. So I figured I better present all relevant CSS. – inspirednz Dec 08 '16 at 17:06
1

Based on your answer, what I found is that the `position:absolute` attribute was introduced by the plug-in I mentioned in above comment. That plug-in uses Bootstrap, which means the bootstrap css files are pulled into the site. Turns out the Bootstrap form related css (https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/less/forms.less) is what introduced the absolute positioning. So I am now declaring `position : relative` for the label element in my question, and that's fixed it. – inspirednz Dec 08 '16 at 17:27

score 1 · Answer 2 · answered Dec 08 '16 at 16:41

That happens because the input uses position: absolute, so increase the left margin on the label will fix that, changed from margin: 0px 10px 5px 0px; to margin: 0px 10px 5px 20px;

Also, you have a lot of unnecessary properties in your rules

#LABEL_1 {
    background-position: 0px 0px;
    border-bottom-color: rgb(255, 255, 255);
    border-left-color: rgb(255, 255, 255);
    border-right-color: rgb(255, 255, 255);
    border-top-color: rgb(255, 255, 255);
    box-sizing: border-box;
    color: rgb(255, 255, 255);
    cursor: pointer;
    display: block;
    float: left;
    font-family: Arial, san-serif;
    font-size: 21px;
    height: 21px;
    line-height: 21px;
    list-style-type: none;
    margin-bottom: 5px;
    margin-right: 10px;
    max-width: 100%;
    min-height: 20px;
    outline-color: rgb(255, 255, 255);
    overflow-wrap: break-word;
    text-align: justify;
    text-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 3px;
    text-size-adjust: 100%;
    width: 96.8906px;
    word-wrap: break-word;
    column-rule-color: rgb(255, 255, 255);
    -webkit-font-smoothing: antialiased;
    -webkit-locale: "en-US";
    perspective-origin: 48.4375px 10.5px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-text-emphasis-color: rgb(255, 255, 255);
    -webkit-text-fill-color: rgb(255, 255, 255);
    -webkit-text-stroke-color: rgb(255, 255, 255);
    transform-origin: 48.4375px 10.5px;
    background: rgba(0, 0, 0, 0) none repeat scroll 0px 0px / auto padding-box border-box;
    border: 0px none rgb(255, 255, 255);
    border-top: 0px none rgb(255, 255, 255);
    border-right: 0px none rgb(255, 255, 255);
    border-bottom: 0px none rgb(255, 255, 255);
    border-left: 0px none rgb(255, 255, 255);
    border-color: rgb(255, 255, 255);
    font: normal normal normal normal 21px / 21px Arial, san-serif;
    list-style: none outside none;
    margin: 0px 10px 5px 20px;
    outline: rgb(255, 255, 255) none 0px;
    -webkit-border-after: 0px none rgb(255, 255, 255);
    -webkit-border-before: 0px none rgb(255, 255, 255);
    -webkit-border-end: 0px none rgb(255, 255, 255);
    -webkit-border-start: 0px none rgb(255, 255, 255);
    -webkit-transform-origin: 48.4375px 10.5px;
}/*#LABEL_1*/

#INPUT_2 {
    background-color: rgba(0, 0, 0, 0);
    border-bottom-color: rgb(1, 179, 224);
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    border-bottom-style: none;
    border-bottom-width: 0px;
    border-left-color: rgb(1, 179, 224);
    border-left-style: none;
    border-left-width: 0px;
    border-right-color: rgb(1, 179, 224);
    border-right-style: none;
    border-right-width: 0px;
    border-top-color: rgb(1, 179, 224);
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-top-style: none;
    border-top-width: 0px;
    bottom: -4px;
    color: rgb(1, 179, 224);
    display: block;
    font-family: Arial, san-serif;
    font-size: 21px;
    font-weight: bold;
    height: 30px;
    left: 1px;
    line-height: 21px;
    list-style-type: none;
    margin-right: 5px;
    outline-color: rgb(1, 179, 224);
    overflow-wrap: break-word;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    position: absolute;
    right: 1163.81px;
    text-size-adjust: 100%;
    top: 1px;
    width: 14px;
    word-wrap: break-word;
    -webkit-appearance: radio;
    column-rule-color: rgb(1, 179, 224);
    -webkit-font-smoothing: antialiased;
    -webkit-locale: "en-US";
    perspective-origin: 7px 15px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-text-emphasis-color: rgb(1, 179, 224);
    -webkit-text-fill-color: rgb(1, 179, 224);
    -webkit-text-stroke-color: rgb(1, 179, 224);
    transform-origin: 7px 15px;
    background: rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box;
    border: 0px none rgb(1, 179, 224);
    border-top: 0px none rgb(1, 179, 224);
    border-right: 0px none rgb(1, 179, 224);
    border-bottom: 0px none rgb(1, 179, 224);
    border-left: 0px none rgb(1, 179, 224);
    border-width: 0px;
    border-color: rgb(1, 179, 224);
    border-style: none;
    border-radius: 3px 3px 3px 3px;
    font: normal normal bold normal 21px / 21px Arial, san-serif;
    list-style: none outside none;
    margin: 0px 5px 0px 0px;
    outline: rgb(1, 179, 224) none 0px;
    padding: 0px;
    -webkit-border-after: 0px none rgb(1, 179, 224);
    -webkit-border-before: 0px none rgb(1, 179, 224);
    -webkit-border-end: 0px none rgb(1, 179, 224);
    -webkit-border-start: 0px none rgb(1, 179, 224);
    -webkit-transform-origin: 7px 15px;
}/*#INPUT_2*/

<label for="round_trip" id="LABEL_1">
 <input type="radio" checked="checked" name="trip_type" id="INPUT_2" value="true" /> Round trip
</label>

Thanks for this. What I've found, via answer from Jon Uleis, is that the position:absolute attribute was what introduced the issue. So dealing with that directly is what solved the problem. — inspirednz, Dec 08 '16 at 17:17
@inspirednz That could be it. Sometimes, to center an element vertical, `position: absolute` is used, which could be a reason it is there in the first place — Asons, Dec 08 '16 at 17:22
Thanks for mentioning that. Upon further investigation, I see that my fix of adding `position: inherit` was correcting the horizontal positioning, but actually causing the vertical positioning to get messed up. So I am now applying `position: relative` to the label, and that's fixed the horizontal, without messing with the vertical (i.e. selector and label are vertically aligned perfectly). :-) — inspirednz, Dec 08 '16 at 17:32

score -1 · Answer 3 · answered Dec 08 '16 at 16:41

-1

Give the #Label_1 a padding-left:10px and you will also need to expand the width. I'm not sure why every single property is defined like that, but if that is what you're going for you've got a good one.

answered Dec 08 '16 at 16:41

Rothrock

1,413
2
16
39

What's causing this input selector and its label to overlap?

3 Answers3