I have an outer div that has a 200px width and a 3px border. I have an inner div with a 100% width. When zooming to 110% then a 1px gap appears between either the left or the right side of the divs. I have read that this is a known issue, as when the browser is re-sizing if there is a fraction it will round up which will create the gap. Is there any easy way to prevent this?
The float definitely isn’t needed. I thought the border radius on the miniName class was doing it (you could get away without it as you’d only see it zoomed in), but that would only affect the top corners, not the whole side.
If you look, that white border is on both the dark grey AND the light grey box, so I’d guess it’s caused by something other than what you’re showing here - a margin on the image which is pushing the width wider than you’re expecting?
If mininame is the inner div, then delete the width. (blocks are full with by default and will extend to the width of their container, so the width of the outer container should determine the width of the image in this example.)
Then, IF the image is a foreground image, assign to it {display:block;width:100%;height:auto;}
IF the image is a background image, you probably do need the inner div. Instead assign to the image {background-size:cover}.
Without the benefit of the HTML and the image, these are guesses.
The outer 3px border is the main problem in your example because as you zoom in and out that 3px will go up and down and although the browsers will adjust the containers background to fit it may not follow through on all the inner elements and adjust them also.
As mentioned above browsers vary on their algorithms used when zooming so results will be different across the board. On my tests with your snippet of code I was getting 1px gaps on zooming smaller and then no gaps until quite large.
You should be aware that zooming isn’t meant to be pixel perfect because you can’t actually scale sub-pixel although some browsers do have some pseudo sub-pixel anti aliasing going on which helps. Zooming is an accessibility feature for users who can’t read the text and not meant as an exact larger version of the layout (indeed Firefox allows you to only zoom the text which is my preferred option).
If you have designed your site carefully with large text to start with then users will not need to zoom much and then maybe only for the small print
There are things that you can do to offset some of the gaps in your example and if instead of having the border on the outer container you place the border on the inner elements instead then chances are you would see no gaps when you zoom.
I have put up a codepen here showing thee examples.
The first is the one that gaps on zoom.
The second one uses box-shadow inset so that it always sits on the background.
The third and preferred option is simply to place the borders on the inner elements themselves and avoid the problems when the container was zoomed.
In my tests on my browsers I get no gaps in my examples but of course I doubt it will be foolproof.
PaulOB, thank you so much for your detailed response with the different options and code. Since posting this originally, I was able to isolate the problem as being part of the outer box. I really didn’t want to play with position layering and increasing widths beyond 100%, which is what other people have done who have experienced this problem (based on my Google searches). Your 2 optional suggestions never occurred to me.
Option 1 uses box-shadowing which I just recently learned about 1 week ago, so it never occurred to me to use it in this way.
Option 2 is a great solution, and despite sort of priding myself as an out-of-the-box thinker (sort of an ironic pun here) however it just didn’t occur to me to just place the borders on the inner boxes.
In this CSS code “.mini3 .miniName {” is defined on the same line.
Q1: Does this basically mean that when the HTML uses the class of “miniName”, that it will also apply all the attributes of “mini 3” as well?
Q2. Just to confirm – this does not assign the attributes which follows to “mini3” – it is only assigning the attributes to the last reference id, which is this case is “miniName”?
Q3: Is this essentially the same as the HTML code of: div class = “mini3 miniName”?
No to target multiple classes on the same element as you show above you would use a dot separated notation.
e.g. .mini3.miniName{}
(There is no space between selectors)
Note that a space between selectors indicates a descendant selector as in Sam’s example above.
In my examples I used an extra class on the parent for the extra demos so that I could modify the classes with a few different rules rather than writing three separate demos.
