Beginner mistake

Hi everybody!

I’m currently following the HTML/CSS program of Codeacademy
and try to make my first page, but there is a little problem i cannot fix.

I have made a table with two picture, and the screen must be divided
into two equal parts, but there is still a little vertical white stripe between the two row…

here is my css code (dont judge it is the first one)

body {
	margin: 0px;
	padding: 0px;
	overflow: hidden;
}

table {
  width: 100%;
}

table, tr, td {
  vertical-align: top;
  border-collapse: collapse;
  margin: 0px;
  padding: 0px;
  border: 0px;	
}

img {
	width: 100%;
	margin: 0px;
	padding: 0px;
	border: 0px;
}

td, .ok {
  	background-color: beige;
}

td, .okk {
  	background-color: blue;
}

and i still have this

Anybody can help? I’m stuck…

Thx from France

Try

border: none;

instead of

border: 0px;

Hope this helps

Happy coding!

2 Likes

Can you explain what the difference is? I thought those 2 would do the same thing basically. :thinking:

It should not really be a difference.

But there is a theory to my thought:
It may be that even though the width of the border is set as 0 px, the browser might still render it. The border is existent but has no width.

Setting the border to none might solve this issue since the border now is non existent.

Let me know if this works @thibautrobin

1 Like

Can we see your html code as well?

1 Like

I’ve been thinking about this one 1px line since you posted the entry and I think I might have found something else you can try in the Resposive Design class on how to build websites. It was just a small detail, but it sure looked EXACTLY like your problem.

Try display:block instead of the default for the images (with should be display:inline-block). In the course they said something about the inline-block causing images to give themselves weird margins. I haven’t tried it out myself, but maybe it works. :slight_smile:

Hi everybody! Thank you for your help. As a true beginner (i started to code 2 weeks ago) i just
tryed another method and now i made 2 div inline block with a width of 50% and float to the left and the other one with a float to the right and the little white stripe between the two columns dispeared… Now my problem is to animate this. And it is really hard!!

Thanks again!!

T.

1 Like

Nice work! High fives all around! Happy coding! :slight_smile:

1 Like

If you have display: inline-block, the gap is caused by the spaces within html. So you could do:

<img><!--
--><img>

to overcome this issue.

1 Like