Why is there space between my divs and spans

[vb6novice]

When I try to use CSS divs and spans to create a series of table-less rows and columns, there's always space between adjacent cells. Here's code similar to what I'm using:

<style>
span.cal_hdr {
	text-align: left;
	vertical-align: center;
	width: 14.28%;
	background-color: #EEEEE3;
	border: 1px;
	border-color: #880000;
	border-style: solid;
	border-collapse: collapse;
	font-family: Arial;
	font-style: italic;
	font-weight: Bold;
	color: #880000;
	font-size: 10pt;
	padding: 0px;

}
span.upper{
	font-family: Arial;
	font-weight: Bold;
	color: #000000;
	font-size: 8pt;
	border-top: 1px;
	border-left: 1 px;
	border-bottom: 0 px;
	border-right: 0 px;
	border-color: #000000;
	border-style: solid;
	border-collapse: collapse;
	z-index: 1; 
	background-color: #FFF; 
	width: 13.9%; 
	height: 100%; 
	padding: 0px;
	color: #880000;
}
<style>
.
.
.
<div style="width: 780; height: 1; background-color: #FFF; border-width: 0px; border-color: #000000; border-style: solid; border-collapse: collapse;">
	<span class="cal_hdr"><b>Sunday</b></span>
	<span class="cal_hdr"><b>Monday</b></span>
	<span class="cal_hdr"><b>Tuesday</b></span>
	<span class="cal_hdr"><b>Wednesday</b></span>
	<span class="cal_hdr"><b>Thusday</b></span>
	<span class="cal_hdr"><b>Friday</b></span>
	<span class="cal_hdr"><b>Saturday</b></span>
</div>
<div align=left style="width: 780; height: 1; background-color: #FFF; border-width: 0px; border-color: #000000; border-style: solid;">
	<span id="day11" class=upper>1<br>Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6<br>Line 7<br>Line 8</span>
	<span id="day12" class=upper>   2</span>
	<span id="day13" class=upper>   3</span>
	<span id="day14" class=upper>   4</span>
	<span id="day15" class=upper>   5</span>
	<span id="day16" class=upper>   6</span>
	<span id="day17" class=right>   7</span>
</div>
<div align=left style="width: 780; height: 1; background-color: #FFF; border-width: 0px; border-color: #000000; border-style: solid;">
	<span id="day11" class=upper>   8<br>Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6<br>Line 7<br>Line 8</span>
	<span id="day12" class=upper>   9</span>
	<span id="day13" class=upper>  10</span>
	<span id="day14" class=upper>  11</span>
	<span id="day15" class=upper>  12</span>
	<span id="day16" class=upper>  13</span>
	<span id="day17" class=right>  14</span>
</div>

It's not a bad look, just not the look I'm looking for. Can anyone provide insight?

 

[kaht]

It looks like you're trying to create a calendar (it's horribly broken in FF btw), so why don't you just use a table? Calendars are one of the few good uses for tables.

-kaht

How much you wanna make a bet I can throw a football over them mountains?

 

[vb6novice]

kaht,

Thanks for the input. I have three thoughts on your comments.

1. Forget about the calendar. That was just an example from something I tried several months ago but gave up on and went back to tables because the divs and spans always had space between them.

2. My new project isn't developed yet so I don't really have any code for it (hence the calendar example - something that anyone answering could relate to). I want some rows and columns in my new project, and the reigning wisdom on the how-to-with-CSS web sites seems to be that CSS can do rows and columns as well or better than with tables, TRs, and TDs without all the structure that goes with them. Is that true or is it hype? I don't want to spend the time to try to make a page with rows and columns if they can't be close together like TRs and TDs.

3. You didn't answer my question. Am I doing something wrong or is there no way to draw the divs and spans together?

 

[Vragabond]

Your assumption #2 is wrong. Positioning divs with css is not better for producing tables than a table. That's why we have tables. To produce tabular data. The question is, is what you're producing really tabular data. You think it is, but you did not tell us what it is you're producing, so we cannot judge for ourselves. But where you stand right now, table is the way to go.

Table elements are not forbidden for people who layout their pages with css. It is just that we use them for tabular data.

 

[vb6novice]

As I'm sure you know, there are CSS tutorial websites out there which go into great detail regarding how CSS elements can be used in place of 'traditional' tables (look at

http://www.brainjar.com/css/positioning/).

A previous web site design of mine used tables extensively for things that were not tabular data (I used a very complex heirarchy of tables within tables .... within tables to position everything on the page). When I wanted to move something around it required a redesign of just about the entire page. I was looking for a better way when I learned about using CSS Positioning. In some cases positioning divs and spans was easier and produced the same (i.e. same looking) result. When I tried to do the same for some other things, the results were not reproduceable with divs and spans because of the space between them problem.

So then, if I want to use divs and spans for two boxes side-by-side (not what I would consider traditional tabular data), and if I want each box to have borders on all 4 sides, and if I want the borders between them to look like a single border (meaning that there isn't any or doesn't look like there is any space between them), can that be accomplished.

 

[Vragabond]

Sure it can. You basically use floats to position the two boxes side by side. As for the common borders, you either specify them only for one box or you could even use negative margins to make their borders intersect and appear as one. AFAIK these are the best two methods of having a single looking shared border.