The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> 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
pandy
post Aug 17 2019, 10:30 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



QUOTE(headbanger @ Aug 18 2019, 04:41 AM) *

Running this code displays left, right and down arrows touching the box table border

Uhm, no, they don't.


QUOTE
but the top one has blanks in between.


No, it doesn't.

I don't know what you see, but I attach a screen cap of what I see (table borders made red so we can see them.


Do you want a box with text in the middle with images surrounding it? You don't need to put everything in a table for that. And when you change the display property of a table you make it something other than a table. So when you for instance make table.arrow display: inline, table properties like border-collapse and so on no longer apply.

One problem whatever way you do it is that you can't limit the space for text. Unless the text is very short and the box is very big. If you fill that box with text, what happens if someone uses a larger text size than you expect? Something gotta give...



Attached Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
headbanger
post Aug 18 2019, 07:50 AM
Post #3





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



Hi,

Sorry but I don't know how to paste the image of what I see. Tried to use Insert Image but I ended up with the URL to my laptop. Anyway, I believe the reason why you see it different is that you added 1 pixel border to arrow table, that causes the last (right arrow) to be moved on new line as division width has been exceeded. Please increase the width,

div.main {
width: 404px;
}

and you'll see what I see. My concern here is the arrow on top. I want it to touch the top border line of box table.

Thanks.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 18 2019, 12:29 PM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



No, I saw the broken image icons in the same spots before I added the border.

To add an image from your computer you do like this.

Look for a field below the one you write your post in. It's labeled File Attachments. There you find a Browse button. Use it to find your image on your HD. Then click the button to the right labeled Add This Attachment.

A new field appears below the Browse button where you see the file name of your image. Click Add into Post to add it to your post.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
headbanger
post Aug 18 2019, 04:26 PM
Post #5





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



Hi,

Thanks Pandy. Here is the image.

Attached Image

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 18 2019, 05:46 PM
Post #6


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Do you really see that with exactly the same code as you posted here? No more and no less?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
headbanger
post Aug 18 2019, 07:17 PM
Post #7





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



Hi,

Yes, I'm using Microsoft Edge browser and that is what I see with the code I posted.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 18 2019, 08:19 PM
Post #8


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Edge, without borders.


Attached thumbnail(s)
Attached Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
headbanger
post Aug 18 2019, 08:58 PM
Post #9





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



Hi,

Don't understand why you don't see it. Your display looks like you exceeded div width and images are pushed on the next line. I'm attaching arrow images download them if you can. I also run this on IE11 and got same problem.

Attached Image
Attached Image
Attached Image
Attached Image
Attached Image


Attached image(s)
Attached Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 18 2019, 10:49 PM
Post #10


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



I'll be... With the images it looks as you said. How can that be? Without the images the tables are all over the place. wacko.gif

Anyway, the gap is because image are inline elements, or text-level if you please. They "stand on the line", just as letters. If you instead of the image had a word there, say "sun", there needs to be a space below because you may want to also type letters like g, j, p, q or y that have descenders. If you type an x beside the image you can see that the bottom of the image and the bottom of the x line up. They both stand on the line.

Frankly, the easiest way to fix this is to position the image. Replace the table with the below. I write the CSS inline for simplicity's sake. That doesn't mean you should. happy.gif

HTML
<div class="arrow" style="width:400px; height: 22px; text-align: center; position: relative"><img src="arrow_up_22.png" style="position: absolute; bottom: 0"></div>


You really should get rid of the other tables too. The display: inline doesn't do anything useful either, that I can notice.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
headbanger
post Aug 19 2019, 09:38 AM
Post #11





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



Hi,

Thanks for the explanation. Now, I understand what the problem is. I modified the code and it is displayed the way I wanted.

I don't have much HTML experience and my real goal is to have two tables with few columns and rows placed one by the other on the same line. I want to connect them by the arrows. Searching HTML I found that I have to use "display: inline; float: left;" table property to do that... This meant to me that I have to put the arrow in another table between the main two tables. That is why I tested arrow display. My approach can be totally wrong so if you think that there is a better solution let me know.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 19 2019, 12:52 PM
Post #12


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



If the two tables you want to have really are data tables, by all means use tables. But you don't need a table just as a container for text or to be able to float things around. Neither to floats need to be display: inline.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
headbanger
post Aug 19 2019, 10:19 PM
Post #13





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



Great. Thank you Pandy for your help.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Dhruva
post Nov 4 2019, 02:24 PM
Post #14


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

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

 



- Lo-Fi Version Time is now: 18th March 2024 - 11:45 PM