How to Get Rid of an Element's Offset Using CSS

How do I get rid of an element's offset using CSS?

That offset is basically the x,y position that the browser has calculated for the element based on it's position css attribute. So if you put a <br> before it or any other element, it would change the offset. For example, you could set it to 0 by:

#inputBox{position:absolute;top:0px;left:0px;}

or

#inputBox{position:relative;top:-12px;left:-2px;}

Therefore, whatever positioning issue you have, is not necessarily an issue with offset, though you could always fix it by playing with the top,left,right and bottom attributes.

Is your problem browser incompatibility?

How do I remove the offset from an item with no width in IE?

It turns out this is a known issue with IE 10-11.

https://github.com/philipwalton/flexbugs#7-flex-basis-doesnt-account-for-box-sizingborder-box

How do I get rid of the diagonal offset of an HTML checkbox in CSS when placing it over another element?

Try adding margin: 0 to the checkbox element, it should solve it.

How can I change the offset parent of an absolutely positioned CSS element?

You could use Javascript to move the element. Here is the jQuery solution with prependTo() function, you could also use appendTo().

http://jsfiddle.net/6557cnew/

$(function() {    $('.absolute').prependTo('body');});

.relative {    position: relative;    left: 50px;    top: 50px;    border: 1px solid blue;    width: 100px;    height: 100px;}.absolute {    position: absolute;    border: 1px solid red;    left: 0;    top: 0;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="relative">    relative    <div class="absolute">        absolute    </div></div>

Remove border offset in HTML/CSS

Use a negative margin the same width as the border.

<p>Hello</p><p>Hello</p><p><span style="border: 5px dotted blue; border-radius: 1em; margin: -5px">Hello</span></p><p>Hello</p><p>Hello</p>

BootStrap remove offset when width 1680

I suggest you to use media query for that and don't use offset concept because offset can not work in your case.
just use the below solution. This media query is work for only Browser width > 1680.

---

@media (min-width: 1680px){ 
    .yourclass{
        margin-left: 16.6666%;
    }
}

---

col-lg-offset-2 make the margin-left:16.6666% so you can use your custom class with same margin-left in media query.

How do I offset an element using the 'top' CSS property inside a TD?

You're missing a position: relative; in the parent TD element. The TD doesn't include that by default.

JS fiddle. http://jsfiddle.net/2p225mv2/2/

CSS to fix it:

td {
  position: relative;
}

How to position (offset) absolute element from it's current position (NOT from parent)?

You can make use of transform: translateX(-150%); to move it to the left where 150% means 150% its own width.

.x_cta_error_msg {
 line-height: 1.5; 
 background-color: lightgreen;
 padding: 10px 15px 10px 45px;
 height: 50px
}

.x_cta_error_msg::before, .x_simple_cta_error_msg::before {
 font-family: "Font Awesome 5 Free"; 
 font-weight: 900; 
 content: "\f06a";
 font-size: 18px;
 position: absolute;
 transform: translateX(-150%);
}

<div style="position: relative">

  <div class="x_cta_error_msg">
    Some text that will be here to showing to the user as an info through the journey of making a booking. 
                           
       </div>
        </div>
        
        
<!-- just loading the fontawesome icon -->        
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />

Strange input offset issue with Internet Explorer

This seems weird, but you can try setting vertical-align: top in the CSS for the inputs. That fixes it in IE8, at least.

---

Related Topics