Skip to content

July 2009

Google being evil … slightly?

So, I was looking at Google’s homepage in IE8 today and I noticed something funny. I was curious, so I decided to open up Google in the other major browsers to see if the funniness followed. Nope! Only in IE. Below are screenshots of the major browsers (save Google Chrome of course). See if you can spot the difference. I realize that Google can do whatever it wants with its one home page(even though Microsoft can’t do what it wants with its OS, but don’t get me started) and granted IE has its faults, but this seems a bit mean to me … especially since I was using IE8, which is the most standards compliant IE to date(meaning the features that they have implemented conform to industry standards). What do you think, is it “evil” to single out one competing browser in this way?
Firefox:
FF

Opera:
Opera

Safari:
Safari

IE8:
IE8

Clearing a float

I found out a cool way to clear a floated element the other day without having to use a clearing div/break or whatever your favorite method of clearing is. In fact you don’t have to add any extraneous html to achieve the clear. Give it a shot yourself. Here is the key …

.box {
    border: 1px solid #999999;
}
 
#header {
    width: 217px;
    margin: 0px 0px 5px 0px;
    padding: 5px;
}
 
#container {
    overflow: hidden; /*This is the magic.  It will clear the footer without needing a clearing div*/
}
 
#left {
    width: 100px;
    float: left;
    margin: 0px 0px 5px 0px;
    padding: 5px;
}
 
#right {
    width: 100px;
    float: left;
    margin: 0px 0px 5px 5px;
    padding: 5px;
}
 
#footer {
    width: 217px;
    padding: 5px;
}

The HTML

<html>
    <body>
        <div id="header" class="box">
            Header
        </div>
        <div id="container">
            <div id="left" class="box">
                Left
            </div>
            <div id ="right" class="box">
                Right
            </div>
        </div>
        <div id="footer" class="box">
            Footer
        </div>
    </body>
</html>