Forums | MacLife

Pithecanthropus · 2008-07-14 4:24 pm

I built a calendar using XHTML and CSS on my Mac. It all works out in Safari, Opera, Onmiweb & Firefox 3 and looks just how I want it. IE and windoze, of course, is another story.

Here's what it looks like in Windoze Firefox:

Everything lines up just fine.

But in IE7 it looks like this:

As you can see, the blue squares, which are links, start to get wonky.

It gets worse when you use IE6 (to my knowledge, the most commonly used browser):

Everything spills out of the margins and gets seriously screwed up.

I know my code is a bit convoluted, but here's the pertinent bits. The XHTML:

Code:

<!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" xml:lang="en" lang="en">
<head>
  <meta name="generator" content="HTML Tidy for Mac OS X (vers 14 February 2006), see www.w3.org" />
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>August 2008</title>
  <meta name="generator" content="BBEdit 8.7" />
<script type="text/javascript" src="BubbleTooltips.js">
</script>
<script type="text/javascript">
//<![CDATA[
window.onload=function(){enableTooltips()};
//]]>
</script>
  <link rel="stylesheet" type="text/css" href="cal-styles.css" />
</head>
<body>
  <div id="calendar">
    <!-- opens calendar -->
    <div id="nav">
      <!-- opens nav -->
      <h2 class="left">«</h2>
      <h2 class="right"><a href="september2008.html" class="prevnext" title="September 2008">»</a></h2>
      <h1>August 2008</h1>
    </div><!-- closes nav -->
    <div class="days">
      <!-- opens sun -->
      <ul>
        <li class="dayofweek">Sun</li>
        <li class="blank">27</li>
        <li class="weekday">3</li>
        <li class="weekday">10</li>
        <li class="weekday">17</li>
        <li class="weekday">24</li>
        <li class="weekday">31</li>
      </ul>
    </div><!-- closes sun -->
    <div class="days">
      <!-- opens mon -->
      <ul>
        <li class="dayofweek">Mon</li>
        <li><a href="http://www.verandalounge.com" class="gig" title="Monday Night Jazz at the Veranda Lounge 8-10:30pm" target="_blank">28</a></li>
        <li><a href="http://www.stjoan.com" class="gig" title="Bridge Over Troubled Water, St. Joan of Arc Church, Minneapolis" target="_blank">4</a></li>
        <li><a href="http://www.verandalounge.com" class="gig" title="Monday Night Jazz at the Veranda Lounge 8-10:30pm" target="_blank">11</a></li>
        <li><a href="http://www.verandalounge.com" class="gig" title="Monday Night Jazz at the Veranda Lounge 8-10:30pm" target="_blank">18</a></li>
        <li><a href="http://gopher.mnstatefair.org/entertainment/results.lasso?location=Bazaar%20Day" class="gig" title="George Maurer Group at the Minnesota State Fair" target="_blank">25</a></li>
        <li><a href="http://www.verandalounge.com" class="gig" title="Monday Night Jazz at the Veranda Lounge 8-10:30pm" target="_blank">1</a></li>
      </ul>
    </div><!-- closes mon -->
    <div class="days">
      <!-- opens tue -->
      <ul>
        <li class="dayofweek">Tue</li>
        <li class="blank">29</li>
        <li class="weekday">5</li>
        <li class="weekday">12</li>
        <li class="weekday">19</li>
        <li><a href="http://gopher.mnstatefair.org/entertainment/results.lasso?location=Bazaar%20Day" class="gig" title="George Maurer Group at the Minnesota State Fair" target="_blank">26</a></li>
        <li class="blank">2</li>
      </ul>
    </div><!-- closes sun -->
    <div class="days">
      <!-- opens wed -->
      <ul>
        <li class="dayofweek">Wed</li>
        <li class="blank">30</li>
        <li class="weekday">6</li>
        <li class="weekday">13</li>
        <li class="weekday">20</li>
        <li class="weekday">27</li>
        <li class="blank">3</li>
      </ul>
    </div><!-- closes wed -->
    <div class="days">
      <!-- opens thu -->
      <ul>
        <li class="dayofweek">Thu</li>
        <li class="blank">31</li>
        <li class="weekday">7</li>
        <li class="weekday">14</li>
        <li class="weekday">21</li>
        <li class="weekday">28</li>
        <li class="blank">4</li>
      </ul>
    </div><!-- closes thu -->
    <div class="days">
      <!-- opens fri -->
      <ul>
        <li class="dayofweek">Fri</li>
        <li class="weekday">1</li>
        <li class="weekday">8</li>
        <li class="weekday">15</li>
        <li class="weekday">22</li>
        <li class="weekday">29</li>
        <li><a href="http://www.ppfive.com" class="gig" title="Abbey Road, Pioneer Place on Fifth" target="_blank">5</a></li>
      </ul>
    </div><!-- closes fri -->
    <div class="days">
      <!-- opens sat -->
      <ul>
        <li class="dayofweek">Sat</li>
        <li class="weekday">2</li>
        <li class="weekday">9</li>
        <li class="weekday">16</li>
        <li class="weekday">23</li>
        <li class="weekday">30</li>
        <li><a href="http://www.ppfive.com" class="gig" title="Abbey Road, Pioneer Place on Fifth" target="_blank">6</a></li>
      </ul>
    </div><!-- closes sat -->
    <div id="footer">
      <!-- opens footer -->
      <h3><a href="../gigs.html">Back to Collective Unconscious.net</a></h3>
      <h4>©2008 Collective Unconscious</h4>
    </div><!-- closes footer -->
  </div><!-- closes calendar -->
