Printing issues with IE

[Schneider21]

Hey guys.

 

I'm working on a CodeIgnitor site for a client that was built by another company. One section of the site has issues when printing pages in IE. You can check it out here if you like. Everything displays fine inside the browser and even prints fine from Chrome, Firefox, etc, but when printing from IE, there are some severe issues with overlapping and empty spaces.

 

The basic structure of the page is like this:

<div id="shopbox">
    <div id="list-suppliers">
        <div class="vcard">...</div>
        <div class="vcard">...</div>
        <div class="vcard">...</div>
        <br />
        ...
    </div>
    <div id="list-brokers">
        <div class="vcard">...</div>
        <div class="vcard">...</div>
        <div class="vcard">...</div>
        <br />
        ...
    </div>
</div>

 

The print.css contains the following applicable rules:

#shopbox {border:1px solid green; overflow:visible; position: relative; height: 100%;}
.vcard {width: 170px; min-height: 150px; margin-right: 10px; border: 1px solid red}
br + div.vcard {clear: both;}
#list-suppliers {border: 1px dashed blue; position:relative; margin: auto; clear:both; display: block;}
#list-brokers {border: 1px solid #ff00e6; position: relative; margin:auto; clear:both; display: block;}

 

Bear in mind, the borders and such are for debugging while I try to figure out what's going on.

 

Does anyone have any experience with this sort of problem?

[Schneider21]

Solved this issue. The list-suppliers and list-brokers divs had a float:left applied to them in the screen css that was messing everything up. Anyone with similar issues in the future, check your floats!