CSS Span Problem

[MattyMC]

Hello,

I'm pretty new to using CSS and I'm creating a calendar using divs and spans. Each day on the calendar might have an image on it that links to a page. On the days where there are no images the spacing in between the spans works fine but if I put an image in one of the spans the space between the spans doubles. This really messes up my calendar (makes a day in the week move to the next line in some cases.) I was wondering if anyone knew what the problem was.

Thank you,

Matty

PS- I dont have an area to host this yet to show you. Sorry.


HTML CODE

<div id="Calendar">

<div id="CalendarHead">

<span id="CalendarHeadItem">Sunday
</span>
<span id="CalendarHeadItem">Monday </span>
<span id="CalendarHeadItem">Tuesday </span>
<span id="CalendarHeadItem">Wednesday </span>
<span id="CalendarHeadItem">Thursday </span>
<span id="CalendarHeadItem">Friday </span>
<span id="CalendarHeadItem">Saturday </span>

</div>
<div id="CalendarBody">

<span id=CalendarBodyItemEmpty>
<a href=NewEvent.aspx?d=&m=10&y=2005></a> <br>
</span>
<span id=CalendarBodyItemEmpty>
<a href=NewEvent.aspx?d=&m=10&y=2005></a> <br>
</span>
<span id=CalendarBodyItemEmpty>
<a href=NewEvent.aspx?d=&m=10&y=2005></a> <br>
</span>
<span id=CalendarBodyItemEmpty>
<a href=NewEvent.aspx?d=&m=10&y=2005></a> <br>
</span>
<span id=CalendarBodyItem>
<a href=NewEvent.aspx?d=1&m=10&y=2005>1</a> <br>
</span>
<span id=CalendarBodyItem>
<a href=NewEvent.aspx?d=2&m=10&y=2005>2</a> <br>
</span>
<span id=CalendarBodyItem>
<a href=NewEvent.aspx?d=3&m=10&y=2005>3</a> <br>
</span>
<br>
<span id=CalendarBodyItem>
<a href=NewEvent.aspx?d=4&m=10&y=2005>4</a> <br>
</span>
<span id=CalendarBodyItem>
<a href=NewEvent.aspx?d=5&m=10&y=2005>5</a> <br>
<a href='page.aspx?eid=19'><img src=pics/fred.gif border=0 alt='Social Event: Hockey Night'></a></span>
<span id=CalendarBodyItem>
<a href=NewEvent.aspx?d=6&m=10&y=2005>6</a> <br>
</span>
<span id=CalendarBodyItem>
<a href=NewEvent.aspx?d=7&m=10&y=2005>7</a> <br>
<a href='page.aspx?eid=17'><img src=pics/red.gif border=0 alt='Social Event: Blarney Stone'></a></span>
<span id=CalendarBodyItem>
<a href=NewEvent.aspx?d=8&m=10&y=2005>8</a> <br>
</span>
<span id=CalendarBodyItem>
<a href=NewEvent.aspx?d=9&m=10&y=2005>9</a> <br>
<a href='page.aspx?eid=16'><img src=pics/red.gif border=0 alt='Social Event: Birthday!!'></a><a href='page.aspx?eid=23'><img src=pics/red.gif border=0 alt='Social Event: asdf'></a></span>
<span id=CalendarBodyItem>
<a href=NewEvent.aspx?d=10&m=10&y=2005>10</a> <br>
</span>
<br>
<span id=CalendarBodyItem>
<a href=NewEvent.aspx?d=11&m=10&y=2005>11</a> <br>
<a href='page.aspx?eid=24'><img src=pics/blue.gif border=0 alt='School Event: Group Test1'></a><a href='page.aspx?eid=25'><img src=pics/red.gif border=0 alt='Social Event: Group Test 2'></a><a href='page.aspx?eid=26'><img src=pics/red.gif border=0 alt='Social Event: Group Test 3'></a><a href='page.aspx?eid=27'><img src=pics/red.gif border=0 alt='Social Event: test'></a><a href='page.aspx?eid=28'><img src=pics/blue.gif border=0 alt='School Event: Group Test YAY'></a></span>
<span id=CalendarBodyItem>
<a href=NewEvent.aspx?d=12&m=10&y=2005>12</a> <br>
</span>
<span id=CalendarBodyItem>
<a href=NewEvent.aspx?d=13&m=10&y=2005>13</a> <br>
</span>
<span id=CalendarBodyItem>
<a href=NewEvent.aspx?d=14&m=10&y=2005>14</a> <br>
</span>
<span id=CalendarBodyItem>
<a href=NewEvent.aspx?d=15&m=10&y=2005>15</a> <br>
</span>
<span id=CalendarBodyItem>
<a href=NewEvent.aspx?d=16&m=10&y=2005>16</a> <br>
</span>
<span id=CalendarBodyItem>
<a href=NewEvent.aspx?d=17&m=10&y=2005>17</a> <br>
</span>
.
.
.