</body>
</html>

The CSS:

Code:

* {
     margin: 0;
     padding: 0;
}
body {
     font-family: "Trebuchet MS", Trebuchet, sans-serif;
}
#calendar {
     width: 574px;
     margin-left: auto;
     margin-right: auto;
}
#nav {
     width: 70%;
     margin-left: auto;
     margin-right: auto;
}
h1 {
     color: #336600;
     text-align: center;
}
h2 {
}
.left {
     color: #ddd;
     float: left;
}
.right {
     color: #ddd;
     float: right;
}
.days {
     float: left;
     width: 72px;
     text-align: center;
     padding: 5px;
}
li {
     list-style-type: none;
     padding: 5px;
}
.blank {
     height: 72px;
     background-image: url(cal_images/blank.png);
     background-repeat: no-repeat;
     font-size: 72px;
     letter-spacing: -8px;
     color: #ccffcc;
}
.weekday {
     height: 72px;
     background-image: url(cal_images/weekday.png);
     background-repeat: no-repeat;
     color: #fff;
     font-size: 72px;
     letter-spacing: -8px;
}
.gig {
     display: block;
     width: 72px;
     height: 72px;
     background-image: url(cal_images/gig.png);
     background-repeat: no-repeat;
     color: #99ffff;
     letter-spacing: -8px;
     margin-top: -5px;
     margin-left: -5px;
     margin-bottom: 5px;
}
a.gig {
     text-decoration: none;
     font-size: 72px;
}
.tooltip {
     width: 200px;
     color:#000;
     font:lighter 11px/1.3 Arial,sans-serif;
     text-decoration:none;
     text-align:center
}
.tooltip span.top {
     padding: 30px 8px 0;
     background: url(bt.gif) no-repeat top
}
.tooltip b.bottom {
     padding:3px 8px 15px;
     color: #548912;
     background: url(bt.gif) no-repeat bottom
}
a:link {
     text-decoration: none;
}
a.prevnext {
     color: #669933;
     text-decoration: none;
}
#footer {
     text-align: center;
     color: #ccc;
     font-size: small;
}
#footer a {
     color: #99cc66;
}
h4 {
     padding-top: 3px;
}

And the Javascript (which I found on the web):

Code:

/*javascript for Bubble Tooltips by Alessandro Fulciniti
- http://pro.html.it - http://web-graphics.com */

function enableTooltips(id){
var links,i,h;
if(!document.getElementById || !document.getElementsByTagName) return;
AddCss();
h=document.createElement("span");
h.id="btc";
h.setAttribute("id","btc");
h.style.position="absolute";
document.getElementsByTagName("body")[0].appendChild(h);
if(id==null) links=document.getElementsByTagName("a");
else links=document.getElementById(id).getElementsByTagName("a");
for(i=0;i<links.length;i++){
    Prepare(links[i]);
    }
}

