I have of compatibility issue of my website working on internet explorer versions 9 and above only. I searched the net but I got no answer. I got something close, if I add this line:
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
The website works on Internet version 8 and below, but not on 9 and above. And if i remove it, it goes the other way round (works on internet versions 9 & above but not 8 & below).
html:
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="main css.css">
<link rel="stylesheet" type="text/css" href="top nav css.css">
<title>Universal Stationary</title>
</head>
<body>
<center>
<div class=transbox>
<table border="0" cellpadding="3" cellspacing="5" cols="2" width="100%" height="100%">
<tr align="center">
<td height="15%"><img src="banner.gif" width="90%"/></td>
</tr>
<tr height="1%">
<td colspan="2">
<div class="example">
<ul id="navigationbar">
<li><a href="homepage/home.html" target="mainframe">Home</a></li>
<li><a href="productspage.html" target="mainframe">Products</a>
<ul>
<li><a href="penbrand/penbrands.html" target="mainframe">Pens</a></li>
<li><a href="pencilbrand/pencilbrand.html" target="mainframe">Pencils</a></li>
<li><a href="staplerbrands/staplerbrand.html" target="mainframe">Staplers</a></li>
<li><a href="sharpenerbrand/sharpenerbrand.html" target="mainframe">Sharpeners</a></li>
<li><a href="eraserbrand/eraserbrand.html" target="mainframe">Erasers</a></li>
<li><a href="photocopypaperbrands/photocopypaperbrand.html" target="mainframe">Photocopy Papers</a></li>
<li><a href="cartridgebrand/cartridgebrand.html" target="mainframe">Cartridges</a></li>
</ul>
</li>
<li><a href="comparepage/comparepage.html" target="mainframe">Compare</a></li>
<li><a href="dealofthemonthpage/dealofthemonthpage.html" target="mainframe">Free Monthly Coupons</a></li>
<li><a href="aboutuspage/aboutus.html" target="mainframe">About Us</a></li>
<li><a href="contactuspage/contactus.html" target="mainframe">Contact Us</a></li>
<li><a href="feedbackpage/feedback.html" target="mainframe">Feedback</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<td align="center" colspan="2" height="*">
<iframe src="homepage/home.html" height="100%" width="100%" frameborder="0" name="mainframe"></iframe>
</td>
</tr>
<br>
<tr>
<td align="center" colspan="2" height="11%"><p align="left">Our Brands:</p>
<marquee direction="left" behavior="alternate">
<img src="brands/3m_logo_19.jpg"/>
<img src="brands/bic_18.jpg"/>
<img src="brands/canon_logo_21.jpg"/>
<img src="brands/casio_27.jpg"/>
<img src="brands/citizen_74.jpg"/>
<img src="brands/double-a-logo+slogan_30.jpg"/>
<img src="brands/epson_64.jpg"/>
<img src="brands/hp_logo_39.jpg"/>
<img src="brands/logo_paperone_putih_38.jpg"/>
<img src="brands/max-logo_37.jpg"/>
<img src="brands/pelikan_41.jpg"/>
<img src="brands/stz_51.jpg"/>
</marquee>
</td>
</tr>
</table>
</div>
</center>
</body>
</html>
CSS:
body {
background-image:url(background.jpg);
background-size:cover;
height:auto;
width:auto;
}
div.transbox{
width:inherit;
height:1450px;
margin-top:5px;
margin-left:70px;
margin-right:70px;
margin-bottom:50px;
padding-bottom:10px;
padding-left:10px;
padding-right:10px;
padding-top:0px;
border: 1px solid black;
background-color:rgba(230,230,255,.9);
filter:alpha(opacity=90);
display: table;
}
iframe{
min-height:1000px !important;
}
TOP NAVIGATION MENU CSS:
/* main styles */
#navigationbar {
display:table;
width:1000px;
margin:0 auto;
padding:0;
background:#00C;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
box-shadow:0 2px 2px rgba(0,0,0, .5);
-moz-box-shadow:0 2px 2px rgba(0,0,0, .5);
-webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);
}
#navigationbar li {
margin-left:26px;
margin-bottom:5px;
margin-top:5px;
float:left;
position:relative;
list-style:none;
}
#navigationbar a {
font-weight:bold;
color:#e7e5e5;
text-decoration:none;
display:block;
padding:5px 15px;
clear:both;
font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
text-shadow:0 2px 2px rgba(0,0,0, .7);
}
/* onselect menu element */
#navigationbar .current a, #navigationbar li:hover > a {
background:#09F;
color:#000;
border-top:1px solid #f8f8f8;
box-shadow:0 2px 2px rgba(0,0,0, .7);
-moz-box-shadow:0 2px 2px rgba(0,0,0, .7);
-webkit-box-shadow:0 2px 2px rgba(0,0,0, .7);
text-shadow:0 2px 2px rgba(255,255,255, 0.7);
}
/* sub-levels */
#navigationbar ul li:hover a, #navigationbar li:hover li a {
background:none;
border:none;
color:#000;
}
#navigationbar ul li a:hover {
background:#00C;
color:#fff;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
text-shadow:0 2px 2px rgba(0,0,0, 0.7);
}
#navigationbar ul li:first-child > a {
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
}
#navigationbar ul li:last-child > a {
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-left-radius:10px;
-webkit-border-bottom-right-radius:10px;
}
/* drop-down menu */
#navigationbar li:hover > ul {
opacity:1;
visibility:visible;
}
#navigationbar ul {
opacity:0;
visibility:hidden;
padding:0;
width:175px;
position:absolute;
background:#09F;
border:1px solid #7788aa;
display: table;
margin: 0 auto;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
box-shadow:0 2px 2px rgba(0,0,0, .5);
-moz-box-shadow:0 2px 2px rgba(0,0,0, .5);
-webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);
-moz-transition:opacity .25s linear, visibility .1s linear .1s;
-webkit-transition:opacity .25s linear, visibility .1s linear .1s;
-o-transition:opacity .25s linear, visibility .1s linear .1s;
transition:opacity .25s linear, visibility .1s linear .1s;
}
#navigationbar ul li {
float:none;
margin:0;
}
#navigationbar ul a {
font-weight:normal;
text-shadow:0 2px 2px rgba(255,255,255, 0.7);
font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
}
#navigationbar ul ul {
left:160px;
top:0px;
}
Two problems:
- Compatibility issues on IE
- The top navigation drop-down list doesn't work on IE
