CSS Horizontal Menu: Firefox whitespace bug
So I came across the most baffling bug the other day that locked me up for a good three hours. I thought maybe I’d just put down what I discovered here on the outer reaches of the blogosphere in case anyone else happens to hit that magical combination of Google keywords and a link to this page comes up.
To describe the problem succinctly: when you’re trying to create a horizontal menu using unordered lists (<ul> and inline <li>), for some reason, in Firefox (2 - I don’t know about 3 which just came out last week), if there is any whitespace between a closing </li> tag and the opening <li> tag of the next item, that whitespace actually displays. At first it looks like a margin spacing issue, but after some tests it’s clearly not. In fact, what baffles me is that ANY text between the closing </li> and the opening <li>, that text actually gets displayed inline! Which makes no sense, because I didn’t think that the <ul> element could have a text node as a direct child. Apparently it can, in Firefox at any rate.
The solution, as I have discovered is to set your <ul>’s display attribute to “table”. I don’t believe IE7 and certainly not IE6 understand display:table, so this is a non-IE fix, but then again, IE wasn’t exhibiting the whitespace behaviour. Here’s some sample code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<style type="text/css">
* { margin:0; padding:0; }
ul {
list-style-type:none;
list-style-position:inside;
margin:0px; padding:0px;
display:table; /* This is used for firefox */
/* to avoid the horizontal whitespace bug */
}
li {
border:1px solid black;
display:inline;
margin:0px; padding:0px;
border-collapse:collapse;
}
a {
}
</style>
</head>
<body>
<ul>
<li><a href="#">Line 1</a></li>
<li><a href="#">Line 2</a></li>
<li><a href="#">Line 3</a></li>
</ul>
<p>Other stuff....</p>
</body>
</html>
Interoperability between two Flash EXE Projectors (or how to dynamically read SharedObjects across two SWFs)
So here’s a real doozie that came from a question someone asked on ExpertsExchange: he had two separate Flash Projectors (EXEs) - that needed to be able to intercommunicate (the first projector needed to know when the second projector had actually finished loading). Since we’re dealing with external projector files that have no dependencies (rather than using the movieClipLoader to load an external SWF into the parent movie), the only thing I could think of that would work reliably was local SharedObjects.
As I put together a solution for this brave soul, I encountered a few interesting challenges, and a few frustrations. Thought I’d document it here because I couldn’t find anyone else who had addresses the intricacies of having two SWF share a SharedObject and monitor the status of that shared SharedObject so they could respond to a change in status.
Here’s the basic principle:
- Application 1 creates a local SharedObject and sets an initial status
- Application 1 also registers an enterFrame event listener that listens for a status change on the SO
- Application 2 accesses the same SO and at some point, changes the status
- Application 1’s enterFrame handler detects the status change, and responds to the event.
As I write this, I see there’s an opportunity for a custom event class that does all this, but I’m going to leave that to the real gurus. I don’t pretend to have that intimate a knowledge of ActionScript to be able to pull that off. I should also point out at this time that the original EE user’s question was for AS2, so this solution is only tested in AS2, though since the issues I was running into were related to variable scope, I would only imaging that an AS3 implementation would be easier, if anything.
Here are the challenges I encountered:
- how to launch one EXE Projector from another EXE Projector
- how to share a SharedObject between two Flash movies (SWFs)
- how to continuously monitor the value of a shared SharedObject