One of our visitors asked for help with two problems. The first that his navbar looked different in Explorer and Firefox. The second that in Firefox the borders at the sides of his main column stopped short of the bottom of the page.

The first thing always to do when you have problems with a layout/design, is to validate the site. This one came up with 20 errors, although they were all things like missing quotation marks around dimensions, img tags closed incorrectly and so on. Nothing likely to be causing these problems, but we needed to know that.

At least that was true until around line 202 when a look back at the code suggested that the sidebar could do with some cleaning up. The first thing to do is to indent the code after every opening div, ul, li, etc tag: ie every opening tag and close down an indent when we find each closing tag. The graphics below should make what I mean more clear.

Doing this revealed several problems (which is why I always recommend coding your pages like this from the off. Unfortunately, although our code would now validate except for a javascript issue (which is not the cause of these layout problems), correcting these things has caused no visible change in the layout. So next we validate the CSS.

That also showed up an error and correcting that produces a slight shift in the design, but still doesn’t correct our main fault. In fact it makes the problem with the navbar worse. Nothing for it apparently but to look at our CSS in more detail. But before doing that, take a look at the header again: see how in Firefox the title sits right on top of the navbar, but in Explorer there is a gap underneath. A clue Watson!

#headerimg {
/*	padding: 5px;  Not good because Explorer adds padding to dimensions, so delete */
	height: 100px;
	width: 500px; /* changed from 510px because of the addition of padding below */
	}

#header {
	padding: 5px; /* changed from zero */
	}

Write 100 times: IE6 adds paddings to widths and heights, Firefox does not. Use margins when you can, padding when you must and always add it to the parent container (when there is one). Which in this case is #header. You could use hacks to resolve browser differences, but hacks should be a last resort and avoided unless absolutely necessary.

As for the yellow border thing, unfortunately, the WordPress default (Kubrick) template is not the easiest one for CSS/WordPress novices to handle. Splitting up a CSS file into sections, color, structure, etc., is reasonable in itself, but confusing to beginners. I’m guessing that part of this webmaster’s problems arose, especially after his page didn’t show up as expected, because he would make an intial change to (for example) the #headerimg section near the top of his file, but spot the entry further down first when he was trying to correct the problem, and put the correction there. Especially when it came to the border question, there were corrections all over the place: even a style addition to the HTML header (header.php) itself.

If you want to stay with the original CSS layout, be sure that you only make color changes in the Color section and nowhere else, structural changes in the Structure section and nowhere else, etc. You may find it easier to cut and paste the elements of the CSS file so they are ordered as they are used in the page and so that there is only one reference to each entity.

Anyway, there was a container around the whole content area - #page - and obviously this was the one which had to carry the border parameters.

There was no need for this in header.php, so it was deleted:
<style type="text/css" media="screen">
#page { background: #4E130C; border: none; }
</style>

In the "Typography and Colors" section
#page {
	background-color: #4E130C; /* color changed from white */
	border: 1px solid #FF0; /* color changed from #4E130C */
	text-align: left;
	}
	
In the "Structure" section we deleted the lines which would have over-ridden the instructions we have higher up the page in the section above.
#page {
	background-color: white; /* this line was deleted */
	margin: 20px auto;
	padding: 0;
	width: 760px;
	border: 1px solid #959596; /* this line was deleted */
	}

We were almost there at this point, except that double borders were appearing in certain places. Looking closer, we saw separate borders had been added around all the main page elements. For example:

#header {
	border-left : 1px solid Yellow;
	border-right : 1px solid Yellow;
	border-top : 1px solid Yellow;
}

All that was needed was to delete the offending lines wherever they appeared.

Sometimes when a page doesn’t show as expected, you can glance over the CSS and immediately see what is wrong. This was more difficult, because there were a number of problems and they interacted. That is when a methodical approach, frustrating as it is when at first you don’t find problems - at least, not problems relating to the issue you are trying to track down - is always the best way to go.

And I cannot stress enough the importance of validating everything - HTML, CSS and feeds - when you are running a blog. Not only will doing so help to make sure your own site appears as you want it, but when people subscribe to your feeds, you will be sure they too see what you intended.

Another point this webmaster’s problem illustrates is the importance of coding for compliant browsers and only when you are done, check - and if necessary fix - for IE6. Explorer let him get away with mistakes which would have shown up immediately in Firefox and that would have avoided the complications caused by then being able to compound those mistakes.