[sword-devel] CrossWire website up and running

Wed Dec 10 13:35:16 MST 2008

Peter von Kaehne wrote:

> I like my icon bar for looking at software categories, but am not
> conviced yet by its handling. If someone has an idea how to make it less
> jumpy I would be grateful.

Here is a little something I just worked out. I changed only the CSS, 
not the HTML. It works on FF3 and IE7. One weird thing, though: On FF, 
the icons expand upward; on IE, they expand downward. (But they're not 
jumpy anymore.)

<html>
<head>
<title>Crosswire Fix</title>
<style>
ul.systems {
	text-align:center;
	height:80px;
}

systems li {
	line-height:70px;
	height:70px;
	display:inline;
	vertical-align:text-bottom;
}

systems a {
	height:60px;
	vertical-align:bottom;
}

systems a img {
	border: 1px solid black;
	width:40px;
	border-width:0;
}

systems a:hover img {
	width:40px;
	height:60px;
}
</style>
<base href="http://crosswire.org" />
</head>
<body>

<ul class="systems">
<li><a href="index.jsp?section=Linux"><img src="images/tux2.png" 
alt="Linux software" title="Linux and Unix software" 
style="border:0"></a></li>
<li><a href="index.jsp?section=Windows"><img src="images/windows.png" 
alt="Windows software" title="Windows software" style="border:0"></a></li>
<li><a href="index.jsp?section=Mac"><img src="images/blueapple.png" 
alt="Mac OSX software" title="MacOSX software" style="border:0"></a></li>
<li><a href="index.jsp?section=Java"><img src="images/duke.png" 
alt="Java software" title="Java Software" style="border:0"></a></li>
<li><a href="index.jsp?section=Handhelds"><img 
src="images/handhelds.png" alt="Handhelds and Mobile Phones" 
title="Handhelds and Mobile Phones" style="border:0"></a></li>
<li><a href="index.jsp?section=Web"><img src="images/web.png" alt="Web 
based software" title="Web based software" style="border:0"></a></li>
</ul>

</body>
</html>