Well.... I have a problem...

S

Stilger

New Member
I designed this page that works fine on my browser but crams all the images and text together on the browsers of a couple of other workstations in the office. All workstations are using IE 8

Here is an image of what the page should look like:

https://www.bankofwhittier.com/express/contact.html

But it looks like this on a few machines:

bad.bmp


The code is (with some removed to fit:

<table width="540" border="0" align="right" cellpadding="2" cellspacing="2">
<tr >
<td colspan="4"><span class="secondary-header"><br />
California:</span><br />
<img src="images/light-gray.gif" alt="" width="100%" height="1" /><br />
<p></p></td>
</tr>








<tr>
<td align="left" valign="top"><img src="images/Rachida.jpg" alt="" width="90" height="65" /></td>
<td valign="top"><strong>Rachida Mandvi<br />
Private Banker</strong><br />
562-945-7553 Ext. 118<br />
Email: <a href="mailto:[email protected]"><br />
</a><img src="images/email/RMandviEmail.gif" alt="" width="163" height="12" border="0" /></td>
<td align="left" valign="top"><img src="images/GhadahKambel100.jpg" alt="" width="90" height="65" /></td>
<td valign="top"><strong>Ghadah Kambel<br />
Business Development Rep.</strong><br />
562-945-7553 Ext. 122<br />
Email: <a href="mailto:[email protected]"><br />
</a><img src="images/GhadahlEmail.gif" alt="" width="183" height="12" border="0" /></td>
</tr>













<tr>
<td align="left" valign="top"><img src="images/Anwar100.jpg" alt="" width="90" height="65" /></td>
<td valign="top"><strong>Anwar Sherief<br />
Senior Credit Analyst</strong><br />
562-945-7553 Ext. 110<br />
Email: <a href="mailto:[email protected]"><br />
</a><img src="images/email/AsheriefEmail.gif" alt="" width="176" height="12" border="0" /></td>
<td align="left" valign="top"><img src="images/nhung.jpg" alt="" width="90" height="65" /></td>
<td valign="top"><strong>Nhung Tran<br />
Operations Manager</strong><br />
562-945-7553 Ext. 115<br />
Email: <a href="mailto:[email protected]"><br />
</a><img src="images/email/ntranemail.gif" alt="" width="180" height="16" border="0" /></td>

</tr>






<tr>
<td align="left" valign="top"><img src="images/patricia.jpg" alt="" width="90" height="65" /></td>
<td valign="top"><strong>Patricia Le<br />
Asst. Ops. Manager</strong><br />
562-945-7553 Ext. 112<br />
Email: <a href="mailto:p[email protected]"><br />
</a><img src="images/email/pleemail.gif" alt="" width="177" height="12" border="0" /></td>
<td align="left" valign="top"><img src="images/nghia.jpg" alt="" width="90" height="65" /></td>
<td valign="top"><strong>Nghia Le<br />
Accounting Services</strong><br />
562-945-7553 Ext. 104<br />
Email: <br />
<img src="images/email/nghiaemail.gif" alt="" width="170" height="15" border="0" /></td>
</tr>


<tr>
<td align="left" valign="top"><img src="images/wstilwell.jpg" alt="" width="90" height="65" /></td>
<td valign="top"><strong>William Stilwell<br />
Accounting &amp; IT Services</strong><br />
562-945-7553 Ext. 107<br />
Email: <a href="mailto:[email protected]"><br />
</a><img src="images/WStilwelllEmail.gif" alt="" width="183" height="12" border="0" /></td>
<td width="102" align="left" valign="top"><p align="center"><img src="images/mohammed-elbeliedy.jpg" alt="" width="90" height="65" /></p></td>
<td width="177" valign="top"><strong>Mohamed Elbeleidy<br />
Senior Vice President </strong><br />
562-945-7553 Ext.&nbsp; 117<br />
Email: <img src="images/email/melbeleidyEmail.gif" alt="" width="174" height="12" border="0" /></td>



</tr>









<tr>

<td align="left" valign="top"><img src="images/MikeAbdel.jpg" alt="" width="90" height="65" /></td>
<td valign="top"><strong>Mike Abdelaaty<br />
Chief Credit Officer</strong><br />
562-945-7553 Ext. 123<br />
Email: <a href="mailto:[email protected]"><br />
</a><img src="images/email/MAbdelaatyEmail.gif" alt="" width="180" height="12" border="0" /></td>
<td align="left" valign="top"><img src="images/Yahia-Picture-SSB-1.jpg" alt="" width="90" height="65" /></td>
<td valign="top"><strong>Dr. Yahia Abdul-Rahman<br />
Chairman of the Board

/ Chief Executive Officer</strong><br />
562-945-7553 Ext. 120<br />
Private 626-255-2181<br />
Email: <a href="mailto:[email protected]"><br />
</a><img src="images/email/YarahmanEmail.gif" alt="" width="170" height="12" border="0" /></td>



</tr>



</table>















<table width="540" border="0" align="right" cellpadding="2" cellspacing="2">
<tr >
<td colspan="4"><span class="secondary-header"><br />
Texas:</span><br />
<img src="images/light-gray.gif" alt="" width="100%" height="1" /><br />
<p></p></td>
</tr>






<tr>
<td align="left" valign="top"><img src="images/DanielHall.jpg" alt="" width="90" height="65" /></td>
<td valign="top"><strong>Daniel Hall<br />
Business Development </strong><br />
469-330-9900 Ext. 212<br />
Email: <br />
<img src="images/email/dhallemail.GIF" alt="" width="180" height="16" border="0" /></td>
<td align="left" valign="top"><img src="images/ebagby.jpg" alt="" width="90" height="65" /></td>
<td valign="top"><strong>Erika Bagby<br />
Business Services</strong><br />
469-330-9900<br />
</td>
</tr>

<tr>

<td align="left" valign="top"><img src="images/SabeenSyed.jpg" alt="" width="90" height="65" /></td>
<td valign="top"><strong>Sabeen Syed<br />
Business Services</strong><br />
469-330-9900<br />
</td>
<td align="left" valign="top"><img src="images/AliElSehety.jpg" alt="" width="90" height="65" /></td>
<td valign="top"><strong>Ali El Sehety<br />
Business Services</strong><br />
469-330-9900<br />
</td>

</tr>




<tr>

<td align="left" valign="top"><img src="images/AylaAhmed.jpg" alt="" width="90" height="65" /></td>
<td valign="top"><strong>Ayla Ahmed<br />
Business Services</strong><br />
469-330-9900<br />
</td>
<td align="left" valign="top"><img src="images/DanyalAhmed.jpg" alt="" width="90" height="65" /></td>
<td valign="top"><strong>Danyal Ahmed<br />
Business Services</strong><br />
469-330-9900<br />
</td>

</tr>



<tr>
<td align="left" valign="top"><img src="images/MikeAbdel.jpg" alt="" width="90" height="65" /></td>
<td valign="top"><strong>Mike Abdelaaty<br />
Chief Credit Officer</strong><br />
562-945-7553 Ext. 123<br />
Email: <a href="mailto:[email protected]"><br />
</a><img src="images/email/MAbdelaatyEmail.gif" alt="" width="180" height="12" border="0" /></td>
<td width="102" align="left" valign="top"><p align="center"><img src="images/mohammed-elbeliedy.jpg" alt="" width="90" height="65" /></p></td>
<td width="177" valign="top"><strong>Mohamed Elbeleidy<br />
Senior Vice President </strong><br />
562-945-7553 Ext.&nbsp; 117<br />
Email: <img src="images/email/melbeleidyEmail.gif" alt="" width="174" height="12" border="0" /></td>



</tr>


<tr>


<td align="left" valign="top"><img src="images/Yahia-Picture-SSB-1.jpg" alt="" width="90" height="65" /></td>
<td valign="top"><strong>Dr. Yahia Abdul-Rahman<br />
Chairman of the Board

/ Chief Executive Officer</strong><br />
562-945-7553 Ext. 120<br />
Private 626-255-2181<br />
Email: <a href="mailto:[email protected]"><br />
</a><img src="images/email/YarahmanEmail.gif" alt="" width="170" height="12" border="0" /></td>
</tr>



</table>















</table>







</div>
</div>
<div id="right">
 
PixelPusher

PixelPusher

Super Moderator
Staff member
Yes as others have said, ditch the tables. To steer you in the right direction, you will want to use a two-column layout. It will consist of two divs that float next to each other. I would recommend using another div to contain the info (text and photo) for each person.

Try starting with something like this:
HTML: 
<div class="two-col">
   <div class="col">
      <div class="bio">
         <img src="janeDoe.jpg" alt="Jane Doe, CEO" />
         <h3>Jane Doe</h3>
         <ul>
            <li>(555) 234-6789 x906</li>
            <li>Email: [email protected]</li>
         </ul>
      </div>
      /* Then add sequential bios for each person */
   </div>
   <div class="col">
      <div class="bio">
         <img src="tomSmith.jpg" alt="Tom Smith, VP" />
         <h3>Tom Smith</h3>
         <ul>
            <li>(555) 234-6789 x934</li>
            <li>Email: [email protected]</li>
         </ul>
      </div>
   /* Then add sequential bios for each person */
   </div>
</div>

CSS
Code: 
div.two-col {
overflow:hidden;
}
div.col {
float:left;
padding-right:15px;
}
div.col:first-child {
padding-right:0;
padding-left:15px;
}
div.bio img {
float:left;
margin:0 10px 10px 0;
border:solid 1px #ddd;
}
div.bio h3 {
font-size:14px;
margin-bottom:5px;
}
div.bio ul {
list-style:none;
margin:0;
padding:0;
}
div.bio li {
line-height:16px;
}
 
A

AlvinAquiler

New Member
Well, you are not the only one who is amazed of programming and web design.. You should search for a site which offers help..
 
You must log in or register to reply here.
Top