0

I'm almost done with my website but whitespace dispositions my elements from page to another page.

Please click here

The whitespace below Cross-border Airtime Transfer is thicker than

this page here

I tried minimizing the whitespace with the latter but none of them worked.

Here is my code for comgtech.com/products1_1.php

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" charset="utf-8;" content="text/html" />

     <title>CTI | CORE PLATFORMS</title>

<link rel="stylesheet" type="text/css" href="styles.css" />

</head>

<body>
           <div >
        <?php include 'header.html' ?>

        <div style="text-align: center">
            <img src="images/cbat.jpg" style="width: 800px;" />

            <div style="width: 800px; margin:0 auto;" >
                <p style="margin-top: 0;">
                    <span style="float:left;" >
                        <img src="images/core-platforms.jpg" style="margin-right: 20px;"  />
                    </span>
                    <span style="float: right; " ><p style="text-align:left; font-size:13px; color:#333333" >
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te f eugait nulla facilisi. <br /><br />&#x2022; Cti.Loadwallet<br />&#x2022; Cti.MAS (Mobile Acquiring System)<br />&#x2022; Cti.Remit<br />&#x2022; Cti.SMS (Short Message Service)
                    </span>
            </p>

            </div> <br /><br />
            <div style="width: 800px; margin:0 auto; font-weight:bold; text-align: left;">
                               <a href="products1_1.php"  class="back-more"><font color="#00b1ef">&#60;back</font></a> 
                               <!--&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                   <a href="products1_3.php"  class="back-more">know more&#62;</a>-->
                    </div>

        </div>


        </div>



               <?php include 'footer.html' ?>    
          </div>
</body>
</html>
Lanorkin
  • 7,310
  • 2
  • 42
  • 60
yakults
  • 55
  • 1
  • 2
  • 7
  • Maybe this will help http://stackoverflow.com/questions/5721966/webkit-margin-adds-unwanted-margin-on-texts. With Chrome at least you can see this applied to the `

    ` containing your text.

     – Jasen Jul 10 '13 at 02:11

1 Answers1

0

The problem lies within the HTML tags that follow the "Cross-border Airtime Transfer" image.

In page #2, after the there is a element, while in page #2 there is a element.

A table's display is a table, but a div's display is a block.

One of the properties of a block element is that it creates a line break before and after it.

Read more here

To fix it, give the div a negative top margin CSS property: margin-top: -13px;

After doing so, I've noticed the footer is a little higher than before, so if you want to lower it, give the same div a height of 251px.

Cheers :)

assembly_wizard
  • 2,034
  • 1
  • 17
  • 10
  • I set the height of div of http://comgtech.com/products1_1.php and the footer goes up, distorted. :( – yakults Jul 10 '13 at 02:32