Why the white margin?

Hi,

Can anybody spot why there is a white margin (in IE) on this website?

www.emigratingservices.com

Thanks
Notting

 

Can you describe where you see the white margin? I checked it in IE 6 and it looked fine.

 

Here it is:



In IE7 and IE5 it does it. did not check ie6 so maybe not in ie6. it doesnt do it in FF either.

Need to get this sorted though as it is for a client

Thanks
Notting

 

Ok I've got an answer for you.

In your code where you have the header.jpg image, cut out the img tag and then directly above the tr tag where you have the menu1 menu22 etc create a new row using this code

<tr>
 <td colspan="7"><img src="http://www.emigratingservices.com/assets/images/header.jpg" width="800" height="110">
 </td>
</tr>

Code (markup):

That should fix it. Let me know!

Regards.

 

In your CSS try changing margin-bottom to 0px and see if there is any change, to me it looks like a cross browser CSS issue...

.content {
margin-top: 0px;
margin-left: 40px;
margin-right: 40px;
margin-bottom: 40px;
text-align: justify;
}


or THIS....try putting the header image in a seperate cell

      <table width="800" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td><img src="assets/images/header.jpg" width="800" height="110">
            <table width="800" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td><img src="assets/images/menu1.jpg" width="28" height="33"></td>
                <td><img src="assets/images/menu22.jpg" width="138" height="33"></td>
                <td><a href="destinations.php" onClick="return clickreturnvalue()" onMouseOut="MM_swapImgRestore(); delayhidemenu()" onMouseOver="MM_swapImage('destination','','assets/images/menu32.jpg',1); dropdownmenu(this, event, menu1, '137px')"><img src="assets/images/menu3.jpg" alt="Destinations" name="destination" width="138" height="33" border="0"></a></td>
                <td><a href="howitworks.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('howitworks','','assets/images/menu42.jpg',1)"><img src="assets/images/menu4.jpg" alt="How it Works" name="howitworks" width="139" height="33" border="0"></a></td>
                <td><a href="visatypes.php" onClick="return clickreturnvalue()" onMouseOut="MM_swapImgRestore(); delayhidemenu()" onMouseOver="MM_swapImage('Visa Types','','assets/images/menu52.jpg',1); dropdownmenu(this, event, menu2, '137px')"><img src="assets/images/menu5.jpg" alt="Visa Types" name="Visa Types" width="137" height="33" border="0"></a></td>
                <td><a href="contact.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Contactus','','assets/images/menu62.jpg',1)"><img src="assets/images/menu6.jpg" alt="Contact Us" name="Contactus" width="136" height="33" border="0"></a></td>
                <td><img src="assets/images/menu7.jpg" width="84" height="33"></td>
              </tr>
            </table>

HTML:

LIKE THIS! Take a look at the table structure for the header image.

      <table width="800" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td><img src="assets/images/header.jpg" width="800" height="110"></td>
        </tr>
        <tr>
           <td>
            <table width="800" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td><img src="assets/images/menu1.jpg" width="28" height="33"></td>
                <td><img src="assets/images/menu22.jpg" width="138" height="33"></td>
                <td><a href="destinations.php" onClick="return clickreturnvalue()" onMouseOut="MM_swapImgRestore(); delayhidemenu()" onMouseOver="MM_swapImage('destination','','assets/images/menu32.jpg',1); dropdownmenu(this, event, menu1, '137px')"><img src="assets/images/menu3.jpg" alt="Destinations" name="destination" width="138" height="33" border="0"></a></td>
                <td><a href="howitworks.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('howitworks','','assets/images/menu42.jpg',1)"><img src="assets/images/menu4.jpg" alt="How it Works" name="howitworks" width="139" height="33" border="0"></a></td>
                <td><a href="visatypes.php" onClick="return clickreturnvalue()" onMouseOut="MM_swapImgRestore(); delayhidemenu()" onMouseOver="MM_swapImage('Visa Types','','assets/images/menu52.jpg',1); dropdownmenu(this, event, menu2, '137px')"><img src="assets/images/menu5.jpg" alt="Visa Types" name="Visa Types" width="137" height="33" border="0"></a></td>
                <td><a href="contact.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Contactus','','assets/images/menu62.jpg',1)"><img src="assets/images/menu6.jpg" alt="Contact Us" name="Contactus" width="136" height="33" border="0"></a></td>
                <td><img src="assets/images/menu7.jpg" width="84" height="33"></td>
              </tr>
            </table>

HTML:

Hope this works

Best of luck

 

Sorted it.

The header wanted to be in a row of its own.

Also, I have finally managed to get the page to validate, but there is a new problem:

http://forums.digitalpoint.com/showthread.php?p=5214153#post5214153

just one thing to go!!

(rep given to all those who helped)

Thanks
Notting

 

On the table cell where you have the lone image, give the td an id and do something like

td#theID img { display:block; }

 

SOlved already soulscratch. Cheers