Montana Jones

Ask Montana Jones

I am having an awful time at the moment with the xhtml break tag in IE.

I am trying to include a single line break, as opposed to the dreaded para break - but i find that in IE the break tag is actually producing a double line break - of course in sensible mozilla browsers this problem does not arise.

Have you ever come across this - or a fix for single line breaks?

Ahh, the mighty battle of coding for browser compatibility. I have many scars from this battle.

The first problem here is the lack of code or context. Line breaks do not live in a vacuum. I could try to recreate the problem with simple code like this:

And guess what. It tests out just fine. IE does not show double line breaks (paragraph breaks) from the <br /> tags. The problem lies somewhere in the complexity of your markup or the style sheet or both.

No, please do not send me your code to check over. You cannot afford my services. I charge ungodly amounts of money to fix other peoples code. Pretty much the only people I will inspect code for are the rich, the famous and my father. I owe dad a favor everyone else must pay cash. Reading and dealing with other peoples code can be a horrible pain. I charge big time for it.

What you are going to have to do is troubleshoot for yourself. This I can offer advice on.

In my experience the things that can cause a browser incompatibility bugs include:

• Overly complex markup
• Complex style sheets
• Lack of browser support for a particular CSS element.
• The IE box model bug
• Code being rewritten or restyled by the publishing system or server.

Fixing display issues, especially cross browser issues, is a pain. Web developers live in a strange murky world unlike traditional programming with debuggers that step through code and point out where your error is. It is also unlike the graphic arts world where the designer can count on an unchanging canvas. Some programming techniques of systematic elimination will help but you may also need some guesswork to get started.

Here are some common things that cause me problems.

So where is your code going to live? I know that some publishing systems (like Blogger for example) like to change code a little. Things like inserting a break tag at carriage returns so that people can write their posts without bothering with markup. If you are using a publishing system use 'view source' a lot to make sure what comes out is the same as what goes in.

IE bugs the crap out of me with how it renders white space in the code. It will take a gap or a carriage return between tags and put a space on the screen. For example a list of images that should sit right next to each other will have gaps between them if your code has white space.

This shows gaps between images because of the carriage return in the code:
<img src="image1.gif" />
<img src="image2.gif" />
<img src="image3.gif" />

This does not:
<img src="image1.gif" /><img src="image2.gif" /><img src="image3.gif" />

You should try rearranging tags to take out white space and see if that helps.

You should take a close look at your style sheets. Does your <br /> tag have any extra styling? What about the tags right around your line break? Look for style rules that play with padding and margins. If I need space around a page element I start my style sheets with padding and margin of 0 and carefully add to the dimensions while testing cross browser with each change. Because of IE's box model bugs I will rarely use both padding and margin at the same time. I like to keep one of them explicitly set to 0.

Have style rules that you are not familiar with? Look them up. Make sure they are doing what you think they should be doing. Check their browser support too while you are at it.

Try taking stuff out of context. Put a block of problem code in a test page and see how it renders without other page elements around it. Try it without the style sheet or even a different style sheet. Sometimes the styling of the div or column or table is causing a weird bug to munge your display.

Try systematically removing styles from the page.

Try taking a nap. Seriously. Walking away from a problem or sleeping on it has helped me find lots of bugs in my day. Similarly, try explaining your code to a colleague watching over your shoulder. I have found the "bug won't appear when someone else is watching" syndrome to be pretty common.

In my most hair pulling and frustrating moments of debugging one rule of thumb has always served me. "Try something else." It can get pretty easy to fixate on a style rule that you think is the problem child and you edit and test and tweak and test a fiddle and test and just pound on the refresh button with no results. Time to try something else. Look at the body style. Look at the div style. Check all your code for syntax errors. Try a validator. It can be hard when you think you have looked at the code from every possible angle and the bug is still laughing at you.

Keep plugging. If the bug is still there then there is always something else to try. Be creative and good luck

Montana Jones is not really a know it all but he plays one on the internet. Questions about web development, mathematics and vacation destinations are welcome at montanaj@gmail.com

Posted by: Montana Jones / 8:02 AM