CSS hackery help!
Back in May, I inherited Photo Organizer, and since then, there have been four releases. Nothing earth-shattering, but a steady series of incremental improvements, usually in the form of feature backports from the "unstable" tree.
The single biggest feature of the "unstable" tree is the use of CSS for layout and other formatting, plus other changes necessary to support better theming and internationalization. The work is well advanced, but I'm running into a few walls.
First, I can't seem to figure out how to have truly marginless <button>s. I'm using graphical buttons for things like next/prev links, but try as I may, I end up with a small (~few pixels) margin around the embedded image. This doesn't matter for most of the buttons, but there is a subset used for navigation and this results in the navbar being unacceptaby wide.
The navigation buttons are being used as implicit <a href> tags, which raises the question "why not just use the tag then?" -- basically, I want everything using the same mechanism, if at all possible. As most of these buttons/links appear within multiple forms (and occasionally standalone) I can't use <input type="image"> tags because of their implicit submit on click. On the plus side their borders/margins can be disabled!
Second, I can't seem to figure out how to have a proper 'onmouseover' event when hovering over a button. The button normally pops up a little tooltip (via the title attritubte), but I want to pop up a thumbnail of the next/prev image when the mouse hovers over the button as well as the tooltip. I could probably hack something together via a hidden <div>, but I'm almost over my head as it is.
The goal of these buttons is to enable a pure-text interface, making it trivial to translate it into different languages -- and the crucial bit is that the rest of the code can't care what the UI looks like.