Unusual margin glitch discovered in Chrome version 9

Encountered a strange issue with Google Chrome 9: A left-margin for an input element is specified but Chrome fails to apply it upon page load.

Oddly enough, when I toggle the specific declaration off and then back on using Developer Tools, the margin is finally displayed correctly.

The problematic rule looks like this:

margin: 8px 0 0 33%;

Initially, I suspected mixing units might be the culprit, so I tried:

margin: 1% 0 0 33%;

To my dismay, the problem persisted.

This behavior seems isolated to Chrome; IE9 and Firefox 3.6 have no trouble applying the margin as intended.

Is this a known bug and how can I work around it?

For context, I'm operating on Windows 7 Ultimate 64-bit and haven't tested other systems yet.

Update: Verified same issue with Chrome 9 on Linux / Ubuntu 10.10

htmlcssgoogle-chromemarginmargins

Answer №1

After experimenting with the CSS in Firebug, I discovered a solution that seems to be effective:

margin-top:8px;
margin-left:33%;

Answer №2

To fix the floating issue, simply add overflow:hidden to the UL element containing the LI's.

#block_contact_form ul { overflow:hidden; }

Answer №3

  • Make sure the parent element (e.g. li or span) has a CSS property of position:relative.
  • Add float:left for Left Direction or float:right for Right Direction to the input with type button.

Answer №4

Upon discovery, a resolution appears to have been identified. Should a css remedy for this issue prove unattainable, alternative methods such as utilizing JQuery or pure javascript may be explored.

$(.button input).css({margin: 8px 0 0 33%});

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

The back to top feature is malfunctioning when navigating to a new page

I've been working with jQuery Mobile to create some pages and wanted to add a "back to top" element. It's been functioning well, but I've encountered an issue. When I navigate from one page, let's say #sport, back to #restaurants after ...

jqueryhtmlajaxjquery-mobilescrolltop

Retrieving the headers from an ajax request

Is there a method to retrieve the complete request headers used in an AJAX call made through jQuery? ...

javascriptjqueryhtmlajaxhttp-headers

The header grid will disappear in the p-dialog when the browser is minimized

Check out this informative article on creating a dynamic dialog box using PrimeNG here Take a look at the image below to see how the dialog box appears when opened: https://i.sstatic.net/nUq1d.png One issue I am facing is that the grid header gets hidd ...

htmlcssangulardialogprimeng

Building a Compact Dropdown Menu in Bootstrap

I am looking to implement a compact Bootstrap dropdown feature, but I am unsure of how to do it. Take a look at this image for reference. base.html: <a class="text-light" data-bs-toggle="dropdown" aria-expanded="false&qu ...

htmlcssdrop-down-menudropdownbootstrap-5

The variable 'xxx' is not defined in this context

I am attempting to incorporate a dark theme into ngx-charts, and I'm relatively new to using less. Here is the code snippet: My IDE is showing an error message "Cannot find variable 'color-bg-darker'" which leads to compilation failure. Err ...

cssangularlessngx-charts

Understanding the flow of block-level elements in documents when utilizing CSS :after pseudo selectors

What is the reason behind the block level element box appearing after the blue container's content instead of directly after the content box itself? Is it possible to achieve this using the CSS :after selector? TEST AREA CSS div{ background:#59 ...

htmlcss

Restricting the output from BeautifulSoup

After spending some time working with BeautifulSoup and Selenium, I have encountered a problem that has me stumped. I am trying to extract the HTML from the first 6 rows of a table, but these rows do not have any shared class or ID. Here is the structure ...

pythonhtmlbeautifulsoup

Say goodbye to tables and hello to CSS div layouts!

Is there a way to align three or four elements without relying on tables? I want them to follow this format: The reason I am asking is because my current method involves using tables, but they are not allowing me to set a specific height for the "test" bo ...

htmlcssalignmentcss-tables

The 'slide.bs.carousel' event in Bootstrap carousel is triggered just once

Take a look at my JavaScript code: $('#carousel-container').bind("slide.bs.carousel", function () { //reset the slideImg $('.slideImg',this).css('min-height', ''); //set the height of the slider var ...

javascriptjqueryhtmlcsstwitter-bootstrap

Crafting an iframe that dynamically adjusts with Tailwind CSS

I'm having trouble ensuring that an iframe fits properly within a div while using tailwind CSS. I'm struggling to make the iframe responsive, no matter what class I try. Can anyone suggest a class that would help me achieve responsiveness for an ...

htmlcssiframe

Strange behavior observed in fading slides using jQuery

I have been experimenting with jQuery to create a slide feature. However, I am encountering an issue where the next slide fades in before the previous one completely fades out when I click the next arrow. Does anyone know how to fix this problem? <ht ...

jqueryhtmlcss

Ways to calculate the total order amount when the quantity is modified

The order entry form includes columns for product name, price, and quantity: <table id="order-products" class="mobileorder-table"> <colgroup> <col style="width: 80%;"> <col ...

javascripthtmlcssjavascript-objectsonblur

Ways to avoid losing data when a page is refreshed

After encountering a frustrating issue with my form, I turned to research in hopes of finding a solution. However, each attempt has resulted in disappointment as the data is lost every time the page is refreshed. If anyone has advice on how to prevent th ...

javascriptphpjqueryhtmlajax

Scraping Secrets: Unraveling the Art of Procuring User Links

I need assistance with extracting links from the group members' page on Meetup: response.css('.text--ellipsisOneLine::attr(href)').getall() Can you please help me understand why this code is not functioning correctly? This is the HTML stru ...

pythonhtmlscrapy

Tips for accessing form data that has been automatically uploaded in PHP

I've been trying to automatically post data using JavaScript and retrieve it in a PHP file. However, I am facing an issue where the PHP file is not able to retrieve the data. I have set up an automatic form that takes input from another form and send ...

javascriptphphtml

What is the best method to store the name of an image as a session variable?

<!--images acting as buttons--> <form> <img src="peanuts.jpg"" class="qac left" onclick="qac_search()" name="Peanuts"> <img src="milk.jpg" class="qac" onclick=&qu ...

phphtmlvariablesbuttonsession-variables

What are the steps for creating personalized sliders with WordPress?

Seeking guidance on how to code WP Template files to enable control from the WP dashboard for adding or removing slider images. A sample code snippet is provided below. <div id="myCarousel" class="carousel slide" data-ride="carousel"> <!-- Indi ...

javascriptphpcssajaxwordpress

Tips for resolving: 404 error when attempting to load a popup using Ajax

I am new to RoR, so I might be missing something. I am struggling with loading a popup through Ajax when a button is clicked. Every time I attempt it, I encounter an error related to the Ajax method as shown below. I believe my syntax is correct. I have ...

htmlruby-on-railsrubyselecthaml

The v-for directive is displaying my list in a single row with multiple columns instead of in a single column with multiple rows

Can someone please assist in rendering my list as shown below: A B C The current rendering looks like this: 1: A 2: B 3: C Below is the code snippet: To-Do List: <input type="text" class = "todo" placeholder = "Next Item" v-on:keyup.enter="add ...

javascripthtmlvue.js

Trouble with Displaying 3rd Level JQuery Dropdown Menu

Currently working on implementing a 3 level dropdown feature. I have been using a third-party responsive menu in Opencart and it's been working well. You can see a demo of it here: Unfortunately, Opencart does not natively support 3 level categories, ...

javascriptjqueryhtmlcssopencart