</div>

</div>

CSS Code

#Calendar a{
color: #000000;
text-decoration: none;
font-size: 16px;
}

#CalendarHead {
background: #4169E1;
padding-left: 5px;
}

#CalendarHeadItem {
background: #FF8C00;
padding: 5px;
width: 96px;
margin-right: 2px;
margin-top: 3px;

text-align: center;
text-decoration: bold;
border: 1px solid black;
}

#CalendarBody {
background: #4169E1;
padding-top: 2px;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 5px;
vertical-align: top;
text-align: left;
}

#CalendarBodyItem {
background: #F5F5F5;
padding: 1px;
width: 96px;
height: 80px;
margin-right: 2px;
margin-bottom: 2px;
border: 1px solid black;
}

EDIT - Forgot the last 2 CSS classes

#CalendarBodyItemSelected {
background: #87CEFA;
padding: 1px;
width: 96px;
height: 80px;
margin-right: 2px;
margin-bottom: 2px;
border: 1px solid black;
}

#CalendarBodyItemEmpty{
width: 96px;
height: 80px;
margin-right: 2px;
margin-bottom: 2px;
}

[mwinter]

[...] I'm creating a calendar using divs and spans.

Don't. Use a table. You have a relationship between column headings (days of the week) and cells within the table body, so a table element should be used to reflect that relationship.

I was wondering if anyone knew what the problem was.

There are many, not just with the CSS, but the markup itself, as well.

Incidentally, when posting code and HTML, use the or pseudo-tags.

<span id="CalendarHeadItem">Sunday </span>
<span id="CalendarHeadItem">Monday </span>

The first problem is that id attribute values must be unique within a document. If you want to label multiple elements, use the class attribute which can contain a space-separated list of class names.

That said, you should also use the document structure to full effect. If all span elements within the header are items, then use

.calendar .head span {
  /* ... */
}

<div class="calendar">
  <div class="head">
  <span>...</span>
  <span>...</span>
  </div>
</div>

rather than

.calendar .head .item {
  /* ... */
}

<div class="calendar">
  <div class="head">
  <span class="item">...</span>
  <span class="item">...</span>
  </div>
</div>

<div id="CalendarBody">
&#160;&#160;<span id=CalendarBodyItemEmpty>
<!-- ... -->
&#160;&#160;<span id=CalendarBodyItem>

A similar approach applies here. Rather than identify everything, specialise exceptions.

.calendar .body span {
  /* Rules for normal items */
}
.calendar .body span.empty {
  /* Rules for empty items, overriding others
   * from the previous rule, if necessary.
   */
}

<div class="calendar">
  <div class="body">
  <span>...</span>
<!-- ... -->
  <span class="empty">...</span>
  </div>
</div>

<a href=NewEvent.aspx?d=&m=10&y=2005>

That href attribute value must be quoted. There are times when attributes can be left unquoted, but only when the characters involved are part of a very restrictive set (letters, numbers, underscores [_], full stops [.], colons [:], and hyphens [-]). Unless you're willing to commit that to memory, just quote all attribute values. In addition, ampersands (&) are special characters in HTML as they delimit the start of a character entity reference. Whenever they should appear as literals, use the &amp; entity. There are exceptions, though (like within script elements). Both of these corrections apply in numerous locations, and in other elements.

#CalendarHeadItem {
/* ... */
&#160;&#160;width: 96px;
/* ... */
&#160;&#160;text-align: center;

The span element is in-line, and as such neither the width property nor the text-align property can be applied to it. IE6 in 'Quirks' mode reflects bugs in IE5.x and purposely ignores this, but in 'Standards' mode it doesn't apply them (as it should).

Hope that helps,
Mike

[MattyMC]

Thank you so much mwinter.

Your direction lead to me a solution to my problem and also better understanding of CSS. Being new to CSS I really appreciate your taking to time to explain not just that im wrong but exactly why i was wrong and how I could fix it.

Thanks again!

Matty