While working on creating a print-friendly version of a webpage, I encountered a puzzling issue with Internet Explorer 11. Both the webpage itself and the print preview are showing some unexplained blank space below the div elements.
I have meticulously checked all the CSS classes, html markup, and other possible causes for this problem.
- Adjusting the height does not resolve the issue
- Setting margin and padding to 0 also has no effect
There seems to be a large white block appearing beneath each div element without any apparent reason, leaving me baffled by why IE is inserting it there.
Here is an example snippet of the code:
<div class="row"> ## This div shows excessive white space below it
<div class="medium-12 columns"> ## This div renders fine
<!-- content -->
</div>
</div>
## EXCESS WHITE SPACE HERE ##
## Approximately 20-30 lines long ##
<!-- Next div starts here -->
Below are the CSS rules applied to the affected tag:
padding: 0 0 5px 0;
page-break-inside: avoid;
margin: 0 -.9375rem;
max-width: none;
width: none;
overflow: hidden;
If anyone has insights or suggestions on what could be causing this issue, I would greatly appreciate your input.