The title of this post is ridiculously stupid, but stick with me, there’s a point here. One of the biggest challenges of web development is making websites that are compatible in all of the major browsers, wouldn’t you agree? I definitely agree that it can be extremely difficult to make everything work identically in all browsers, especially as your design becomes more complicate, 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 slap every browser upside the head, but with a little focus and research, there’s always a fix!
I see a lot of novice developers, beginning authors on Theme Forest, and 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 generally try and support older IE’s, I don’t expect everyone to do that. It’s a personal call from developer to developer, depending on the situation you’re in.
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.
Here’s the code that produces the above box:
This is a box that's 300px wide in all browsers with 10px of padding and a 1px border.
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:
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 to the <h2> and <p> tags.
The idea here is to follow my silly Bobich Law of Browser Compatibility while still trying to write as little code as possible.
While we’re at it, here’s another quick tip for writing easy-to-manage CSS that will help:
Don’t declare a width on an element when you don’t have to.
In my opinion, putting widths on every div within a div means that most likely you don’t fully understand how margin and padding work or you’re not planning out your design very well before coding. Before you code, you should have a plan. You should know that if you have a column that’s 300px wide with 10px of padding and you place a nested div inside of that, it will automatically fill 100% of the width, resulting in a div that’s 280px. That’s a very basic example, but you could see how this could get really confusing and out of hand if you have many boxes within boxes and you’re not planning these things out.
These are some very elementary tips, I know, but they might help many developers who are either just learning tableless design or just that have never thought of the obvious, I guess.