Aren’t browsers FUN?

13 December, 2010 (23:36) | Apple/Mac, PHP and MySQL, Web Design/CSS | By: Rawrb

Webgeek alert: The more browsers, the more compatibility testing you have to endure. The more operating systems, the more testing you have to somehow engage in. I don’t have a Linux or BeOS setup so I have to go with what’s generally used; Windows and OSX.

So I had the pleasure of discovering a nice little bug when testing a new design in Safari for Mac. I had two floating DIVs with negative margins floating on the right and left side of the main content area of my design. These divs are being stretched to reach 100% height on the page so that the repeating background is always there no matter how tall the page gets.

There’s a bug with Safari for Mac and Chrome for Windows. If you HAPPEN to have negative margin divs that float left or right with a 100% stretched background, they’ll just not appear at all. I scoured and searched the ‘net for answers on this bug with little to no real answer until I made a discovery.

These bugs are dependent on the doctype declaration. Of ALL things to cause this, it’s a DOCTYPE issue. I would have never guessed this as I’ve never had this creep up in all my years of being a web geek.

So, I found some code that sniffs out browsers and OS types to resolve this. Goes a little something like this.

include("Browser.php");
$browser = new Browser();
if( $browser->getBrowser() == Browser::BROWSER_SAFARI) {
	echo "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\">";
} else {
	if (($browser->getBrowser() == Browser::BROWSER_CHROME) && $browser->getPlatform() == Browser::PLATFORM_WINDOWS) {
		// That's right - NO DOCTYPE DECLARATION. At least for now.
		echo "";
	} else {
		echo "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.1//EN\"

\"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd\">";


}
}

Yep. It’s utterly ridiculous that the doctype affects whether or not a 100% vertical background div with negative margins. (Note: The above is based on a class that is very efficient at sniffing browsers and OS types. It’s by Chris Schuld)

For those who struggle with this bug, I hope this helps. I’m also posting this for Google and other engines to absorb.

Tags: , , , , ,

  • http://twitter.com/rawrb rawrb

    I REALLY need to make my own wordpress design. *sigh*

    • http://twitter.com/Metal_Drew Andrew Rizzitello

      You should. I’d use it on my site.

  • Plugmyduck

    Hey Rawb, why not download VirtualBox and install Ubuntu that way you can do your Linux test and not have to do any kind of reinstall =] hell you can do your window testing while still in OSX

    • http://rawrb.com Rob

      I’m not 100% familiar with casual Linux use. It’s scary! :D

      • Plugmyduck

        I would say: Linux is alright. sure it takes some time to get used to but eventually you’ll grow to like it. I mean I would say that but then it sounds like I’m trying to convince a girl to do something she doesn’t want to =]

  • Pingback: Ambition, cupcakes, and you. | Rawrb.com