Get Schooled at New Horizons

Info and insights from New Horizons Computer Learning Centers. 22 locations to serve you.
Start exploring

A simple way to prevent borders from disappearing

When users zoom in or out on your site, sometimes borders of elements may disappear in some browsers. This may also happen if you use code to automatically resize elements based on screen size. Generally, such problems occur when the browser’s display calculations based on the original size and the zoom level results in a non-integer value.

A typical solution is to just make the border wider (e.g., 3px). However, what if you don’t want a border that thick? Fortunately, there’s a sneaky way around the problem: Just make sure that there’s a margin setting that gives the browser enough room for it to make the numbers work out properly. Amazingly, a margin of 1px is enough in many cases. Generally, you wouldn’t even notice that the element is moved over 1px, but this can prevent the border from disappearing.

For example, suppose just the left border of an element with class “thin_bordered” disappears on certain zoom settings. The following CSS setting will cause the border disappearance problem to go away:

thin_bordered {margin-left:1px;}

Learn to re-design your webpage today!


Leave a Reply