@media nasty hacks

What with IEs conditional comments its been a long time since in needed to do any CSS hacks. Being a bit out of practise it goes against the grain to add stuff that's obviously wrong just to get something to display in one browser or another. Still, what are you going to do? Telling people to change their user agent is not really a viable option. The particular problem I was trying to hack was on Opera mini on the Blackberry, so took to delivering a little CSS for that it could understand to fix the layout issue.

/* hack to fix search form in Opera mini */
@media screen and (max-device-width: 480px) { 
 html #search-options,
 html #search-options div.searchOptions,
 html #search-box,
 html #search-options div.searchBoxWrapper,
 html #search-options div.searchBoxWrapper div.searchBoxContainer,
 html #search-options div.searchBoxWrapper div.search-btn {
  height:20px;
  overflow:hidden;
 }
}

As you can see, fixed the heights of a load of divs which fixed the layout issue. So only problem is, this breaks they layout that worked perfectly well before in the iPhone! So I had to add yet another hack to reset it back to how it was...

/* remove for webkit */
@media screen and (-webkit-min-device-pixel-ratio:0){ 
    html body #search-box  {
       height:auto;
    }        
}

It's like 1999 all over again! Anyway, question is, is there a better opera mini only way to write the first hack which won't get picked up by other small screen devices???

I shall investigate (at some point!)