CODEWITHSUNDEEP
htmlcssinternet-explorer
Ephi Gabay
Ephi Gabay

Reputation: 938

Zoom in IE breaks adjacent elements

I have several adjacent elements that I calculate their position according to another element on the page.
The elements should surround that element.
The problem is that on IE, when you zoom to a certain point, there appears a single line of pixels between those surrounding elements.
I created a jsfiddle to demonstrate the issue:
https://jsfiddle.net/0vcomjsk/

The divs in the fiddle are positioned according the the height and top of the previous div:

#first {
  width: 100%;
  height: 100px;
  top: 0;
  left: 0;
}

#second {
  width: 50%;
  left: 50%;
  top: 100px;
  height: 100px;
 }

 #third {
   width: 100%;
   top: 200px;
   left: 0;
   height: 100px;
 }

As you can see in that fiddle, the red elements, surround a rectangle on the left.
picture: enter image description here

If you open this page on IE and zoom enough, you would be able to see an empty line of pixels between those divs.
picture: enter image description here

Upvotes: 0

Views: 21

Answers (2)

Ephi Gabay
Ephi Gabay

Reputation: 938

I ended up changing the opacity of the divs to 100%, making them overlap each other and putting all of them in a new div with opacity 50%. It solved the issue :)

Upvotes: 0

JokingBatman
JokingBatman

Reputation: 66

Try and set the Height and Top in percentage instead of pixels.

Upvotes: 1

Related Questions