• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

CSS Absolute positioning not working as expected in Firefox?

Johna

Frontend Web Developer
Staff Team
Guardian
Hey everyone.
I have this site I'm building for someone: https://crazy-chicken-girl.22web.org

On the contact section, the labels for the input fields are showing as I would expect them to on Vivaldi and Microsoft Edge, but on Firefox, only the first two labels are in the right place, but the next ones are not (see the attached images).

This is the code for the labels:
HTML:
<form>
  <label for="name">Name</label>
  <input required type="text" id="name" name="name" value="">

  <label for="email">Email</label>
  <input required type="email" id="email" name="email" value="">

  <label for="subject">Subject</label>
  <select required id="subject" name="subject">
    <option value="" selected disabled hidden></option>
  </select>

  <label for="message">Message</label>
  <textarea required id="message" name="message" maxlength="500"></textarea>

  <input type="submit" name="submit" value="Submit">
</form>
CSS:
:root {
  --comfortaa: 'Comfortaa', sans-serif;
}

label {
  font-family: var(--comfortaa);
  font-size: 16px;
  background-color: white;
  padding: 0 4px;
  color: black;
  position: absolute;
  margin-left: 16px;
  margin-top: -8px;
}

How can I make it work for both Chrome and Firefox?
 

Attachments

  • firefox.png
    firefox.png
    37.1 KB · Views: 4
  • vivaldi.png
    vivaldi.png
    35.9 KB · Views: 4

Antero360

King Coder
Staff Team
Security Analyst
Hey everyone.
I have this site I'm building for someone: https://crazy-chicken-girl.22web.org

On the contact section, the labels for the input fields are showing as I would expect them to on Vivaldi and Microsoft Edge, but on Firefox, only the first two labels are in the right place, but the next ones are not (see the attached images).

This is the code for the labels:
HTML:
<form>
  <label for="name">Name</label>
  <input required type="text" id="name" name="name" value="">

  <label for="email">Email</label>
  <input required type="email" id="email" name="email" value="">

  <label for="subject">Subject</label>
  <select required id="subject" name="subject">
    <option value="" selected disabled hidden></option>
  </select>

  <label for="message">Message</label>
  <textarea required id="message" name="message" maxlength="500"></textarea>

  <input type="submit" name="submit" value="Submit">
</form>
CSS:
:root {
  --comfortaa: 'Comfortaa', sans-serif;
}

label {
  font-family: var(--comfortaa);
  font-size: 16px;
  background-color: white;
  padding: 0 4px;
  color: black;
  position: absolute;
  margin-left: 16px;
  margin-top: -8px;
}

How can I make it work for both Chrome and Firefox?
Does this bug happen if you use incognito mode in firefox?
 

Johna

Frontend Web Developer
Staff Team
Guardian
Is this supposed to work ok on Chrome as well ?
It should probably work in chrome since vivaldi and edge, like chrome, are chromium based browsers, but I haven't tried.

If you want the complete code:
HTML:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Annie+Use+Your+Telescope&family=Comfortaa&family=Open+Sans&display=swap" rel="stylesheet">
<section id="contact">
  <h2>
    <div></div>
    Contact
  </h2>
  <form>
    <label for="name">Name</label>
    <input required type="text" id="name" name="name" value="">
    <label for="email">Email</label>
    <input required type="email" id="email" name="email" value="">
    <label for="subject">Subject</label>
    <select required id="subject" name="subject">
      <option value="" selected disabled hidden></option>
    </select>
    <label for="message">Message</label>
    <textarea required id="message" name="message" maxlength="500"></textarea>
    <input type="submit" name="submit" value="Submit">
  </form>
  <a href="https://www.instagram.com/_crazy_chicken_girl_/" target="_blank">
    <div title="Instagram" class="instagram">
      <img src="./_/images/social/instagram.svg" width="20px" height="20px" alt="instagram">
    </div>
  </a>
  <a href="https://www.deviantart.com/crazy-chicken-girl" target="_blank">
    <div title="DeviantArt" class="deviantart">
      <img src="./_/images/social/deviantart.svg" width="20px" height="20px" alt="deviantart">
    </div>
  </a>
</section>
CSS:
:root {
  /*colors*/
  --yellow: #fdde63;
  --dark-yellow: #e0c55d;
  --dark-grey: #1e1e1e;

  /*fonts*/
  --comfortaa: 'Comfortaa', sans-serif;
  --open-sans: 'Open Sans', sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

a {
  display: contents;
  text-decoration: none;
}

h2,
label {
  user-select: none;
}

h2 div {
  position: absolute;
  width: 50%;
  height: 15px;
  background-color: var(--yellow);
  bottom: 0;
  left: 0;
  z-index: -1;
  transition: 0.2s;
}

a:hover h2 div {
  width: 100%;
}

#contact {
  width: 100%;
  height: 372px;
  position: relative;
}

#contact h2 {
  width: 117px;
  height: 31px;
  margin-top: 60px;
  color: black;
  font-family: var(--comfortaa);
  font-weight: normal;
  font-size: 28px;
  position: relative;
}

#contact form {
  width: 100%;
  margin-top: 29px;
  position: relative;
}

input {
  width: calc(50% - 5px);
  height: 40px;
  border-radius: 20px;
  border: 1px solid var(--dark-grey);
  background-color: none;
  padding-left: 20px;
  margin-bottom: 20px;
  font-family: var(--open-sans);
  font-size: 16px;
  background-color: white;
}

input:nth-of-type(1) {
  margin-right: 6px;
}

select {
  width: 100%;
  height: 40px;
  border-radius: 20px;
  border: 1px solid var(--dark-grey);
  background-color: none;
  margin-bottom: 20px;
  padding-left: 15px;
  font-family: var(--open-sans);
  font-size: 16px;
  background-color: white;
}

textarea {
  width: 100%;
  border-radius: 20px;
  border: 1px solid var(--dark-grey);
  background-color: none;
  margin-bottom: 16px;
  height: 132px;
  padding: 10px 20px;
  resize: none;
  font-family: var(--open-sans);
  font-size: 16px;
  background-color: white;
}

input:last-child {
  margin: 0;
  width: 130px;
  background-color: var(--yellow);
  font-family: var(--comfortaa);
  color: var(--dark-grey);
  padding: 0;
  font-size: 20px;
  float: right;
  border: none;
  cursor: pointer;
  transition: 0.2s;
}

input:last-child:hover {
  background-color: var(--dark-yellow);
}

label {
  font-family: var(--comfortaa);
  font-size: 16px;
  background-color: white;
  padding: 0 4px;
  color: black;
  position: absolute;
  margin-left: 16px;
  margin-top: -8px;
}

.instagram {
  width: 40px;
  height: 40px;
  background-color: var(--yellow);
  border-radius: 20px;
  display: inline-flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 0;
  left: 0;
  transition: 0.2s;
}

.deviantart {
  width: 40px;
  height: 40px;
  background-color: var(--yellow);
  border-radius: 20px;
  display: inline-flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 0;
  left: 50px;
  transition: 0.2s;
}

.instagram:hover,
.deviantart:hover {
  background-color: var(--dark-yellow);
}

I've also provided a link to the site:
 
Last edited:

cbreemer

King Coder
Thanks, that helps. Now my local HTML works fine on Chrome:

a.jpg
and on your website it's ok too.
So I installed Firefox and guess what, the local HTML file shows correctly (and I didn't have to any <br> tags).
However, on your website it's wrong, like you reported. I guess it's not your HTML and CSS being the problem, but something else on the page (or loaded into the browser) that doesn't sit well with Firefox. I hope this helps some.
 
Top