Mon, 2014-09-15 23:50
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!" 
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>
Tue, 2014-09-16 00:07
#1
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.
Tue, 2014-09-16 00:16
#2
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
Tue, 2014-09-16 00:30
#3
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.
Tue, 2014-09-16 00:36
#4
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.
Tue, 2014-09-16 00:44
#5
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.
Wed, 2014-09-17 21:49
#6
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 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