What is the best way to adjust a 1px margin in Google Chrome?

Check out this example http://jsbin.com/oqisuv/

CSS

body {
    background:#e7ebf2 url(http://i.imgur.com/R2VB6.png) center repeat-y;
}
.menu {
    width:989px;
    margin:auto;
    height:100px;
    background:#666666;
    line-height:100px;
    text-align:center;
    color:#fff;
}

HTML

<body>
 <div class="menu">Hello</div>
</body>

If you view the example above on Google Chrome, you may notice that the .menu appears to have a margin-left:-1px or margin-right:1px.

It looks great on Firefox & IE. How can I fix this issue?

htmlcssgoogle-chrome

Answer №1

@media screen and (-webkit-min-device-pixel-ratio:0) { 

html {
    margin-left: 1px;
}

}

Troubleshooting Chrome Bug for Background Centering

body {   
 background:#e7ebf2 url(http://i.imgur.com/R2VB6.png) 50% 0 repeat-y;   
} 

@media screen and (-webkit-min-device-pixel-ratio:0) {
    body {
        background-position: 50.001% 0;
    }
}

Visit this link to resolve Safari's 1px Background Image Centering Issue

Answer №2

Just like rudsy's response, however this alternative appears to be more effective:

@media only screen and (-webkit-min-device-pixel-ratio:0) {
    body {
        background-position: 49.999% 0;
    }
}

Answer №3

Adjust the body margin to 0 ...Here is a sample code snippet:

body {
background:#f2f4f9 url(http://i.imgur.com/ABCD1.png) center repeat-y;
margin: 0;
}
.menu {
width:800px;
height:80px;
margin: 0 auto;
background:#999999;
line-height:80px;
text-align:center;
color:#000;
}

Answer №4

When designing for both Chrome and Firefox, it is important to ensure consistency across all browsers. To achieve this, always specify width using EVEN values rather than ODD. For example:

.menu {
    width:990px;
}

For further reference, visit http://jsbin.com/oqisuv/2

UPDATE: To optimize display specifically for Chrome, consider using the following code:

