2 basic issues with browser compatibility

Hey guys,

I got few basic comparability issues with CSS. Or maybe I'm just doing something wrong, so feel free to correct it.

1. 3 column header. I've setup 3 column header to have different things in each. FF and Chrome work fine, IE8 won't line everything up as it supposed to:

Code:

---

/*********** header box ***************/
#headerbox{width:953px;height:80px;margin:0;display:block;margin:0 auto;}
#headerbox #lhbox{width:300px;height:80px;margin:0;display:block;text-align:left;vertical-align:middle;float:left;}
#headerbox #lhbox img{width:245px;height:65px;margin:0;vertical-align:middle;border:0;margin-top:5px;}
#headerbox #chbox{width:353px;height:80px;margin:0;display:block;vertical-align:middle;float:left;}
#headerbox #rhbox{width:300px;height:80px;margin:0;display:block;text-align:right;vertical-align:middle;float:right;}
/********** header box end ***********/

---

2. Small issue with rounded corners in FF. It works fine in Chrome, but FF and IE won't round my corners.

Code:

---

#sampleform4 {margin-bottom:5px;}
#sampleform4 h2 {position:absolute; left-9999px; top:-9999px;}
#sampleform4 input {vertical-align:middle; font-weight:bold; font-size: 12px; -moz-
border-radius:4px; -webkit-border-radius:4px; border-radius:4px; color:#48494c;}
#sampleform4 input[type="text"] {width:186px !important; padding:5px 85px 5px 5px;
background:transparent; border:1px solid #48494c;}
#sampleform4 input[type="submit"] {width:80px; margin-left:-87px; padding:3px;
border:none; color:#444547;background: #889399;cursor:pointer;-moz-border-radius:2px;
-webkit-border-radius:2px;border-radius:2px;text-shadow: 0 0 18px #fafafa; }
#sampleform4 input[type="submit"]::-moz-focus-inner {border:0;}
#sampleform4 input[type="submit"]:focus {background:#333;}
#sampleform4 input[type="submit"]:hover {filter:alpha(opacity=90);-moz-opacity:0.9;-
khtml-opacity: 0.9;opacity: 0.9;}

---

Really appreciate your help!

Question 2: Radius for FF (Mozilla is stated like the "-webkit", but using "-moz"
IE doesnt contribute rounded corners, must be created e.g. using <canvas> and emulating business like "excanvas". Long live Google....

Code:

---

#headerbox {
width:953px;
height:80px;
margin:0;
display:block;
}

#lhbox {
width:300px;
height:80px;
margin:0;
display:block;
text-align:left;
vertical-align:middle;
float:left;
}

#lhbox img {
width:245px;
height:65px;
margin:0;
vertical-align:middle;
border:0;
margin-top:5px;
}

#chbox {
width:353px;
height:80px;
margin:0;
display:block;
vertical-align:middle;
float:left;
}

#rhbox {
width:300px;
height:80px;
margin:0;
display:block;
text-align:right;
vertical-align:middle;
float:right;
}

---

I cleaned up the syntax so that I could read better.

I can see some things here done which will not allow true-cross browser compatibility. If you are trying to align things inside those DIVs, you have to use the "margin" or "padding" property. Vertical-align will not be cross browser compatible, and moreover it is a property to be used for table cells.