HTML - Spacing Between Tables
Hey,
How can I get rid of the space in between these 2 tables (see image), I don't know whether it's spacing or padding or something else. I've tried a few things but they didn't work. Any suggestions? Similar Tutorialshi guys, how do i move certain things left or right using tables and cell spacing. this is the code im using so far but i cant see how i can position these components left or right horizontally. - <style type="text/css"> ul { margin: 10px; padding:70px 0px; list-style-type:none; text-align:right; } ul li { display: inline; margin:20 20px; } ul a { padding:4px 10px; font-family:'trebuchet ms',sans-serif; font-size:12px; color:#000; text-decoration:none; } ul a:hover { border-color:#000; color:#fff; background-color:#c6c5c4; } </style> thanks I am working on a site, and want to make 3 tables (one on top of another). Here is an image depicting what I want to do: Layout. I made the layout without 3 tables, just one, and it works fine. Here it is: 1 Table. But when I make three tables, like the picture shows, it messes all the spacing up. 3 Tables. I am doing all of this because I want to make a form and to make a form all of the fields need to be in one table. Here is how far I got with the form: 3 Tables and Form. Any help would be greatly appreciated. Thanks, Matt **Also, the site looks better in firefox than IE, so view it in IE to see the real problems. I hand coded my website myself, but whilst working perfectly in IE, there are some problems when viewing it using Firefox. Specifically, the table rows have double-spacings (scroll down to the 'Education' section he www.lombrozo.co.uk/resume.html), and also table borders have a 3D look (a black border to emphasise the shadow), again, this shadow is not visible in IE... Any ideas anyone? Any help would be most appreciated! Hi Normally, when you have more than one table in your code, the tables will be placed one under each other. Example: <table> ... </table> <table> ... </table> When you want the tables to be placed next to each other, you need to set the align attribute. Example: <table align="left"> ... </table> <table align="left"> ... </table> BUT: When you do it like in the 2nd example (tables next to each other), in Firefox, the tables will wrap to a new line if there is no more space. In Internet Explorer, the tables will not wrap. The result is a horizontal scrollbar or "hidden tables". Why this? How can I make the tables wrap also in Internet Explorer as it does in Firefox? Is it possible with a special CSS definition or with a special DIV/SPAN tag? Thanks for your help praiser Hey everyone, I'm new to these boards. Somewhat a newbie at web design, but I know basics. I'm looking to put 2 tables adjacent to each other inside another table. My problem is I can't get the tables to line up the way I want them to. I'll post a picture of how I want it to look, how it looks now and my code. How I want it to look: How it looks now: I want the tables to line up at the top and re-size according to each other so they're always aligned at the top. Code: coming in next 2 posts Hey folks... I've searched and searched for an answer for this, but with no luck. Probably because I don't know how to exactly describe my problem. Anyway, the issue is my page is displaying differently in IE and Firefox (surprise!). The spacing between the top image and the body divs are different. I'm not sure if it's an HTML issue or a CSS one. The page in question is: http://www.project-43.com/ The CSS file is he http://project-43.com/images/style.css It displays the way I want it too in Firefox. If you look at it in IE, you'll see the top image looks short, but that is because the spacing between the left menu area and the body on the right is too big. I appreciate any pointers that you might be able to offer. Thanks! Hello Everyone: I am a novice HTML user - I use it to create a Help file (for an MS/Access database), using HTML Help Workshop. My question concerns line spacing, using the following code: <b><u>Server:</u></b> <ul> <li>First List item...</li> </ul> Using this code, there will be a blank line between "Server" and "First List item...". Is it possible to eliminate this line and have the list start in the next line after "Server"? Thanks. . . Tony N. Ok so I'm learning along the way by playing around with what my web designer started. I'm having trouble working out what part of the html does the spacing between my text and the input box. Here's what I'm stuck at: You can see how where it says 'click for more fonts' the box isn't in line with the others. Any help would be much appreciated.... I'm starting to go cross-eyed lol. Alright i'm having a little trouble. When I add stuff to the side boxes, they are farther down then i want them to be, here is a pic: I'm wanting to move it up some, but I don't know how, I have been trying for a long time though. Here is the HTML Code: Code: <div class="box2 margin1"> <div class="tail-right"> <div class="corner-right-bottom"> <div class="corner-left-bottom"> <div class="corner-right-top"> <div class="corner-left-top"> <div class="indent"> <h3><span><span>Partners</span></span></h3> <div class="indent2"> <center><a href="http://www.elitepvpers.de"><img src="http://img230.imageshack.us/img230/2364/31421454.png" border="0"></a></center> <center><a href="http://www.4botters.com"><img src="http://img814.imageshack.us/img814/2599/88029646.png" border="0"></a></center> <div id="vent"><div style="font-weight: bold; font-size: 12px; text-align: center;"><a href="ventrilo://94.75.238.76:4696/servername=EQGVent" style="text-decoration: none;"></a></div></div> </div> </div> </div> </div> </div> </div> </div> </div> Here is the CSS: Code: .box2 {background:#bec2c5 url(images/box2-bottom-tail.gif) bottom repeat-x;} .box2 .tail-right {background:url(images/box2-right-tail.gif) right repeat-y;} .box2 .corner-right-bottom {background:url(images/box2-corner-right-bottom.gif) right bottom no-repeat;} .box2 .corner-left-bottom {background:url(images/box2-corner-left-bottom.gif) left bottom no-repeat;} .box2 .corner-right-top {background:url(images/box2-corner-right-top.gif) right top no-repeat;} .box2 .corner-left-top {background:url(images/box2-corner-left-top.gif) left top no-repeat; width:100%;} .box2 .indent {padding:4px 6px 6px 4px;} .box2 .indent2 {padding:15px 12px 0px 6px;} Any help will be greatly appreciated. Thank you. Hello, I have a table text spacing problem. I'm trying to have two text elements (p's, spans's, whatever) stacked vertically or as close as possible underneath one of other. I cannot for the life of me remove the gap in between. I've tried margins, padding, cellpadding/cellspacing, border-collapse, and still, nothing works. I've attached an example using primitive HTML. Anyone have any ideas? The code: Code: <table width="650" border="0" cellspacing="0" cellpadding="0"> <tr> <td>TEXT</td> </tr> <tr> <td>TEXT2</td> </tr> </table> Thanks! Edit: Line-height did the trick. Alright, so am finally trying to learn PHP...but I am using <?php include('header.html'); ?> For the header/footer...and it seems as if the problem is via html instead of the php...so I hope this posted in the right area... The code for the header is this (as you can see I sliced in Imageready): Code: <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" bottommargin="0" marginwidth="0" marginheight="0"> <!-- ImageReady Slices (mkdc4header.psd) --> <table id="HeaderTable" width="920" height="84" border="0" cellpadding="0" cellspacing="0" style="padding-left:3px; padding-bottom:0px"> <tr> <td rowspan="4"> <img src="http://www.webmaster-talk.com/images/header_01.gif" width="70" height="84" alt=""></td> <td rowspan="2"> <img src="http://www.webmaster-talk.com/images/header_02.gif" width="135" height="43" alt=""></td> <td colspan="7"> <img src="http://www.webmaster-talk.com/images/header_03.gif" width="639" height="32" alt=""></td> <td rowspan="4"> <img src="http://www.webmaster-talk.com/images/header_04.gif" width="76" height="84" alt=""></td> </tr> <tr> <td> <a href="/index.php"><img src="http://www.webmaster-talk.com/images/header_05.gif" alt="" width="87" height="11" border="0"></a></td> <td> <a href="#"><img src="http://www.webmaster-talk.com/images/header_06.gif" alt="" width="74" height="11" border="0"></a></td> <td> <a href="http://www.moizkhan.com/blog"><img src="http://www.webmaster-talk.com/images/header_07.gif" alt="" width="80" height="11" border="0"></a></td> <td> <img src="http://www.webmaster-talk.com/images/header_08.gif" alt="" width="121" height="11" border="0"></td> <td> <a href="#"><img src="http://www.webmaster-talk.com/images/header_09.gif" alt="" width="87" height="11" border="0"></a></td> <td> <a href="#"><img src="http://www.webmaster-talk.com/images/header_10.gif" alt="" width="85" height="11" border="0"></a></td> <td> <img src="http://www.webmaster-talk.com/images/header_11.gif" width="105" height="11" alt=""></td> </tr> <tr> <td colspan="8"> <img src="http://www.webmaster-talk.com/images/header_12.gif" width="774" height="25" alt=""></td> </tr> <tr> <td colspan="8"> <img src="http://www.webmaster-talk.com/images/header_13.gif" width="774" height="16" alt=""></td> </tr> </table> The problem only exists in IE7 (haven't checked IE6...but I have checked in Firefox and Opera and they seem fine...so any ideas? Live Demo: http://www.moizkhan.com/mkdc4php/ I've got a scanned in document that has been processed by OCR - Omnipage - and saved as html. The paragraphs often list five or six items. Most of the paragraphs are single space but some are double spaced. In the original all are single spaced. I would like them all to be single spaced. The code seems very complicated with 'spans' and 'divs' and 'box' and 'style' and long lists of parameters repeated frequently. Too frequently I imagine, machine generated stuff, but I'm not an html coder. The point is I couldn't figure out for the life of me what it was that caused one para to be double spaced and another to be single spaced. Here's a sample of the code that causes double spacing (hope its okay to put snippets of code in these posts, moderator? ) <p><span style="font-family: Tahoma,sans-serif; font-style: normal; font-weight: normal; font-size: 15pt; letter-spacing: 0.3pt;">* To be informed of, and involved in, Centre Management and practices;</span></p> <p><span style="font-family: Tahoma,sans-serif; font-style: normal; font-weight: normal; font-size: 15pt; letter-spacing: 0.3pt;">* To have accessibility to information about the Centre through written policies and programs; and </span></p> <p><span style="font-family: Tahoma,sans-serif; font-style: normal; font-weight: normal; font-size: 15pt; letter-spacing: 0.3pt;">* To be provided with support and assistance in the parenting role. </span></p> <p style="margin: 4.8px 0px 9.6px 9.6px; background-color: rgb(255, 255, 255); text-align: left; text-indent: 0px; line-height: normal;"> </p> </div> <div class="Box" style="border: 0pt none rgb(255, 255, 255); background-color: rgb(255, 255, 255); width: 549.65pt; left: 99.15pt; top: 1107px; height: 192px;"> <p What I'm planning to do now is copy the whole section and paste to notepad to get rid of all html and then pick it up again and put it back into html. I've tried NVU, Frontpage and Dreamweaver and I can't find a way in any of them to simply strip out all the crap and - obviously - I can't find a way to strip out this double spacing thing. regards, ab Just learning this stuff. I am having trouble controlling space between lines. My HTML coding is resulting in too much space between lines. I am afraid I have no idea how to control spacing. I have fiddled with different coding. Here is the current version: <td class="headerbg" colspan="2" width="600"> <div align="left"><p style="font-family:verdana; color:00bfff; font-size:30px;" >the amazing alexander technique </p><p style="font-family:verdana; color:00bfff; font-size:20px;" >so much more than 'posture' and pain relief </p> </div> </td> Thanks for any help. Pointing me to resource where I can read the solution would be great. Hi there. I am upkeeping a website in wordpess and one of the posts has links which always appear to be double-spaced. I want them to be single-spaced. I have tried changing around the html coding and such but it has not changed the spacing. I don't know much about html so my attempts have been experimentational. The html tags in there are ul, li and a href=. I've tried taking each out to no avail. What should I do? Thank you very much for your help. I am a flash developer and our client wants this site to be built using mainly html, I am pretty good with html but not even close to an expert. I have built a site with Flash vertical and horizontal nav bars above and beside my html content. In Firefox and Safari the site looks perfect, however in IE6 & IE7 there is about a 5 pixel gap between my vertical menu bar and the rest of my content. I have tried everything I know to correct this problem... Any Ideas? They would be greatly appreciated.... Site Link http://www.sacreative.com/education I am having 2 issues with html coding, First off here ****HIT MUTE OR TURN VOLUME DOWN BEFORE CLICKING**** MY tables are too close together and i can not figure out how to space them out. Secondly on the first table (the hockey playoff bracket) I want to center the text but when i try to use the only align=center(or something like that i have it used in the table below) it clears out the next cell, removing the bracket. Can you help me fix these 2 issues please. Thank You tech-chef Here's a screenshot of what it's doing: I want to eliminate the spacing all together so my Flash element can sit exactly within the div. If there's a better way of positioning the Flash please tell me! So, I am working on a website for the final project for one of my classes, and while it looks fine in Firefox and Safari, there is some funky spacing in my divs/table set up with my inline frame in IE: (I have IE 7, but I would like this to work in all versions as I'm not sure what browser my professor has) http://grandmas.host-ed.net/ in IE, you will see there is a space below the top banner and another one between the footer and the border... how can I get rid of these? Here is my code (image map removed b/c it's long and unneeded for my question) Code: <html> <head> <title>Grandma Mae's Country Naturals</title> </head> <body background="bg.jpg" bgproperties="fixed"> <center> <table Cellpadding="0" Cellspacing="0" border="0"> <tr><td> <div style="border: solid 0 #a34c30; border-left-width:3px; border-right-width:3px; border-top-width:3px; padding-left:0ex padding-right:0ex padding-top:0ex padding-bottom:0ex"> <img src="gcn_nav2.jpg" usemap="#mymap" border="0"> </div></td></tr> <tr><td> <div style="border: solid 0 #a34c30; border-left-width:3px; border-right-width:3px; padding-left:0ex padding-right:0ex padding-top:0ex padding-bottom:0ex"> <IFRAME name="inlineframe" src="home.html" width=854 height=350 frameborder="0"></IFRAME> </div></td></tr> <tr><td> <div style="border: solid 0 #a34c30; border-left-width:3px; border-right-width:3px; border-bottom-width:3px; padding-left:0ex padding-right:0ex padding-bottom:0ex padding-top:0ex"> <img src="footer2.jpg"> </div> </td></tr></table> <font color="FFCC99" size="1" face="Georgia, Times New Roman, Times, serif"><b>This site is not affiliated with Grandma Mae's County Naturals</b></font> </center> </map> </body> </html> It's kind of improvised and I am no html expert so perhaps there is a better way to get the look I was going for? Also, I know there is some extra/unneeded code there, but it's all stuff I added when trying to fix the spacing (and it didn't work) and was too lazy to take away. haha Thanks a ton, Nathalie hey...hope i can sort this out quickly its only a small problem.. but if you look here ... http://anastaciadreams.com/layouttest/test.html youll notice on Internet explorer theres a space in the 2 parts of the banner area, how do i remove this? I am really new to learning html and I have just set up a form using formmail.pl. It works great but if the customer enters a carriage return it doesn't show up on my results. For example, if someone types this: Line1 Line2 I get it as Line1Line2. I'd like to be able to program it so I get it as it was originally posted. Here is my code: <form action="cgi-sys/formmail.pl" method="post"><input name="recipient"value="drmarie@askavetquestion.com" type ="hidden" enctype="text/plain"><font face="Arial"> Your first name: <input type="text" name="owner name" size="30" /> <br /> <br /> Pet's name: </font> <font face="Arial"><input type="text" name="name" size="30" /><br /> <br /> Your email address: (you will be sent an email with a link directing you to your answer)<br /> <input name="email" size="20" value=""type="text"/><br /><br /> How old is your pet?</font> <select name="age"> <option>Less than 3 months</option> <option>3-6 months</option> <option>6-12 months</option> <option>1-2 years</option> <option>2-5 years</option> <option>5-8 years</option> <option>8-11 years</option> <option>11-15 years</option> <option>More than 15 years</option></select><font face="Arial"><br /> <br /> What breed is your pet?<br /> </font><font face="Arial"><input type="text" breed="Breed" size="30" /><br /> <br /><br /> What is your question about your pet? <br /> </font> <textarea name="question" rows="25" cols="80"></textarea><br /> <font face="Arial"><br /> </font><font face="Arial"><input type="submit" value="Send Question" /><input type="reset" /></font></form> Thanks so much! Marie |