Two (appropriately) small Opera Mini tips

Opera Mini has some funny rules relating to image display. I was doing some work for a partner company and was staring at this line of code wondering why Opera Mini wasn't displaying it:

<img src="http://www.blogger.com/partner.gif" alt="partner" height="25" width="60" /> (doctype is HTML 4.01 since you ask, works fine so don't knock it)

I noticed that the partner's graphics people had saved the GIF with an animation setting ( a surprisingly comment defect) so I recreated it without. No joy. Didn't work as a PNG. Then I had a brainwave: I deleted the alt attribute and lo and behold Opera Mini displayed the image. Not completely unreasonably, the Opera Mini proxy displays the ALT attribute of an image if present, but if it isn't it assumes that there might be some information required by the user in the picture and displays it. While not unreasonable, this is still a poor decision as it means I now have to generate usability-deficient HTML in order to achieve a desirable visual effect.

The other tip is in the same vein: creating horizontal rules in Opera Mini requires a trip back in time to 1997. OM ignores border directives in CSS, but respects background colour, so you can't mark the bottom of a div like this: div {border-bottom: 1px solid black; background-colour: ghostwhite} - OM will colour the div, but not the bottom. In order to get this effect you have to stick a 1 pixel tall image (again beware, don't call the image something like "spacer.gif" as the algorithm finds those and removes them from the rendering) in a div or its own. OM will shrink the image to a centred 50% or so of the screen but you can now colour the background to match and OM will dutifully render the div to the full width of the screen. Again, not recommended as scalable code for other browsers, but should you ahve the luxury of creating an OM-specific rendering, this does help break up the page visually.

Obviously neither of these tips are relevant for Opera Mini 4 which is an entirely different issue. Equally now I've explained how to fool Opera Mini, Opera's proxy engineers might fix the proxy to ignore 1px divs.