Top & Bottom - Steps & Order Issue

[cocabean]

For some reason the border around the steps boxes and order box in IE displays weird with many horizontal lines (left in image). On the right is it appearing properly in FireFox.

 

 

Code of the top steps box

 

<b class="orderboxrtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>

 

CSS

 

b.orderboxrtop, b.orderboxrbottom {
background:none repeat scroll 0 0 #FFFFFF;
display:block;
}

b.orderboxrtop b, b.orderboxrbottom b {
background:none repeat scroll 0 0 #EFEFEF;
display:block;
height:1px;
overflow:hidden;
}
style.css (line 11)
b.r1 {
margin:0 5px;
}
b.r2 {
margin:0 3px;
}
b.r3 {
margin:0 2px;
}
b.r4 {
height:2px;
margin:0 1px;
}

 

Any ideas?

[aashish]

Most of the time firefox has these type of problems. But I think it looks like a new design in itself:

[cocabean]

What do you mean by new design in itself sorry?

 

Any ideas to resolve the issue?

 

Thanks

[mdjl]

I did away with the

<b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b>

and

<b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b>

 

 

then added -moz-border-radius and -webkit-border-radius: and a line-height to the .div clss .stepboxactive

 

div.stepsboxactive {
-moz-border-radius:8px 8px 8px 8px;
-webkit-border-radius: 8px;
background:none repeat scroll 0 0 #00162C;
color:#FFFFFF;
float:left;
font-size:12px;
line-height:23px;
margin-bottom:5px;
margin-right:5px;
text-align:center;
width:125px;
}

 

and

div.stepsboxinactive {
-moz-border-radius:8px 8px 8px 8px;
-webkit-border-radius: 8px;
background:none repeat scroll 0 0 #EFEFEF;
float:left;
font-size:12px;
line-height:23px;
margin-bottom:5px;
margin-right:5px;
text-align:center;
width:125px;
}

 

Then added a java routine to accomodate Interent Explorer to make rounded edges.

 

Works a treat, plus all the othe div's I have rounded corners on also get parsed in IE..

[cocabean]

If someone is willing to do this for me please pm me will pay small $10 fee