How to Correct CSS for Internet Explorer 7
When designing a website, you might notice that the web page looks slightly different in every browser. This is because every browser reads code differently. The differences often have to do with the site's cascading style sheets (CSS). Coding CSS for Internet Explorer 7 can be a headache, because this browser has so many issues interpreting CSS code. For this reason, making a site look the same in Internet Explorer 7 as it does in other browsers takes a few tricks.
Other People Are Reading
Instructions
-
-
1
Keep CSS 3 out of your style sheets. While other browsers support the newest version of CSS, Internet Explorer 7 doesn't support much of it. It's best to keep CSS 3 code out of your websites until Internet Explorer has better support for it.
-
2
Use "text-align" when centering division tags. Division tags, more commonly known as "divs," separate sections of HTML code. In other browsers there's a cheat for centering divs in the CSS, which looks something like this:
.divtag {
margin-left: auto;
}
However, this doesn't work in Internet Explorer 7. If you want to center a div, you must add the following code to your CSS:
html, body {
text-align: center;
}
-
-
3
Fix margin problems. Internet Explorer's default margins are different from other browsers, which make website layouts look strange. Paste the following code in between the <head> and </head> tags in your HTML.
<!--[if IE]>
<style>
.marginfix {
margin: 5px;
padding: 10px;
}
</style>
<![EndIf]-->
The <!--[if IE]> tag shows this code to just Internet Explorer and straightens the margin issues out.
-
4
Adjust disappearing background images. Sometimes Internet Explorer 7 won't repeat background images properly, making the background stop halfway down the page. Adding "position: relative" to the CSS fixes this. The code looks something like this:
.box {
background: url('background.jpg');
position: relative;
}
-
5
Avoid the child selector hack; it won't work. In the past, if you had issues making a piece of CSS work for Internet Explorer, you could use a code like this:
html>body .divexample {
width: 100px;
height: 100px;
padding: 5px;
background: #000000;
}
Internet Explorer 6 and below don't understand "html>body"; so, when Internet Explorer sees that code, it skips it. This allows you to hide code from those browsers. However, this no longer works in Internet Explorer 7; so, don't use this code.
-
6
Use the "link rel" method of linking CSS to a web page rather than the "import" method. There are two ways of linking an external style sheet to an HTML document. One is the import code, which looks something like this:
<style type="text/css">@import "stylesheet.css";</style>
This method has fallen out of favor, because Internet Explorer doesn't always understand it. The following method is much more reliable:
<link rel="stylesheet" href="stylesheet.css" type="text/css" />
-
1
References
More Like This
Comments
-
there is no solution of my answer....
