Border-radius will not work in IE9
Question
I have a website and my container box has rounded corners, the rounded corners will work in all other browsers except IE9. Here is the link to my website: http://www.canadiannaturephotographer.com/~teacher/Kelsey/index.html and here is the html code:
<!doctype html>
<head>
<html lang="en">
<meta charset="utf-8">
<meta name="description" content="Kelsey's fishing site provides information on locations to fish, fishing equipment, and fish trophies.">
<meta name="keywords" content="fishing, site, net, bait, catch, release, trophy, fish, guide, locations, location, best, educational, tutor, instruction, equip, equipment, contact, feedback, about, how, to, fishing rod, rod, fly, fly-fish, fly fishing, hook, angler, angle, angling, fishes, wire, product, electronic, gps, navigation, vest, beer, pike, salmon, wall-eye, whitefish, white fish, trout, rainbow, herring, mountain, nature, valley, river, lake, ocean, shore, coast, dock, fly fish, worm, maggot, dry, ice, season, winter, fall, summer, spring, price, best, spot, to, go, calgary, alberta, canada, north america, travel, boat, motor, buoyancy, float, floaty, bobber, bob, bobbing, weight, reel, reeling, in, big, giant, huge, massive, large, aquatic, life, aqua, water, sand, tackle, tackle box, box, live, insects, insect, hunt, outdoors, outdoorsman, wildlife, food, cook, wild, out,">
<title>About ~ Kelsey's Fishing Site</title>
<link href='http://fonts.googleapis.com/css?family=Scada' rel='stylesheet' type='text/css'>
<link href='cssfishsite.css' rel='stylesheet' type='text/css'>
<link rel="icon" type="image/ico" href="images/faviconn.ico">
</head>
<body>
<div id="container">
<header><center><img src="images/fishing-banner.jpg" class="topround"></center></header>
<nav>
<ul>
<li><a class="navbarr" href="index.html">About</a></li>
<li><a class="navbarr" href="fishingtrophies.html">Trophies</a></li>
<li><a class="navbarr" href="fishinglocations.html">Locations</a></li>
<li><a class="navbarr" href="fishingequipment.html">Equipment</a></li>
<li><a class="navbarr" href="contact.html">Contact</a></li>
<li><a class="navbarr" href="feedback.html">Feedback</a></li>
</ul>
</nav>
<article>
<img id="trophyp" src="images/trophypike.jpg" width="200" height="340" alt="Very large trophy pike" title="Massive trophy pike" align="left"><p id="mainpagetitle">Featured Trophy Fish</p>
<p class="paratag"><span class="description1">Length:</span> 56"</p>
<p class="paratag"><span class="description1">Weight:</span> 55 lb</p>
<p class="paratag"><span class="description1">Location:</span> Turtle Lake, Saskatchewan</p>
<p class="paratag"><span class="description1">Story:</span> This fish was caught in the open waters of Turtle lake when the fisherman caught a 36" Pike. As he was reeling the pike in, the 50 lb pike tried to eat it! The fisherman caught them both in the same net. <br /><br /> Wow!!</p>
<br />
</article>
<br /><br />
<br />
<hr />
<br />
<div id="box32"><img id="trophyp2" src="images/E-_Kelsey'sfishingsite_images_2110612-636818-fresh-bright-trout-fish-isolated-on-a-white-background.gif" width="240" height="160.5" alt="bright trout fish" title="Fresh Bright Trout" align="right"><p><div id="textbox2"><span class="darkblue">Welcome!</span><span class="fonteh"> This website has been created to educate user's on fishing locations within Alberta, what fishing gear to utilize, etc. This website also allows users to post their trophy fish with a chance to be featured on the homepage. I hope you enjoy the website and please send feedback!</span></p></div></div>
<br />
<br />
<hr />
<p id="thirdpagetitle">Submit Your Trophy Fish!</p>
<form method="post" action="trophyfishsubmit.php" align="center">
<fieldset style="padding: 10px;" bgcolor="white"><div class="whiteformbox"><br />
<center>Name: <br /><input type="text" name="name" id="name"> <br /><blockquote></blockquote>
Location: <br /><input type="text" name="location" id="location"><br /><blockquote></blockquote>
Fish: <br /><blockquote></blockquote>
<input type="text" name="fish" id="fish">
<br />
<p>Story: </p>
<textarea cols="50" rows="9" name="story"></textarea><br />
<p>Please send your photos to my E-mail at: <br /><br />
<a href="mailto:k.nealon@hotmail.com">K.nealon@hotmail.com</a></p>
<br />
<input type="submit" name="submit" value="Send">
<p><strong><font size="2">Privacy Policy:</strong> All information gathered in this form will be kept strictly confidential and will not be exploited in any way.</font></p></center><div></fieldset>
</form>
<br />
<br /><br />
<footer><p align="center">Last Updated October 4th, 2013 ~ Calgary, Alberta</p></footer>
</div><!-- this is the container end div tag -->
<br />
<center><font face="verdana"><a class="sitemap" href="sitemap.html">Sitemap</a></font></center>
</body>
</html>
Now here is the CSS:
#container {
width: 761px;
background-color: beige;
border-radius: 10px;
border: 1px solid black;
margin: 0 auto;
font-family: Verdana, Arial, Sans-serif;
}
body {
background-color: white;
background-image: url("images/clouds.jpg");
background-repeat: no-repeat;
background-position: top;
}
.description1 {
color: #2caeec;
}
.paratag2 {
padding-left: 180px;
width: 410px;
}
.paratag {
padding-left: 280px;
}
nav {
font-style: bold;
font-size: 0.8em;
background-color: #b1b1b1;
color: red;
margin-right: 0.07px;
margin-top: -3px;
}
#box32 {
width: 750px;
}
#textbox2 {
width: 400px;
padding-left: 50px;
height: 150px;
}
.darkblue {
color: darkblue;
}
.fonteh {
color: #2caeec;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
float: left;
}
.header1s {
color: #2caeec;
}
.boxie {
border: 10px solid black;
border-radius: 5px;
width: 300px;
height: 260px;
}
.stang {
color: #2caeec;
}
#information1 {
width: 430px;
margin: auto;
}
#information24 {
width: 600px;
margin: auto;
color: #2caeec;
font-size: 1.1em;
}
#mainpagetitle {
font-family: 'Scada', sans-serif;
font-weight: bold;
font-size: 3.0em;
color: #2caeec;
padding-left: 270px;
}
#mainpagetitle2 {
font-family: 'Scada', sans-serif;
font-weight: bold;
font-size: 3.0em;
color: #2caeec;
padding-left: 365px;
}
#sitemap1 {
font-family: 'Scada', sans-serif;
font-weight: bold;
font-size: 3.0em;
color: #2caeec;
}
#thirdpagetitle {
font-family: 'Scada', sans-serif;
font-weight: bold;
font-size: 3.0em;
color: #2caeec;
padding-left: 100px;
}
#thirdpagetitle1 {
font-family: 'Scada', sans-serif;
font-weight: bold;
font-size: 3.0em;
color: #2caeec;
}
a.navbarr:link {
display: block;
width: 122.6666666666697px;
font-weight: bold;
color: beige;
background-color: #2caeec;
text-align: center;
padding: 1px;
text-decoration: none;
text-transform: uppercase;
border: 1px outset gray;
border-radius: 5px;
} /* border optional */
a.navbarr:visited {
display: block;
width: 122.6666666666667px;
font-weight: bold;
color: beige;
background-color: #2caeec;
text-align: center;
padding: 1px;
text-decoration: none;
text-transform: uppercase;
border: 1px outset gray;
}
a.navbarr:hover {
display: block;
width: 122.6666666666667px;
font-weight: bold;
color: beige;
background-color: #b1b1b1;
text-align: center;
padding: 1px;
text-decoration: none;
text-transform: uppercase;
border: 1px outset gray;
} /* border optional */
a.navbarr:active {
background-color: #b1b1b1;
color: beige;
}
a.sitemap:link {
font-weight: bold;
color: #2caeec;
text-align: center;
padding: 1px;
text-decoration: none;
} /* border optional */
a.sitemap:visited {
font-weight: bold;
color: #2caeec;
text-align: center;
padding: 1px;
text-decoration: none;
}
a.sitemap:hover {
font-weight: bold;
color: #b1b1b1;
text-align: center;
padding: 1px;
text-decoration: none;
} /* border optional */
a.sitemap:active {
color: #b1b1b1;
}
article {
margin-bottom: 0px;
margin-top: 30px;
}
header {
padding-bottom: 0;
margin-bottom: 0;
}
footer {
background-color: #2caeec;
color: beige;
border-radius: 0 0 10px 10px;
margin-bottom: -20px;
}
.padding {
padding: 10px;
}
form {
margin-bottom: -16px;
}
fieldset {
width: 500px;
margin: auto;
}
.clearfloat {
clear: both;
}
.topround {
border-radius: 10px 10px 0px 0px;
}
p {
font-family: arial;
font-size: 1em;
padding-left: 30px;
padding-right: 30px;
margin-bottom: 20px;
}
#feedbackhead {
font-family: 'Pinyon Script', cursive;
margin: auto;
font-size: 3.0em;
color: #2caeec;
}
.fsSubmitButton {
border-top: 2px solid #a3ceda;
border-left: 2px solid #a3ceda;
border-right: 2px solid #4f6267;
border-bottom: 2px solid #4f6267;
padding: 10px 20px !important;
font-size: 14px !important;
background-color: #2caeec;
font-weight: bold;
color: beige;
cursor: pointer;
}
.fsSubmitButton:hover {
border-top: 2px solid #a3ceda;
border-left: 2px solid #a3ceda;
border-right: 2px solid #4f6267;
border-bottom: 2px solid #4f6267;
padding: 10px 20px !important;
font-size: 14px !important;
background-color: beige;
font-weight: bold;
color: #2caeec;
cursor: pointer;
}
#trophyp2 {
padding-right: 50px;
positon: absolute;
bottom: 555px;
}
#trophyp {
padding-left: 35px;
}
#trophyd {
padding-left: 25px;
}
#trophyp32 {
padding-left: 35px;
}
PS: The banner has a slight space between the container border and the banner picture, wondering how I could fix that?
1 answers
solution1
0 ACCPTED 2013-10-20 02:25:52
Fix the sequence in your HTML opening sequence, it should be
<!doctype html>
<html lang="en">
<head>
But as far as I know (and I'm not a browser expert) there actually are isues with IE and border-radius.
In case your IE actually switches to compatibility mode you can inhibit this by transmitting this response header:
header('X-UA-Compatible: IE=edge');
Note that this MUST be done server side, a META header will be of no use in this case as it comes too late.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to use feature detection to know if browser supports border-radius? (Including IE9)
Border-Radius for PDFMake
Is there a way to get border-radius and gradient backgrounds in IE?
Border-Radius for DIV element is not working in IE8
border-radius if there is an image on the border
Creating diagonal border-radius
Border-radius on canvas elements
Events in the corners with border-radius
Bootstrap Panel Border-Radius
google charts timelines element border-radius
Related Tags