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.
Showing posts with label IE. Show all posts
Showing posts with label IE. Show all posts
Thursday, 3 May 2007
PHP: blanc white page in IE and empty source page
I had problems with viewing my website in IE 6. Every now and then it displayed randomly a white page, without any source code but the notice 'done'. Searching on internet I found some comments on session_start that IE 6 does not handle this correctly (related to cookies and mod_gzip) which results in blank pages. However I do not use session_start so this was not hte case.
Reviewing my coding carefully I found some </p> tags and a </div> tag while there was no DIV to close.
Fixing these seems to have solved the problem. So basically a question of neat programming.
Reviewing my coding carefully I found some </p> tags and a </div> tag while there was no DIV to close.
Fixing these seems to have solved the problem. So basically a question of neat programming.
Monday, 19 February 2007
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.
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.
Subscribe to:
Posts (Atom)