Tag Archives: css

iPhone/iPad/Android Awesomeness

After way too much effort, SearchTempest is now working quite well on all those platforms! For smartphones, it defaults to the Google-powered ‘All Cities Together’ tab on the results page, since this format requires less processing power. The iPad default is the same as in standard browsers though, where you get each craigslist city in a separate window. That said, both modes are now fully supported on phones and tablets running iOS or ‘droid though, so feel free to try ’em both! You’ll notice that instead of scrolling each city, as you would in a standard browser, you will just have to scroll the whole window. (If you like that, great! If you hate it.. sorry!) Basically, since these devices use touchscreens instead of mice and keyboards, their makers figured it would be difficult to scroll frames inside of windows. So instead they expand the frames to fit their contents, allowing you to just scroll the main site. (Of course, if you happen to be a web developer that can be kind of a pain in the butt, since 1) each phone and browser tends to do it in a slightly different way, and 2) frames expanding to fit contents you can’t control tends to wreck havoc on the design of your page in general… But fortunately only I have to worry about that. 😉 ) So! Enjoy the improved mobile compatibility, and of course, please comment or fire me an email if you notice any problems!

Common CSS Problem – Header background cut off when page scrolled horizontally

Actually it can be any element, but it’s usually seen with header divs. For example, head over to facebook. Shrink your page down until a horizontal scrollbar appears, then scroll to the right. Notice that the blue background in the header is cut off. I’ve been noticing this on a few websites lately, but just today thought to check SearchTempest – and found that it had the same problem! Now fixed. The problem is that by default (or even by explicit css) these divs fill 100% of the width of their container. (For example, the page body.) This is good, because no matter how big the browser window is stretched, the div will stretch to fill it. Unfortunately, the 100% refers to the window width, so if the window is shrunk to less than the size of the content, it will be cut off when the page is scrolled horizontally. The solution? Fortunately, it’s simple. Just use the min-width property, and to set it equal to the fixed-width size of the content. My content is 960px wide, so by setting min-width=960px on the header div, I ensure that it is always at least that wide, even if the window is narrower. Of course, it still extended to 100% of the window size if that is wider than 960px. (If your content is variable width, just set the min-width of the header equal to the greatest min-width within the content – ie to the width at which the horizontal scrollbar appears.) Have a better solution? I’d love to hear about it in the comments!