In my companies website i regularly use the DIV way to make squares appear with rounded corners. In IE6 this gives a weird problem, though. Also other DIV's that have a background-color or -image appear to have this problem.
This is the code I use to make these DIV's:
Code:
<div class="roundcolWrap">
<div class="top"><div class="topleft"></div></div>
<div class="middle">
--- gezever ---
</div>
<div class="bottom"><div class="bottomleft"></div></div>
</div>
These DIV's all have their own class to give them a background-color or image and location inside their wrappers:
Code:
.roundcolWrap .topleft, .roundcolWrap .bottomleft {
height: 7px; }
.roundcolWrap .topleft {
background: url(../images/bg_rndblcktopleft.gif) no-repeat left top; }
.roundcolWrap .top {
background: url(../images/bg_rndblcktopright.gif) no-repeat right top; }
.roundcolWrap .bottomleft {
background: url(../images/bg_rndblckbottomleft.gif) no-repeat left bottom; }
.roundcolWrap .bottom {
background: url(../images/bg_rndblckbottomright.gif) no-repeat right bottom;
clear: both; }
.roundcolWrap {
background-color: #FDF5E8;
margin-bottom: 5px;
margin-top: 5px;
border-width: 0 !important;
padding: 0 !important; }
.roundcolWrap div.middle {
margin: 0;
padding-left: 10px;
padding-right: 10px; }
This is the effect what you'll get in IE6:
Also strange is, when you open the Notepad app and move it across the DIV it changes it's background. One time it just removes the background completely and when you move the Notepad window back over it, it's back again.
Did anybody have this same problem before? OR someone who already knows the solution to this?
Right now I have temporarily solves this problem by completely wrapping these DIV's in one total TABLE. Not the best of all solutions, but for the time being the only one.
This is the concerning URL: http://www.chinesesavvy.com/savvy/index_demo_01
(middle column, second block has the rounded rectangle with the 'disappearing background')
Last edited by mrmark : 09-06-2007 at 05:24 AM.
Reason: URL updated
|