@media screen and (-webkit-min-device-pixel-ratio:0) {
    .menu {
    width:990px;
 }

For more details, please refer to http://jsbin.com/oqisuv/5/

Answer №5

To ensure cross-browser compatibility and future readiness, the best approach is to apply the background directly to the centered block or its parent container with horizontal padding to allow the background to extend beyond the child element.

Trying to perfectly align backgrounds with centered blocks using browser-specific hacks often leads to a dead-end.

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

Adjusting the size of a Video/Image Slider to perfectly fit the screen dimensions (both width and height

I have been using a slider code to display my images and videos. The code can be found here: Code:https://codepen.io/1wdtv/pen/jbjZeb The issue I am facing is that the slider is only responsive in terms of width. This means that when resizing the browser ...

javascriptjqueryhtmlcss

Attempting to position an image in the middle-right of a column using bootstrap

After spending all day researching flexbox and vertical align, I still can't figure out how to align an image to the right in my bootstrap column with text wrapping around it on the left. Check out what I've tried so far here: https://codepen.io/ ...

cssimagebootstrap-4css-floatvertical-alignment

Choosing from a variety of tr elements

I'm working with a table in HTML that has about 100 rows. I would like to apply different colors to specific groups of rows, such as making rows 1-10 red and rows 20-40 blue. Using nth-child seems like an option, but it can get quite verbose if I nee ...

javascriptjqueryhtmlcss

What is the correct way to specify an image path for a background URL?

Currently, I am setting a background image for the hr tag using the following code: <hr style="height:6px;background: url(http://ibrahimjabbari.com/english/images/hr-11.png) repeat-x 0 0;border: 0;margin:0px!important"> However, I have now saved th ...

htmlcssimageangular

What is the appropriate syntax for the second division?

<style> .panel{ border:1px solid #000; } </style> <div class="body"> <div class="panel"></div> <div class="panel" style="border-top:0px;"></div> </div> In order to apply the style border-top:0px; to ...

css

Issue with Bootstrap 4 navbar dropdown on mobile: unable to click on menu item

My website is currently in development with Bootstrap 4. I'm facing an issue where, on mobile devices, when the menu items collapse into the three bars, they are not clickable. Despite following the recommendations in the Bootstrap documentation, the ...

jquerycsstwitter-bootstraptwitter-bootstrap-4bootstrap-4

Issue with Bootstrap4 Carousel not scrolling horizontally

I'm currently working on creating a carousel following the Bootstrap code snippet page. It features three images and is designed to have slide controls that move left and right. The script tags with the necessary scripts are located at the bottom of t ...

javascripthtmlcssbootstrap-4

Trouble with Selecting an un-ordered list menu item in Selenium Java's side bar navigation

Exploring a different approach to selecting a menu item in the sidebar navigation within an iframe. After switching to the iframe, I am attempting to choose a specific item from the side menu to display its respective navigational items for selection. Thes ...

javahtmlselenium

Ensuring Consistent TD Heights in Email Designs

I am currently facing a challenge in building an HTML email, specifically in ensuring that two TD elements have the same height across all email clients. Since it is a responsive email design, I have opted to separate the columns into two tables instead o ...

htmlemailhtml-tableemail-client

Is there a way to hide a button on this virtual keyboard after it has been clicked?

After creating a virtual keyboard using HTML and CSS, I am looking to implement JavaScript code that will hide a button after it is clicked. Here is the code I have tried so far: function hideButton() { var button = document.getElementById("simple_butto ...

javascriptcsshtml

Align text within HTML with the use of Bootstrap

Example data value category type item1 100 food fruit item2 50 drinks soda item3 75 snacks chips I want to achieve this forma ...

htmlcsstwitter-bootstrap

Tips on serving a static file from a location other than the public or view directories following middleware in Express JS

I am organizing my files in a specific way. Inside the folder api-docs, I have an index.html file along with some CSS and JS files. My goal is to display the API documentation only for authenticated users. Since I am using Jade for views in this proje ...

javascripthtmlnode.jsexpress

Mastering the Art of Absolute Positioning in HTML Tables' Header Row

I have a table with 80 rows. How can I make the first row fixed? I attempted to add position: fixed; to the but unfortunately, it didn't work. Is there a way to achieve this using CSS or jQuery? <table> <thead> <tr> <td sty ...

jquerycsshtml

Manipulating Object origin data

I'm unsure if this can be achieved. I am aiming to create a header and footer that remain the same while only switching the content pages. The resources I have at my disposal cover HTML, JS, CSS, and JQuery. Below is a simplified version of my curre ...

javascripthtml

A guide on implementing a .click function with jQuery

I have a code snippet that is supposed to add 100 to a number in a MySQL table when a button is clicked. However, the code does not work as expected. When I click the button, nothing happens, but if I refresh the page, it adds 100 to the number. Can some ...

javascriptphpjqueryhtmlcss

What is the best way to access the methods in the "parent" class?

I am facing a situation where I have an object with fieldsCreators that hold creator methods for each field. The dilemma is how to call the creator method inside fieldsCreators as shown below: var obj={ creator:function(ch) { .... .. ...

javascriptjqueryhtml

What is the best way to adjust the size of the close button in react-bootstrap for a unique design?

<CancelButton className="exitBtn"/> .exitBtn{ height:40px; width:35px; } I'm trying to adjust the dimensions of the cancel button, but for some reason it's not working. Can someone provide guidance on how to successfully ...

cssreactjsreact-bootstrap

Retrieve items from the parent row of selected checkboxes

Within my table, I have the following row. <tr class="data_rows" ng-repeat='d in t2'> <td class="tds"> <input class='checkBoxInput' type='checkbox' onchange='keepCount(this)'></td> &l ...

javascripthtmlangularjs

Tips for properly setting up a loop to effectively showcase all available data

I am encountering a strange issue when trying to display all incorrect answers in a table for each question. For some reason, one of the rows is showing up empty. This problem only occurs with question 2, which happens to have multiple correct answers. I s ...

phphtml

Show the cell data when the checkbox next to it is selected

I have a specific table setup and I am trying to display the content of the table cell if its corresponding checkbox is checked upon clicking a button. For example: If Row2 is checked, an alert box should display Row2 Below is my code snippet, Java ...

javascriptjqueryhtmlcss