I am designing my page layout using tables. I prefer the precision (and I can't seem to figure out how to use DIV and CSS). It is setup so that the first element () of each row is positioned directly beneath the first element () of the previous row. The effect is to give the illusion of a single striped column extending down the left side of the page. The problem is that the page keeps displaying "breaks" (small space) between the tables. I've been over the code numerous times, but can't figure out what is causing this, or how to correct it.

If you go to my site - www.my777s.com - you will see what I'm talking about. You can also right-click to view my source code.

How do I eliminate these unwanted spaces in all the wrong places???

Thank you all for your assistance, once again!

2 answers

0
points
This was chosen as the best answer

contrary to popular belief, cellspacing and cellpadding attribute is not a deprecated attribute for table. The doctype you're using is html5, and border-collapse: collapse; can yield undesirable results because of the doctype you are using.

What I did is just add these on each table cellpadding="0" cellspacing="0" - e.g. a <table height="15%"> would be <table height="15%" cellpadding="0" cellspacing="0">

and just add this css inside the <head> tag

<style type="text/css">
* { margin: 0; padding: 0; border: 0 }
td img {float: left}
</style>

alternatively you can just copy and paste the code here and the fix version of your site can be viewed here

Note: I just added <base href="http://www.my777s.com/" /> on top so that it would resolve in your site, you can delete this if you want.

Answered over 6 years ago by cssrockstah
KC Rajput 178
0
points

hey you should use reset.css for this problem add this style in your css file.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

/* remember to define focus styles! */
:focus {
    outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

make reset.css name file and link this with your page add this in your html page in head tag

<link href="reset.css" rel="stylesheet" type="text/css" />
Answered over 6 years ago by KC Rajput