One of the biggest challenges of web development is making websites that are compatible in all of the major internet browsers. The main browsers are Internet Explorer, Firefox, Safari, Opera and Chrome. It can be extremely difficult to make everything work identically in all browsers, especially as your web design becomes more complicated, but I don’t think it’s impossible or that it always has to consume your entire budget on a web project.
With that said, there have been times where I want to boycott each browser, but with a little focus and research, there’s always a fix!
I see a lot of novice developers just learning how to code tableless designs complain that their website works perfectly in Firefox, but then completely breaks in Internet Explorer. It’s one thing if your website is totally destroyed in IE6. I get it. It takes a lot of practice to understand why IE6 does what it does, and none of us will ever fully understand what Microsoft was trying to accomplish there. And even though I do always try and support IE6, I don’t expect everyone to do that. It’s a personal call from developer to developer.
With that said, there’s really no reason why a website you develop would work in the latest version of Firefox, but then be totally destroyed in the latest version of Internet Explorer. This just means that there are clearly some things that you don’t understand, and there’s absolutely nothing wrong with that; this is how you learn. Just don’t bitch about it in a forum and curse IE because you don’t understand basic web development concepts work, like the box model, for example.
Oh the box model, you say?
Yeah, I just threw it out there! We’re getting closer to the reveal of the Bobich Law of Browser Compatibility.
For those of you that don’t know, the CSS box model describes the boxes that are formed around elements of content in a Web page. Every element in a Web page is in a box or is a box. The boxes on Web pages are constrained by rules defined by the CSS box model.
Well, I already know about the CSS box model, so what’s your point?
This is all nothing new, right? Many developers know all about the CSS box model, but choose not to think about it until they see a broken website in IE.
I used to have a partner at the Advertising agency I worked at that was so adamant about W3C compliance that he would always say with his nose pointing up to the sky, “I design for W3C standards only. IE comes later.” Then after the site was essentially finished, he’d view his broken site in Internet Explorer and start going through and making changes in a stylesheet called with an IE conditional statement. No offense to him if he ever reads this, but while neatly commented, his HTML/CSS was quite sloppy and he spent way too much time trying to configure this sloppy CSS file for IE.
But would you believe there’s a way for your website to have totally W3C compliant CSS while still having all of your boxes be the same width in both Firefox and Internet Explorer?
So what the hell is it already?
It’s so simple, you’re going to be embarrassed I had to tell you, but this is a rule I’ve developed for myself and I always follow whenever I code anything. And finally, this is what I’ve dubbed the Bobich Law of Browser Compatibility:
Never set a width to a box that has right/left padding or right/left border, and conversely, never set a height to a box that has top/bottom padding or top/bottom border.
Easier said than done, Jason! I need padding and widths on all my divs, how will I ever trudge on?
Don’t worry, friends. I’m not going to just throw out something as mind blowing as the Bobich Law of Browser Compatibility without giving you some helpful information on how to work with it.
Keep in mind that many developers might disagree with the methods I’m about to share because they could be said to add too much cumbersome HTML markup to your site, but I don’t care. If you’ve purchased any of my Theme Forest themes, you’d know that I write extremely clean HTML and CSS that looks almost identical in most browsers.
Basically, on all of my major layout divs that need a width, I also add in a nested div that will have any padding or borders associated with it. Here is an example of a box that will be 300px no matter if it’s viewed in Firefox, Safari, Chrome, Opera or even Internet Explorer.
This is a box that’s 300px wide in all browsers with 10px of padding and a 1px border.
Here’s the code that produces the above box:
<style type="text/css">
.example-box {
width: 300px;
background: #f2f2f2
}
.example-box .pad {
border: 1px solid #ccc;
padding: 10px
}
</style>
<div>
<div>
This is a box that's 300px wide in all browsers with 10px of padding and a 1px border.
</div><!-- .pad (end) -->
</div><!-- .example-box (end) -->
Now, I’m not saying you need a div inside of every div in your website. If I were saying this, I’m sure Nick La would slap me across the face! Nick La runs the super awesome web design blog, WebDesignerWall. He’s even written a post about not having nested divs all over the place, and this is why I made sure to say I do this only on my major layout when I need to. So, I definitely agree that wherever possible, as Nick stresses in his post, that you should avoid extra divs.
For example, say you have some HTML like this:
<div class=”box”>
<h2>The Title</h2>
<p>The content…</p>
</div>
If you have a set a width to that “box” div and you want there to be padding within it, there’s no need to put another nested div inside when you can just add padding.
