PHP: line of code only meant for internet explorer

Looking at my site in Firefox and in IE I saw a difference in the layout where I had text followed by a <DIV>.

Internet Explorer does not have a standard margin between the text and the DIV. So I had to find a way of adding space between them only in IE, not in the other browsers like Firefox.

The solution was that I added this line between the text and the <DIV>:



If IE reads this it will include the <p> tag, the other browsers will see it as comment and not display it.

You can also use this trick to hide comments (see older post). Just make sure you do not put dashes (like '-----') as the comment, this will invalidate the next line where you use this trick. So I used '****' instead in my comments to clearly mark pieces of coding.

CSS: text repeated outside of floating box <div>

One tedious problem I encounter when laying out my website was the strange behaviour of Internet Explorer (IE). Part of the text in the last box <div> was repeated outside the box. Firefox had no problem with it, but IE did.

The website has three columns each one box. First two float left and the last one floats right. In the last box there were three boxes stacked on top of each other (float top). From the last box the text was repeated underneath and all across the page outside of the box. Checking the code I could not find the problem.

Finally I found the reason and solution on internet. IE does not handle comments in your HTML (which I do a lot becaus it helps when programming) correctly.

When you have <!-- comments --> in your HTML, where the comment is larger than the width of the box, IE will repeat the last words from that box outside of the box. On top of that IE seems to be increasing the border with 3px all by itself.

The solution is to make the comments IE-proof by using the following comment tags:
<!--[if !IE]> comments <![endif]-->
IE will ignore the comments but you can still see them in your source.