function Prepare(el){
var tooltip,t,b,s,l;
t=el.getAttribute("title");
if(t==null || t.length==0) t="link:";
el.removeAttribute("title");
tooltip=CreateEl("span","tooltip");
s=CreateEl("span","top");
s.appendChild(document.createTextNode(t));
tooltip.appendChild(s);
b=CreateEl("b","bottom");
l=el.getAttribute("href");
if(l.length>30) l=l.substr(0,27)+"...";
b.appendChild(document.createTextNode(l));
tooltip.appendChild(b);
setOpacity(tooltip);
el.tooltip=tooltip;
el.onmouseover=showTooltip;
el.onmouseout=hideTooltip;
el.onmousemove=Locate;
}

function showTooltip(e){
document.getElementById("btc").appendChild(this.tooltip);
Locate(e);
}

function hideTooltip(e){
var d=document.getElementById("btc");
if(d.childNodes.length>0) d.removeChild(d.firstChild);
}

function setOpacity(el){
el.style.filter="alpha(opacity:95)";
el.style.KHTMLOpacity="0.95";
el.style.MozOpacity="0.95";
el.style.opacity="0.95";
}

function CreateEl(t,c){
var x=document.createElement(t);
x.className=c;
x.style.display="block";
return(x);
}

function AddCss(){
var l=CreateEl("link");
l.setAttribute("type","text/css");
l.setAttribute("rel","stylesheet");
l.setAttribute("href","cal-styles.css");
l.setAttribute("media","screen");
document.getElementsByTagName("head")[0].appendChild(l);
}

function Locate(e){
var posx=0,posy=0;
if(e==null) e=window.event;
if(e.pageX || e.pageY){
    posx=e.pageX; posy=e.pageY;
    }
else if(e.clientX || e.clientY){
    if(document.documentElement.scrollTop){
        posx=e.clientX+document.documentElement.scrollLeft;
        posy=e.clientY+document.documentElement.scrollTop;
        }
    else{
        posx=e.clientX+document.body.scrollLeft;
        posy=e.clientY+document.body.scrollTop;
        }
    }
document.getElementById("btc").style.top=(posy+10)+"px";
document.getElementById("btc").style.left=(posx-20)+"px";
}

You can see the page for yourself here.

Does anyone know how I can fix the whitespace wonkiness? Or maybe a better way to do what I am trying to do? The goal is to do the whole thing without resorting to tables.

Thanks!

Duke Stratosphere · 2008-07-14 5:36 pm

Pithecanthropus wrote:
The goal is to do the whole thing without resorting to tables.

Why is this the goal? Is it just because all the literature about CSS proclaims that everyone was using tables when they shouldn't be? Admittedly, that's a problem, but in the case of a calendar, I think a table is appropriate. CSS is not meant to eliminate the use of tables entirely, it's purpose is just to take formatting out of (X)HTML and leave that to CSS. You're making a calendar here. I think a table would be entirely appropriate.

You also have to consider that most people who go to your band's (I assume this Web site is for a band, it sure looked like it to me, anyway) Web site will be using Windoze and some version of IE. This means that CSS will do weird stuff on you. I started working on my band's web site (here) a couple of months ago. I'm working on Windoze but I of course use Firefox. I had the whole thing set up looking super-sweet in Firefox with an external CSS file. Then when I opened it up in IE (whichever version I have ... I only use it for that purpose, pretty much) I got a totally, completely blank white page. I didn't really feel like I had the time to dissect every little detail to see where the bug was, so I totally stripped every bit of CSS out of it. That's right. I told the whole W3C to shove it and put a font tag and alignment attributes and whatever at the beginning of every damn paragraph just to make sure I had some modicum of cross-browser compatibility.

In short, I am now of the opinion that if I have to use deprecated tags and attributes to have the same Web site look reasonably similar in different browsers, so be it. No, I don't like it. I feel very strongly that any program that calls itself a browser should be W3C-standards-compliant before it is ever available to the public, but Microsoft is ignoring my e-mails on the topic. lol

So if I were you, I would seriously consider making your calendar a table. Making it a table will ensure that your weeks line up as a row, at least. I can understand if you balk at the idea, however, so here's another one...

