Hi, trying to add a condition to our VF page for printing badges.
When an Account name exceed 22 characters, sections are being pushed down to the next page, and what I would like it to do, is to hide image (.divLogo img) if the Account name exceed those 22 characters

<style>
@page {
size: 102mm 76mm;
margin: 0mm;
padding: 0mm;
}

body {
font-family:Arial ;
font-size:14px;
}

.divFirstName{
font-weight:bold;
font-family:Arial;
font-size: 20pt;
text-transform:uppercase;
width: 102mm;
text-align:center;
padding:10px 0px 5px 0px;
}

.divLastName {
font-weight:bold;
font-family:Arial;
font-size:15pt;
width: 102mm;
text-align:center;
padding:0px 0px 5px 0px;
}

.divCompany{ 
font-weight:bold;
font-family:arial;
font-size:20pt;
text-transform:uppercase;
width: 102mm;
text-align:center;
padding:0px 0px 0px 0px;
}

.divLogo img { 
margin:0; padding:5;
display: block;
margin-left: auto;
margin-right: auto; 
}



div { overflow:hidden; }

table { width:100mm; height:70mm; margin:0; padding:0; border-collapse:collapse;  }

.Table1 { page-break-after:always; background:Red; }



<apex:form >
<div id="Meetings"></div> 
<table class="Table1">
  <tr>
    <td>
                <div class="divFirstName"><span><apex:outputText value="{!Attendance__c.First_Name__c}"></apex:outputText></span></div>
    </td>
  </tr>
  <tr>
    <td>
                <div class="divLastName"><apex:outputText value="{!Attendance__c.Last_Name__c}"></apex:outputText></div>
    </td>
  </tr>
  <tr>
    <td>
               <div class="divCompany"><apex:outputText value="{!Attendance__c.Company__c}"></apex:outputText></div>
    </td>
  </tr>
  <tr>
    <td>            
               <div class="divLogo"><apex:image value="{!Attendance__c.Badge_Logo__c}"></apex:image></div>
    </td>
    </tr>
  </table>

Thank you in advance