The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> Why do I get blank space between two tables?
headbanger
post Aug 17 2019, 09:41 PM
Post #1





Group: Members
Posts: 7
Joined: 17-August 19
Member No.: 26,962
Hello,

I am new to HTML and this board. Most likely this is straight forward issue but I cannot figure out what I do wrong. Here is the code.

HTML
------
<!DOCTYPE html>
<html lang="en">
<head>
<title>Box & Arrows</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="box&arrows.css">
</head>
<div class="main">
<table class="arrow">
<tr>
<td style="width:400px;height:22px;"><img src="arrow_up_22.png"></td>
</tr>
</table>
<table class="arrow">
<tr>
<td style="width:22px;height:352px;"><img src="arrow_left_22.png"></td>
</tr>
</table>
<table class="box">
<tr>
<td style="width:352px;height:352px;">Text goes here...</td>
</tr>
</table>
<table class="arrow">
<tr>
<td style="width:22px;height:352px;"><img src="arrow_right_22.png"></td>
</tr>
</table>
<table class="arrow">
<tr>
<td style="width:400px;height:22px;"><img src="arrow_down_22.png"></td>
</tr>
</table>
</div>
</html>

CSS
----
* {
margin: 0 auto;
padding: 0;
}
div.main {
width: 400px;
}
table.arrow {
display: inline;
float: left;
border-collapse: separate;
border-spacing: 0;
border: 0;
margin: 0;
text-align: center;
}
table.box {
display: block;
float: left;
border-collapse: separate;
border-spacing: 0;
border: 2px solid black;
font: 13px/1.2 Arial, Helvetica, sans-serif;
margin: 0;
}
table.box td {
text-align: center;
}

Running this code displays left, right and down arrows touching the box table border but the top one has blanks in between. I searched internet tried things I found but still cannot make up arrow to touch the box table border. The arrow image is the same I just used paint application to rotate it and create all 4 arrows. Please let me know what I do wrong and if you can show me the code which works.

Thanks.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
 
 Reply to this topicStart new topic
Replies
Dhruva
post Nov 4 2019, 02:24 PM
Post #2


Newbie
*

Group: Members
Posts: 11
Joined: 4-November 19
Member No.: 27,032
QUOTE(headbanger @ Aug 18 2019, 08:11 AM) *

Hello,

I am new to HTML and this board. Most likely this is straight forward issue but I cannot figure out what I do wrong. Here is the code.

HTML
------
<!DOCTYPE html>
<html lang="en">
<head>
<title>Box & Arrows</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="box&arrows.css">
</head>
<div class="main">
<table class="arrow">
<tr>
<td style="width:400px;height:22px;"><img src="arrow_up_22.png"></td>
</tr>
</table>
<table class="arrow">
<tr>
<td style="width:22px;height:352px;"><img src="arrow_left_22.png"></td>
</tr>
</table>
<table class="box">
<tr>
<td style="width:352px;height:352px;">Text goes here...</td>
</tr>
</table>
<table class="arrow">
<tr>
<td style="width:22px;height:352px;"><img src="arrow_right_22.png"></td>
</tr>
</table>
<table class="arrow">
<tr>
<td style="width:400px;height:22px;"><img src="arrow_down_22.png"></td>
</tr>
</table>
</div>
</html>

CSS
----
* {
margin: 0 auto;
padding: 0;
}
div.main {
width: 400px;
}
table.arrow {
display: inline;
float: left;
border-collapse: separate;
border-spacing: 0;
border: 0;
margin: 0;
text-align: center;
}
table.box {
display: block;
float: left;
border-collapse: separate;
border-spacing: 0;
border: 2px solid black;
font: 13px/1.2 Arial, Helvetica, sans-serif;
margin: 0;
}
table.box td {
text-align: center;
}

Running this code displays left, right and down arrows touching the box table border but the top one has blanks in between. I searched internet tried things I found but still cannot make up arrow to touch the box table border. The arrow image is the same I just used paint application to rotate it and create all 4 arrows. Please let me know what I do wrong and if you can show me the code which works.

Thanks.



hey cool! In CSS file at table.arrow tag just add an extra element as {line-height:0;} make sure to make 0 so that the mentioned top image will be toched to the border without an single px gap. THANK YOU.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Posts in this topic
headbanger   Why do I get blank space between two tables?   Aug 17 2019, 09:41 PM
pandy   Running this code displays left, right and down a...   Aug 17 2019, 10:30 PM
headbanger   Hi, Sorry but I don't know how to paste the i...   Aug 18 2019, 07:50 AM
pandy   No, I saw the broken image icons in the same spots...   Aug 18 2019, 12:29 PM
headbanger   Hi, Thanks Pandy. Here is the image.   Aug 18 2019, 04:26 PM
pandy   Do you really see that with exactly the same code ...   Aug 18 2019, 05:46 PM
headbanger   Hi, Yes, I'm using Microsoft Edge browser and...   Aug 18 2019, 07:17 PM
pandy   Edge, without borders.   Aug 18 2019, 08:19 PM
headbanger   Hi, Don't understand why you don't see it...   Aug 18 2019, 08:58 PM
pandy   I'll be... With the images it looks as you sai...   Aug 18 2019, 10:49 PM
headbanger   Hi, Thanks for the explanation. Now, I understand...   Aug 19 2019, 09:38 AM
pandy   If the two tables you want to have really are data...   Aug 19 2019, 12:52 PM
headbanger   Great. Thank you Pandy for your help.   Aug 19 2019, 10:19 PM
Dhruva   Hello, I am new to HTML and this board. Most lik...   Nov 4 2019, 02:24 PM

« Next Oldest · Markup (HTML, XHTML, XML) · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Switch to: Standard · Switch to: Linear+ · Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 19th April 2024 - 05:28 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC