I want to remove the space there and make my images looks nice, but I don't know how.
There is always space between the div and table. I tried collapse but it did not work
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.div1{
width: 600px;
height: 150px;
border: 1px solid black;
margin: auto;
background-image:url("images/piha1.jpg");
}
table tr td{
}
img{
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<div class="div1">
<table>
<tr>
<td><img id="surfimg" src="images/piha2.jpg" alt="surf"></td>
<td><img id="picnic" src="images/piha3.jpg" alt="picnic"></td>
</tr>
</table>
</div>
</body>
</html>
Try using collapse on the table and reducing the padding from the td to zero:
table {
border-collapse: collapse;
}
td {
padding: 0;
}
Try to add border-collapse: collapse; as CSS property for table element.
table {
border-collapse: collapse;
}
Alternatively, you can experiment with following attributes
cellpadding="0" cellspacing="0" and border="0" on your table.
Related
**Please help me remove the white space between my images when rendering the below on a browser - FireFox in my case**
<body>
<form id="form1" runat="server">
<div>
<table style="border:0px;margin:0px;float:left; width:864px">
<tr>
<td style="width:809px">
<table style="margin:0px; border:0px; clear: both; border-collapse: collapse; width:848px; height:120px">
<tr><td style="margin:0px; border:0px; background:url(images/qualhisttop.jpg); width:560px; height:124px; background-repeat:no-repeat;"></td></tr>
</table>
</td>
</tr>
</table>
<table style="border:0px;margin:0px; clear:both; width:864px">
<tr style="margin:0px;">
<!----------------------------------------------------------------------------------------------------->
<!-- B E G I N N A V I G A T I O N -->
<!----------------------------------------------------------------------------------------------------->
<td style="border:0px; margin:0px; vertical-align:top; float:left; width:130px; height:532px">
<img src="images/tp_collagebasedrill.jpg" style="width:130px; height:78px; border:0px;margin:0px;" alt=""/>
<img src="images/meta_swooshbottom.gif" width="109" height="140" alt="" />
</td>
</tr>
</table>
</div>
</form>
</body>
OK so i have provided an example that may help you.`
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>remove the white space between my images</title>
<style type="text/css">
.wrapper{
width: 1200px;
margin: 0 auto;
}
#image-1{
float: left;
}
#image-1 img{
width: 600px;
}
#image-2{
float: left;
}
#image-2 img{
width: 600px;
}
</style>
</head>
<body>
<div class="wrapper">
<div id="image-1"><img src="lostsouls.jpg" alt=""></div>
<div id="image-2"><img src="lostsouls.jpg" alt=""></div>
</div>
</body>
</html>
so if you wanted to stack them then they would be block level elements which are what divs are. Here is how to do that based on the previous example.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>remove the white space between my stacked images</title>
<style type="text/css">
.wrapper{
width: 1200px;
margin: 0 auto;
}
#image-1{
border: thin solid #003333;
height: 200px;
}
#image-1 img{
width: 600px;
height: 200px;
}
#image-2{
height: 200px;
}
#image-2 img{
width: 600px;
height: 200px;
}
</style>
</head>
<body>
<div class="wrapper">
<div id="image-1"><img src="lostsouls.jpg" alt=""></div>
<div id="image-2"><img src="lostsouls.jpg" alt=""></div>
</div>
</body>
</html>
just make sure that you set the height of the image-1 and image 2 divs to the same size as the image
i provided another code example that should work for you in a previous post. Try that and see if it works. also the reason for the space in between the images is that you must set the height of the image to be the same height as the container or div that the image is inside. So if the image is 400px high then you must set the height of the div to 400px as well. I hope this helps.
Width property isn't working here:
<!DOCTYPE html>
<html>
<head>
<style>
td {
height: 50px;
width: 25px;
border: 1px dashed blue
}
table {
border: 1px solid black;
width: 400px;
height: 400px
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
Table cells don't want to become narrow. Why? Also, it seems that there is something wrong with height property too.
It's because the table is set at 400px width. The cells you have will auto expand to fill the width of the table. Remove the 400px width of the table and your cells should become 25px each.
As HaukurHaf mentioned, the <td> are expanding automatically expanding to fill the <tr> .
You can force the <td> to accept the specified width and height by changing it's display property to inline-block.
JSFiddle
Your table styles are overriding your td styles.
To see what I mean:
<!DOCTYPE html>
<html>
<head>
<style>
td {
height: 50px;
width: 25px;
border: 1px dashed blue
}
table {
border: 1px solid black;
/*width: 400px;
height: 400px;*/
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
and here's a working JSfiddle
Following HTML renders incorrectly with latest Firefox. IE and Chrome are ok but Firefox displays white vertical line inside the table cell.
Example rendered with Firefox 21 can be found here:
http://tinypic.com/r/2w2qvb6/5
Is this a bug in Firefox or am I missing something?
HTML:
<table>
<tbody>
<tr>
<td>
<div></div>
</td>
</tr>
</tbody>
</table>
CSS:
table{
border: 2px solid red;
border-collapse: collapse;
}
td{
border: 2px solid red;
padding: 0px;
}
div{
background:blue;
height: 100px;
width: 100px;
}
Removing border-collapse: collapse; removes the vertical white line. But I really want to collapse the table borders.
JSfiddle: http://jsfiddle.net/FeuBx/
Update: The problem appears only with 100% browser zoom level (Ctrl + 0).
Your code works as is if you set an HTML5 DOCTYPE at the top of your page as in:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css">
table{
border: 2px solid red;
border-collapse: collapse;
}
td{
border: 2px solid red;
padding: 0px;
}
div{
background:blue;
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td>
<div></div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
I have an image in a table element and there always seems to be a margin below the image.
The minimal example below shows the problem.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
body {
margin: 0;
padding: 0;
}
table {
width: 100%;
border-spacing: 0;
}
table td {
padding: 0;
border: 1px dotted;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<img src="http://cdn.inquisitr.com/wp-content/2012/10/colonel-meow-facebook-e1349873175523.jpeg">
</td>
</tr>
</table>
</body>
</html>
Add CSS style vertical-align: bottom; to your image, will do the trick. Unless you do not need the images to be display: inline-block; then use the answer from the previous user!
You need to change your images to display as blocks. Add this to your css style...
img { display:block;}
I've the following html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<table style="margin: 250px; width: 200px; height: 100px; background-color: Yellow; table-layout: fixed;">
<tr>
<td>
<div style="margin: auto auto auto -50px; background-color: Green; width:100px; height:50px;">L</div>
<div style="margin: auto -50px auto auto; background-color: Green; width:100px; height:50px;">R</div>
</td>
</tr>
</table>
</body>
</html>
I want the green boxes with R & L to be on the same line w/o using JS, how do I do that?
Just add "float:left;" to the style attribute on the box L
and add "float:right;" to the style attribute on the box R
then add valign="top" at the td tag. The parent tag of the boxes if you want it align to the top.
see code below
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<table style="margin: 250px; width: 200px; height: 100px; background-color: Yellow; table-layout: fixed;">
<tr>
<td valign="top">
<div style="float:left;margin: auto auto auto -50px; background-color: Green; width:100px; height:50px;">L</div>
<div style="margin: auto -50px auto auto; background-color: Green; width:100px; height:50px;float:right;">R</div>
</td>
</tr>
</table>
</body>
</html>
Add css style "float:left;". It will solve this.
You can use css display: inline-block. Note that this doesn't work in older browser versions.
Alternatively you can use float: left.
<div style="margin: auto auto auto -50px; background-color: Green; width:100px; height:50px; float:left;">L</div>
<div style="margin: auto -50px auto auto; background-color: Green; width:100px; height:50px; float:left;">R</div>
You can either add css float: left to DIV L only;
Or you can add css float: left to DIV L and float: right to DIV R.
Ultimately, it depends on what you are trying to achieve here.