Problem :
Website layout display correctly on all other browsers except Internet Explorer.
Solution :
You can make your website displayed correctly on IE and all other browsers by using the css code below :
* { margin: 0; padding: 0;}
p { word-wrap: break-word; }
.clear { clear: both; }
.clear:after { content: ""; display: block; height: 0; width: 100%; }
a:active { -moz-outline-style: none; outline: none; }
:focus { -moz-outline-style: none; }


for
<li>, please use the css code below :
vertical-align: bottom;
display: inline;



Problem :
<div name="Apple" style="float:left;">
<span name="Banana" style="float:right;"></span>
</div>

If you write code above, the Banana will appear below Apple for IE. Banana will appear at the same line for all other browsers.
Solution :
<div>
<span name="Apple" style="float:left;"></span>
<span name="Banana" style="float:right;"></span>
</div>



Problem :
IE cannot display the picture but all other browsers can.
There are two possible solutions :
1 - It is because the picture is CYMK color mode, not RGB color mode. IE cannot display CYMK color mode picture. You can use picture editor to change the CYMK color mode of the picture to RGB color mode. If you are using Photoshop, you can open the picture by Photoshop, then click "Image" from top menu, then click "Mode", then click "RGB Color", then save the picture. More info at : http://ye5.blogspot.com/2010/12/ie-cannot-display-picture.html

2 - It is because the css code has syntax error. IE is case sensitive, but all other browsers are not sensitive. For example,
.mypic{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjruyNgZBe9p-PePoaNcHivm-wXr13CCpTQCKgyi2eugKU_-kBn7mMR-Q9mpjLQLHrGM4E_UTT1MgJfMKxisHVLx6DuEH3Y1VVvC2-xU14pmbDS5znQioSksaxEx5faIwgACsuJjqdg5J0/s1600/comm.jpg)left no-repeat; }
From the code above, we must put a spacing before the word "left".


line-height:18pt; is inconsistent on IE, Firefox and Chrome. How to make it consistent on all browsers?
Answer : Change pt to px or em.



html checkbox display different on IE and Firefox as default just the same as picture above. You can make them become the same by writing the following css codes :

input[type=checkbox]{ /** if you put input without [type=checkbox], this css will effect on your buttons and textboxes too. **/
width: 14px;
height: 14px;
padding: 0;
margin:0;
vertical-align: bottom;
position: relative;
top: -1px;
}



Please write a comment below if you have any other case about IE display the website layout wrongly.


Posted by Zac1987 on 29 December, 2010

9 comments

  1. Anonymous Said,

    Your style is unique in comparison to other folks I've read stuff from. Thank you for posting when you've got the opportunity, Guess I will just book mark this blog. payday loans
    Also see my website - check into cash

    Posted on 10:52 AM, June 23, 2012

     
  2. Anonymous Said,

    There is certainly a great deal to learn about
    this issue. I love all the points you've made. quick loans
    Also see my web page - myquickloans.co.uk

    Posted on 8:27 PM, July 09, 2012

     
  3. Anonymous Said,

    I used to be able to find good advice from your blog posts.
    HERE
    my page :: raspberry ketone

    Posted on 12:02 PM, July 16, 2012

     
  4. Anonymous Said,

    I really love your website.. Great colors & theme.

    Did you make this site yourself? Please reply back as
    I’m attempting to create my very own site and would love to
    find out where you got this from or what the theme is called.
    Cheers! visit this link
    Also visit my site ; live tv

    Posted on 10:52 PM, August 01, 2012

     
  5. zac1987 Said,

    @4 donate me usd20 then i will give u the template.

    Posted on 10:56 PM, August 01, 2012

     
  6. Anonymous Said,

    I was able to find good information from your blog articles.

    extra resources
    Also see my page > free movies and tv shows online

    Posted on 12:02 AM, August 02, 2012

     
  7. Unknown Said,

    http://www.papayatoursandtravels.com/

    Hi This is my website....I have this problem where “Join our mailling list.....” icon is not showing correctly in IE where as it’s correctly displayed in Firefox. Any help is much appreciated

    Posted on 6:04 PM, February 26, 2013

     
  8. zac1987 Said,

    i tested it on ie 7 and there is no problem, i guess ur ie is outdated.

    Posted on 2:47 AM, February 27, 2013

     
  9. Anonymous Said,

    It's awesome for me to have a web page, which is helpful designed
    for my knowledge. thanks admin

    Feel free to surf to my web blog; blackberry curve 8520 violet orange

    Posted on 1:25 PM, November 15, 2013

     





Enter your email address:

Subscribe in a reader

Follow zac1987 on Twitter

Donation

If you feel my website is informative and it is useful for you, please donate some money to support me or buy me a drink. I will continues this good works. Thank you.