How to get rid of element offset using CSS?

Question

I have a problem with positioning with some elements, checking its IE8 developer tools, this shows me the following:

Now I am sure that my problem is that there are 12 offsets, but how to remove it ? I cannot find mention of CSS offset property. Do we need an offset besides the field?

Here is the code that produces this:

<div id="wahoo" style="border: solid 1px black; height:100px;"> <asp:TextBox ID="inputBox" runat="server" /> <input id="btnDropDown" type="button" style="width:26px; height:26px; background-position: center center; border-left-color: buttonface; background-image: url(Images/WebResource.gif); border-bottom-color: buttonface; border-top-color: buttonface; background-repeat: no-repeat; border-right-color: buttonface;" tabindex="99" /> <div id="ListboxWrapper" style="display:none; position:absolute; onfocusout="this.style.display = 'none'""> <asp:ListBox ID="lstBoxCompany" runat="server" AutoPostBack="True" OnSelectedIndexChanged="lstBoxCompany_SelectedIndexChanged" style="z-index: 100;" Width="300px" /> </div> </div> 

Item with offset inputBox

Answer 1

This offset is basically the x, y position that the browser computed for the element based on its css attribute of the position. Therefore, if you put <br> in front of it or any other element, this will change the offset. For example, you can set it to 0:

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

or

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

Therefore, any positioning problem is not necessarily related to the offset, although you can always fix it by playing with the top, left, right and bottom attributes.

Is your problem an incompatible browser?

Answer 2

For me it was vertical-align: baseline versus vertical-align: top which caused the top offset.

Try setting vertical-align: top

Answer 3

Quick fix:

 position: relative; top: -12px; left: -2px; 

this should balance these offsets, but maybe you should take a look at the entire layout and see how this box interacts with other fields.

In terms of terminology, left , right , top and bottom are CSS offset properties. They are used to position elements in a specific place (when used with absolute or fixed positioning) or to move them relative to their default location (when used with relative positioning). Fields, on the other hand, indicate the gaps between the drawers, and they sometimes shrink, so they cannot be reliably used as offsets.

But keep in mind that in your case this offset cannot be calculated (exclusively) from CSS offsets.

Answer 4

Setting the top and left properties to negative values ​​may not be a good workaround if your problem is simply that you are in quirks mode. This can happen if there is no <!DOCTYPE> declaration on the page, as a result of which it will be displayed in quirks mode in IE8. In IE8 Developer Tools, make sure Quirks Mode is not selected in Document Mode. If selected, you may need to add the corresponding <!DOCTYPE> ad.

Answer 5

If you are using the IE developer tools, make sure that you do not accidentally leave them in an older setup. I made myself crazy with the same problem until I saw that it was configured to Internet Explorer 7 standards. I changed it in Internet Explorer 9 standards and everything was fixed in place.

Answer 6

moving element top: -12px or positioning it does not solve the problem at all, but only disguises it

I had the same problem: check if you have mixed ones in one packing element: floating elements with non-floating - my non-floating element caused this strange offset of the floating element

Answer 7

I had the same problem on our .NET-based website running on DotNetNuke (DNN), and what solved it for me was basically a simple reset field of the form tag. .NET-based websites are often wrapped in a form and without resetting the field you can see a strange offset that appears sometimes, mainly when there are some scripts.

So, if you are trying to fix this problem on your site, try entering this into your CSS file:

 form { margin: 0; } 

Answer 8

determine the margin and registration for the item before the problem:

 #element_id {margin: 0; padding: 0} 

and see if the problem exists. IE displays a page with more unwanted inheritance. you must stop doing it.

Answer 9

This seems odd, but you can try setting vertical-align: top in CSS for input. This fixes it in IE8, at least.

Answer 10

You can apply reset css to get rid of these default values. The following is an example reset css http://meyerweb.com/eric/tools/css/reset/ . Just apply reset styles to your own styles.

Answer 11

I had the same problem. The offset appeared after updating UpdatePanel. The solution was to add an empty tag before the UpdatePanel as follows:

 <div></div> 

...

Answer 12

Just tune the outline to anyone but this

[Identifier] {do not delineate: no; }

Answer 13

In my case, the offset was added to the custom element with grid layout inside li, while ul was a vertical flexbox.

A fairly simple solution was to define li as a block element with

 li { display: block; } 

And the shift has passed