You could make your month an unordered list of weeks instead of 7 unordered lists of days. That may also help keep them in line.

Having said all that, there's something else I think you should consider as well. What happens to your calendar when someone makes text larger? Actually, I just checked it out and yours holds up pretty well. To see one that can break a Web page, check out my friends' Web site. It looks really snazzy and stuff, but make the text large enough and keep an eye on the calendar, which quickly spills over to the photos to the right of it. This is why I scrapped the idea of using a calendar and opted to just list the bookings that we have in table anyway. Anyone wanting to hire us can see just as easily (maybe easier) that way if we are booked on the day they have in mind. You might also notice that Insane Jane's calendar causes the entire page to reload if the user switches months, sending the user back to the top of the page. That really turned me off, and the only way I know of to avoid it is to make the calendar a Java applet. Java applets turn me off because of their size and their excessive loading time. They don't turn me off personally, you understand, because I have a reasonably fast computer and a fast connection to the Net ... but is that true of all my band's prospective clients? Not necessarily and probably just not.

I guess what I'm getting around to here with all my geek-speek rambling is that if I were you, I would make the calendar a (borderless) table of GIF images. Just whip up 31 blue gifs with numbers, 31 green gifs with numbers, and 31 of whatever other color you may need. To leave a day totally blank whip up a white (or transparent) gif to throw into a table cell where necessary. That's the ultimate cure to having people mess up your calendar by changing text size, and you'll be able to center the numbers better that way. (At least I'd like to see the numbers about a half dozen pixels higher up from the bottom of their colored boxes, anyway.)

Is this the modern, standards-compliant solution that you are looking for? Of course not, but a table of GIFs (assuming you have storage space for them) will look the same in any browser that displays it. The blue ones will need to have their onclick attribute set to an appropriate Javascript function that sends the user to the appropriate page.

There are also ways to have Javascript check the browser that a visitor to your site is using and display different pages for different browsers but that's just too much of a pain in the ass for me. shrug

Pithecanthropus · 2008-07-15 2:15 pm

I decided to say screw it to the whole idea and am instead going to embed a Google Calendar. It's self-updating and as easy as cutting and pasting a little code.

Duke Stratosphere · 2008-07-15 4:21 pm

Aw, man, I really liked the overall look of yours. Can you control the looks of a Google calendar? (Never looked into that myself.)

Bat · 2008-07-17 7:41 am

Pithecanthropus wrote:
I decided to say screw it to the whole idea and am instead going to embed a Google Calendar. It's self-updating and as easy as cutting and pasting a little code.

That might not be a good thing.

Exploit reveals the ugly side of keeping data in the cloud

A bug found in the Google Calendars beta exposes the real name of anyone registered with a Gmail account.

Originally posted at the Securiteam blog, the bug allows anyone with a Google Calendar account to reveal other Gmail account holders’ (registered) real names simply by hitting the “back” button after sending an invite.

Internal testing by DailyTech finds that the bug is still active at the time of this writing.

Worse, reveals Canadian blogger Holden Karau, is that the bug works for any account in Gmail’s system, including private Gmail accounts operating under other domains.

Google Calendar Flaw Exposes Any Gmail User’s Real Name

Bat · 2008-07-17 3:24 pm

Update 07/17/2008: A Google representative told DailyTech that the company does not consider the bug a security vulnerability. Rather, it was a feature originally incorporated "make it easier to send Calendar invites to Gmail users." Regardless, Google says it is "currently taking steps to remove it."

It's not a bug, it's a feature... but, um, we decided to pull it anyway.

Forums | MacLife

#1 2008-07-14 4:24 pm

Help Fix Whitespace Wonkiness

Code:

Code:

Code:

#2 2008-07-14 5:36 pm

Re: Help Fix Whitespace Wonkiness

Pithecanthropus wrote:

#3 2008-07-15 2:15 pm

Re: Help Fix Whitespace Wonkiness

#4 2008-07-15 4:21 pm

Re: Help Fix Whitespace Wonkiness

#5 2008-07-17 7:41 am

Re: Help Fix Whitespace Wonkiness

Pithecanthropus wrote:

#6 2008-07-17 3:24 pm

Re: Help Fix Whitespace Wonkiness

Board footer