Troubleshooting CSS in Firefox: Addressing the Box Shadow Attribute

This is the CSS code I am working with:

.thzPartsHeader, .thzPartsContainer {
    border:1px solid #0080ff;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow:0 0 6px #0080ff, 0 0 20px #292929 inset;
    -moz-box-shadow:0 0 6px #0080ff, 0 0 20px #292929 inset;
    box-shadow:0 0 6px #0080ff, 0 0 20px #292929 inset;
    padding: 5px 20px 5px 20px;
    margin:auto;

    font-family:georgia;
    font-size: 12px;
    color:#ffffff;
    background-color:#000000;
}

Below is the HTML code associated:

<fieldset class="thzPartsContainer">
    <legend class="thzPartsHeader"><b>Code Will Appear Below</b></legend>
    <textarea class="textArea" id="txtarea" name="codearea"></textarea>
</fieldset>

While everything looks as intended in Google Chrome, there are display issues in Firefox. You can view how it appears in Firefox through this link. The shadows seem displaced and the margin:auto property is not functioning correctly in Firefox. Can anyone provide a solution for these problems? Any help would be appreciated.

You can also see the code setup on JSFiddle.

cssfirefox

Answer №1

Your question's shadow aspect seems similar to another query about box shadow CSS with a <fieldset>. The discussion on Firefox vs Chrome can be found here.

Although it may not be the most optimal solution, setting fixed dimensions for the <legend> tag could help address the issue. You can try adding the following styles:

.thzPartsHeader{
    position: absolute;
    top: -9px;
    left: 50%;
    margin-left: -75px;
}
.thzPartsContainer{
  padding-top: 9px;
  position: relative;
}

You can see a demo on JSFiddle here: http://jsfiddle.net/FBca7/2/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can a different div or HTML element be used in place of the text "Hello World"?

<body onload="myfunction('target')"><div id="target"> "Hey there!" </div></body> Can we replace the text "Hey there!" with another HTML element or div? This is currently a left-to-right marquee text. <script language= ...

javascriptjqueryhtmlcss

Detecting collisions on a tile map using only JavaScript

Currently, I am developing a tile-based game using a traditional method (utilizing two for loops) and struggling with writing collision detection. I want the blue square to remain on the screen and appear on top of the tiles once the start button is clicke ...

javascripthtmlcsscanvas

Preventing Button Shifting in CSS: A Guide

I have a website at antetech.org where I am using bttn.css for the navigation buttons. The issue I am facing is that when I hover over a button, the letter-spacing doubles, causing all the buttons to the left to shift over. Is there a way to maintain the l ...

htmlcss

Problem with Bootstrap 3 navbar on mobile devices - not tappable or responsive

After years of using Bootstrap, I've come across a new issue with my implementation of a Bootstrap 3 Nav. While testing on a desktop browser with device emulation, the nav collapses and functions properly. However, when tapping on the header on an ac ...

javascriptjqueryhtmlcsstwitter-bootstrap

Ways to eliminate the excess space surrounding an Image border

I am looking to position the image at the top right corner of the screen. body{ font-family: 'Roboto', sans-serif; font-weight: 300; background: #822B2B; color: #ffffff; overflow: hidden; } #showcase{ display: flex; justify-content: center; al ...

htmlcssimagebackgroundspace

Unable to adjust dimensions with CSS width and height properties

I'm currently working on developing an online game with a login screen inspired by Paper.io. I have created the username input and play button, but there seems to be an issue with the width and height specified in the CSS file for the input field. Eve ...

javascriptcsshtml

Steps to use a full-size image as the background for a <div> element

Here is the image_url I want to use: I would like to make this image the cover picture on the page linked below: However, the image is being cropped automatically. I prefer not to create a separate size for it. Is there a way to crop the image to maintai ...

htmlcssdjangoamazon-s3

Are there any substitutes for the traditional body or container tags in HTML and CSS?

Being a newbie in the world of website designing, I have recently dabbled in HTML and CSS to get started. As I was following a tutorial on website designing, I stumbled upon another tutorial showcasing how to create a CSS RESPONSIVE CARD HOVER EFFECT for ...

htmlcssimage

Updates made to the Transform property in Mui Theme are not appearing in the browser

I'm looking to modify the MuiInputLabel.outlined. While I can see various changes when inspecting in the browser, I'm having trouble seeing the transform property change specifically. This is the current configuration of my MuiInputLabel: MuiInp ...

cssreactjsmaterial-ui

What is the process for integrating CSS-styled text into CKEditor?

Currently, I am developing plugins that are designed to incorporate various elements like images and tables into the editor. My objective is to be able to view these elements in their final visual form within the editor itself. To achieve this, I plan on a ...

cssckeditor

Tips for automatically resizing a canvas to fit the content within a scrollable container?

I have integrated PDF JS into my Vue3 project to overlay a <canvas id="draw_canvas"> on the rendered pdf document. This allows me to draw rectangles programmatically over the pdf, serving as markers for specific areas. The rendering proces ...

javascripthtmlcssvue.jscanvas

Tips for creating zoomed-in background images on small screens

I am currently implementing this code for a website project .homepage{ background-image: url(/wp-content/themes/ep/img/_.png); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background ...

twitter-bootstrapcss

HTML5 elements expand to fit the dimensions of the window

While creating an HTML5 page, I observed that div elements without specified widths within sections like "header" and "footer" only occupy the width of the window. For instance: <header> <div id="header-background" style="background: #ddd"> ...

csshtml

Issues with Navigation Style in Internet Explorer 8

Having trouble with the <nav> styling not displaying correctly in IE8 on internal pages. Strangely, it's almost perfect on the homepage but drops to the right instead of down. Website: searchtransparency(dot)net/trc/ ...

csshtmlinternet-explorer-8

Dynamic banner image

I currently have a jumbotron image in the background, but it isn't as responsive and I'm struggling to get the whole image to display properly. Here is what it looks like currently: https://i.sstatic.net/IpuDi.png Here is the full image for ref ...

htmlcsstwitter-bootstrapbootstrap-4

Click event using jQuery does not function properly on Internet Explorer

This piece of code is designed to trigger a hidden radio button by clicking on an image, which then registers an answer in the database. It works perfectly on all browsers except for Internet Explorer. Any advice on how to resolve this issue would be great ...

jqueryhtmlcssinternet-explorer

Designing an HTML banner with 100% width and 660 pixels in height for optimal responsiveness

I am in need of a responsive banner that will be displayed at 100% width and 600px height on fullscreen. Below is the code I have: <style> /* default height */ #ad { height: 660px; width: 100%; } @media o ...

jqueryhtmlcss

Sliding a DIV using Jquery to occupy the top half of the page

I am attempting to create a functionality similar to what is found on Microsoft's Support Website. You can check it out here: (Visit Here) By clicking on any product listed there, a drop-down menu appears. (Please note that the purpose of this articl ...

javascriptjquerycssjquery-uijquery-ui-slider

Display secret content upon hovering with a stylish animation

My current structure is as follows: HTML: <ul> <li> <span>asd</span> adsafsadlvjnsd </li> </ul> CSS: span { width: 0; } li:hover span { width: 60px; } In this setup, the content inside the span tag is h ...

htmlcss

Populate table cells dynamically using an array of elements

I am trying to dynamically change the background color of table cells based on their values. Here is an example of the code I have written: applySchedules = function(schedules){ $.map(schedules, function(value, index){ $('#'+va ...

javascriptjqueryhtmlcss