6 replies [Last post]
expertalmost
expertalmost's picture
Offline
newbie
Last seen: 5 years 18 weeks ago
Timezone: GMT-5
Joined: 2011-11-27
Posts: 7
Points: 11

I have an inexplicable gap between a top image and a generated table on my webpage (www.tradecaptaincoaching.com). The table was generated by http://www.tablesgenerator.com/html_tables#. After spending the whole day on it, I got the image and the table okay except for the huge 200 pixel gap which is driving me crazy.

I've inspected the page in Chrome and can't see anything strange. Of course, I'm so green that I'm still using tables and have to look up the spelling for "CSS!" Wink

The code is below. Its on a vanilla Drupal Fusion Starter Basic Page. Forgive my bad coding methods. I'm still learning.

Any assistance and learning would be most appreciated!

Thank you everyone.

    <img style="padding-top: 20px" alt="Trade Captain Coaching Image" src="/images/LandingImageText.png" style="height:400px; width:960px" usemap="#menumap" />
    <map name="menumap">
      <area shape="rect" coords="590,20,650,45" href="http://tradecaptaincoaching.com" alt="Home Page">
      <area shape="rect" coords="675,20,735,45" href="http://tradecaptaincoaching.com/about" alt="About Page">
      <area shape="rect" coords="760,20,830,45" href="http://tradecaptaincoaching.com/contact" alt="Contact Page">
      <area shape="rect" coords="855,20,935,45" href="http://tradecaptaincoaching.com/services" alt="Services Page">
    </map>
    <style type="text/css">
    .tg  {border-collapse:separate;border-spacing:0;margin:0px auto;}
    .tg td{font-family:Arial, sans-serif;font-size:14px;border-style:none;overflow:hidden;word-break:normal;}
    .tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:5px 20px;border-style:none;overflow:hidden;word-break:normal;}
    .tg .tg-cfld{font-size:13px;font-family:Verdana, Geneva, sans-serif !important;;color:#000064; padding:5px 20px;}
    .tg .tg-e9q7{font-weight:bold;font-size:14px;font-family:Verdana, Geneva, sans-serif !important;;background-color:rgb(116,196,218);color:#000064;line-height: 30px; padding: 0px 0px 0px 20px;}
    .tg .tg-031e{vertical-align:top;line-height: 20px; padding:5px 0px 23px 0px}
    </style>
    <table class="tg" style="undefined;table-layout: fixed; width: 960px">
    <colgroup>
    <col style="width: 320px">
    <col style="width: 320px">
    <col style="width: 320px">
    </colgroup>
      <tr>
        <th class="tg-e9q7">Choose Your Course</th>
        <th class="tg-e9q7">Your Promotion</th>
        <th class="tg-e9q7">Your Program</th>
      </tr>
      <tr>
        <td class="tg-cfld">Text Here. </td>
        <td class="tg-cfld">Text Here. </td>
        <td class="tg-cfld">Text Here. </td>
      </tr>
     <tr>
        <td class="tg-031e" rowspan="4"><img src="/images/NoGold.png" style="height:300px; width:320px" /></td>
        <td class="tg-031e"></td>
        <td class="tg-031e"><img style="margin:0px auto;display:block" src="/images/ContactUs.png" style="height:30px; width:147px" /></td>
      </tr>
      <tr>
        <td class="tg-e9q7" colspan="2">Your First Trade Here is FREE</td>
      </tr>
      <tr>
        <td class="tg-cfld" colspan="2">Text Here. <br><br><br><br><br><br><br></td>
      </tr>
      <tr>
        <td class="tg-031e"></td>
        <td class="tg-031e"></td>
      </tr>
    </table>
 

tcloud
tcloud's picture
Offline
Regular
Last seen: 5 years 37 weeks ago
Timezone: GMT-5
Joined: 2011-11-16
Posts: 12
Points: 19

I'm working on my own problem

I'm working on my own problem and am no expert, but you have a "p" element around the image with a line-height of 150% and there "br" tags in the image code which will also have the line-height property.

On my screen, there is 167px between the image and the table. Using firebug I deleted the p-/p tag and removed the br tags preceding the map tags. There is now only a 64px gap between the image and the table.

expertalmost
expertalmost's picture
Offline
newbie
Last seen: 5 years 18 weeks ago
Timezone: GMT-5
Joined: 2011-11-27
Posts: 7
Points: 11

Wow! I see the P marker and a

Wow! I see the P marker and a but I have no idea how they get there. I do not have them in my code. I don't see the 150% line height item. But then, if it were Godzilla I would still have a hard time finding it. First month in doing this... So looking at my code, how would I fix it?

Thank you for your time and efforts

tcloud
tcloud's picture
Offline
Regular
Last seen: 5 years 37 weeks ago
Timezone: GMT-5
Joined: 2011-11-16
Posts: 12
Points: 19

the mean answer? -- use

the mean answer? -- use something besides Drupal (just kidding). I'm not the person who should be helping you, but I'll bet Drupal is helping you by supplying the additional tags.

You can target the p and br tags inside that particular element via CSS and set the line-height to some small number and you can set br to display:none

Maybe something like (in your CSS)

map#menumap br { display:none; line-height:0; }

I don't see any id or class surrounding just the image and map, so I don't know how to target it. Maybe you can add a div or span element with a class or id and you can use it to set the line-height to zero or something small.

tcloud
tcloud's picture
Offline
Regular
Last seen: 5 years 37 weeks ago
Timezone: GMT-5
Joined: 2011-11-16
Posts: 12
Points: 19

I believe the 150% line

I believe the 150% line height is in:
http://www.tradecaptaincoaching.com/sites/all/themes/fusion/fusion_core/css/fusion-typography.css

body {
  font-family: Arial, Helvetica, Verdana, "Bitstream Vera Sans", sans-serif;     /* web safe fonts */
  font-size: 81.25%;   /* also set in fusion_core.info: settings[theme_font_size] = font-size-13 */
  line-height: 150%;   /* 1.5x vertical rhythm */
}

... but changing it will affect everything else that uses that definition.

tcloud
tcloud's picture
Offline
Regular
Last seen: 5 years 37 weeks ago
Timezone: GMT-5
Joined: 2011-11-16
Posts: 12
Points: 19

suggestion

You don't appear to be to far along on your site. May I suggest you check out the genesis framework by studiopress.com. It works on WordPress and many of their templates are responsive (i.e. they can be easily viewed on a tablet or smart phone). Examples of sites I've done using genesis framework are http://cloud-assn.org/ , http://leonyodercustombuilder.com/ , http://mykindred.com/dalton/hoax/ (this is a genesis template converted to HTML so it's not WordPress). All of those are responsive.

expertalmost
expertalmost's picture
Offline
newbie
Last seen: 5 years 18 weeks ago
Timezone: GMT-5
Joined: 2011-11-27
Posts: 7
Points: 11

Last Solution

Thank you everyone for your help and insight. I finally solved it by removing all line breaks in my code. Which makes the code virtually unreadable. But then, CSS is virtually unreadable to me anyway. So what goes around comes around Wink There is still a small break between my top image and table which remains a mystery. But I have an eight hour limit on any one CSS problem and this has well exceeded.

Once again, thanks to all you saints! CA