Last week I noticed something very odd on Blue Anvil when resizing the browser window; after some casual browsing I discovered it was not just my site with the problem and that it was quite widespread on many ‘web 2.0′ style sites.
The problem occurs when resizing the browser window; cutting off background images and potentially making text illegible. Worse still, the bug also seems to affect mobile browsers with a zoom function, such as opera mobile.
After some dabbling I found a solution, which I shall explain in this post.
After my recent ‘upgrade’ to Windows Vista I came across a little snag in regards to site testing; the Internet Explorer standalones I had come to love no longer functioned.
This became a very annoying issue for me, as I frequently require easy access to old Internet explorer versions for site testing/bug fixing. But at last I have found a solution; although its slightly more awkward than a nice standalone version of the browsers.
Following the recent release of Internet Explorer 7 (IE7), I thought now would be a good idea to scope the competition, and see what the main browsers have to offer. Will Microsoft dominate the browser market with IE7, or can Mozilla steal the show with firefox 2? Read more to see what I think and what I have found.
When developing websites there is one thing I have never kept consistent; the method of clearing floats. It seems every project I take, I seem to do it a different way, well Its about time I sorted it all out in my mind.
For those with no clue about what I’m rambling on about, with CSS layouts, when you have a float inside an block-level element, it will collapse in most browsers, since floats have no dimensions. So for instance, if I had a div container with a blue background, and a float inside it, the blue background would not surround the float (and the floats contents), due to the div ignoring the height of the float.
To fix this you need to ‘clear’ the float, so the container recognises the fact the float is there, and adjusts its height accordingly.
There are many methods of doing this, personally in the past Ive used most of them, so in this article I will compare the main ones and rate them in terms of:
- The extra markup
- The Amount of CSS
- Cross Browser compatibility (I’m limited to IE5-7, Opera 9, Firefox)
- Ease to implement
Conditional comments have been part of internet explorer since version 5, but a lot of programmers ignore them.
This article teaches the basics of using conditional comments, and shows some examples of their uses.
As you may well be aware, this has been a pretty hectic week for me, trying to finish all my projects before I leave to go on a well earned holiday.
The main thing on my agenda was the blue anvil redesign I’ve been working on. It all went pretty smoothly, excluding the few set-backs I encountered (see my last blog entry), but all in all it went well and the website was looking fairly nice…in firefox.
Yes, I left the cross browser stuff until last, it would only take an hour or two, right? How wrong was I. This was my day from hell and I have the coffee breath and bad temperament to prove it. With any luck the problems and solutions I used may be
helpful, and save others from a hellish day that I experienced.
