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
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
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
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
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
@4 donate me usd20 then i will give u the template.
Posted on 10:56 PM, August 01, 2012
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
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
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
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