HTML progress bar with border-radius and background gradient
Question
I need to make a progress bar just like this:
http://kashqool.com/files/progress-bar.png
It must work in (IE6+, Chrome 3+, Firefox 5+, Opera 9+). So for border-radius in IE i added ie-css3.htc but the problem - in IE when i added border-radius and background with linear gradient the bordoer radius will not be shown. - Is it possible that when DIV width is 43% will the black side will not shown. And when will be 100% it will be shown. Just like picture.
this is the code:
<!DOCTYPE HTML>
<html>
<head><title>Level 1</title>
<style type="text/css">
html,
body{
margin:0;
paddding:0;
}
h3{
padding:0;
`margin`:0;
}
.progress_bar1{
behavior:url(ie-css3.htc);
background-color:white;
position:relative;
width:700px;
height:30px;
border:1px solid black;
border-radius:8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
float:left;
padding:4px;
}
.first_bar{
behavior:url(ie-css3.htc);
background-color:white;
width:100%;
height:28px;
float:left;
z-index:1;f
}
.div_100{
background-color:red;
width:100%;
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr=#FF8A2BE2, endColorstr=#FF000000);
background-image: -webkit-gradient(
linear,
left top, right top,
from(blueviolet),
to(black)
);
background-image: -webkit-linear-gradient(
left,
blueviolet,
black
);
background-image: -moz-linear-gradient(
left,
blueviolet,
black
);
background-image: -o-linear-gradient(
left,
blueviolet,
black
);
background-image: linear-gradient(
left,
blueviolet,
black
);
border-radius:8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
height:28px;
float:left;
}
</style>
</head>
<body>
<h3> Level 1 </h3>
<div class="progress_bar1">
<div class="first_bar">
<div class="div_100"></div>
</div>
</div>
</body>
</html>
2 answers
solution1
2 2012-07-03 13:23:37
I'm only guessing here, but I would think combining a background gradient and rounded corner hack would probably result in some odd behavior.
I would just simply omit rounded corners for IE6-8. It's called 'progressive enhancement'. Better browsers get better experiences. The progress bar will still 'work' for IE6-8, they just will have square corners instead of rounded ones. The point of the object - the amount of progress being made - will still work for users. Your users won't go from IE6 to Chrome and compare the progress bar. Just let it go.
See: http://dowebsitesneedtolookexactlythesameineverybrowser.com/
solution2
0 2012-07-03 13:29:38
Internet Explorer 6 is quite old and doesn't support css3. Either
- use CSS3Pie as ajm suggested (I'm surprised that even works),
- use javascript,
- use rounded image corners,
- or simply accept that it's too old and users should updater their browser.
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.