Anyone Know CSS?
April 14th, 2007 by 
drunkentune
This post has nothing to do with atheism, theism, belief, dialogue, &c; it’s about programming code. If you’re interested, then read on. Otherwise, it’s for those that are willing and able to solve a goofy problem I’ve been having.
For everyone else, if you think the site could use an overhaul, then now’s the time for some suggestions. Just comment about the color scheme; font size/style; format… now’s your time to gripe!
This is an exampleThis is a footnote. Anyone notice the problem(s)? of what happens.
And here’s the code in the body:
a.tt{
position:relative;
z-index:24;
color#FAA806;
font-weight:italic;
text-decoration:none;
}
a.tt span{ display:none; }
a.tt:hover{ z-index:25; color:#aaaaff; background:;}
a.tt:hover span.tooltip{
display:block;
position:absolute;
top:0px; left0;
padding: 15px 0 0 0;
width:200px;
color: #3D2B1F;
filter: alpha(opacity:90);
KHTMLOpacity: 0.90;
MozOpacity: 0.90;
opacity: 0.90;
}
a.tt:hover span.top{
display: block;
padding: 10px 8px 0;
background: url(http://philaletheia.thetruthtree.com/wp-content/uploads/2007/04/bubble.gif) no-repeat top;
}
a.tt:hover span.middle{
display: block;
padding: 0 8px;
background: url(http://philaletheia.thetruthtree.com/wp-content/uploads/2007/04/bubble_filler.gif) repeat bottom;
}
a.tt:hover span.bottom{
display: block;
padding: 3px 8px 10px;
background: url(http://philaletheia.thetruthtree.com/wp-content/uploads/2007/04/bubble.gif) no-repeat bottom;
}
Any ideas? You can either comment with your suggestions or email me at drunkentune[at]gmail.com.
Posted in for fun | 
April 15th, 2007 at 8:24 am
Your stylesheet looks OK. Putting a non-breaking space in the span tag fixes the problem for me (firefox 2.0.0.3):
This is an example
This is a footnote. Anyone notice the problem(s)?
April 15th, 2007 at 8:24 am
Let me try that again:
This is an example
This is a footnote. Anyone notice the problem(s)?
April 15th, 2007 at 8:26 am
Looks like using the “code” tag in a comment is trickier than I thought. I try again:
<a href=”#” class=”tt”>This is an example<span class=”tooltip”>
<span class=”top”> </span>
<span class=”middle”>This is a footnote. Anyone notice the problem(s)?</span>
<span class=”bottom”></span></a>
April 15th, 2007 at 8:27 am
groan … of course it translated my non-breaking space.
Anyhow, there’s a non-breaking space in the first span tag.
April 15th, 2007 at 10:00 am
It seems that your span command is not terminating properly. because of this line:
“a.tt span{ display:none; }:
I’m not sure what its for, but when a removed it, the span terminated correctly.
There was a syntax error under a.tt:hover where it said “left0;” instead of “left:0px;”
April 15th, 2007 at 10:03 am
Well, actually, the span is still having problems, just the rest of the page isn’t included in the ajax like it was unless the link is rolled over.
April 15th, 2007 at 10:04 am
The top of the box isn’t showing, so I suspect it might be the problem with the span.
April 15th, 2007 at 10:14 am
You were missing a closing span command for the “span class=tooltip” since the other span commands were included in this one (so before “a” is closed it should be </span></span>). I added “a.tt span{ display:none; }” back into the style sheet and it works now.
April 15th, 2007 at 10:17 am
I’m still not sure why to top of the bubble doesn’t display, instead the box is open. I checked the style sheet and it is the same commands as the bottom. Should the top image be different?
April 15th, 2007 at 6:34 pm
I see no problems with the layout. If it isn’t broken, don’t fix it.
April 15th, 2007 at 9:32 pm
Thanks!
For Safari it’s still a bit goofy: the top is over a few px and I’m not sure why. Does anyone know how it displays on Firefox and IE?
April 16th, 2007 at 12:43 pm
There’s a website called Browsershots.org that allows you to see what a page looks like in any browser. I submitted this page. Goto:
http://browsershots.org/website/http://philaletheia.thetruthtree.com/2007/04/14/anyone-know-css/
April 16th, 2007 at 3:54 pm
A Ben “soulster” Cheek
Alas, was once a Jesus freak.
A bright Christian today, he gained some quality knowledge
At this place called college.
– a clerihew by drunkentune
April 16th, 2007 at 7:47 pm
Thank you drunkentune. A fitting ode and my introduction to the clerihew form [wiki]. I had a chance just recently to go back to my alma mater to speak at a conference they were hosting. Made me think of some of the more interesting things I’ve learned, like HTML and CSS programming from a mathematician-turned-linguist-turned-theologian.
December 20th, 2007 at 6:23 am
I would like to see a continuation of the topic