I'm working on a new design and i'm having some issues with how my input boxes display in FF and IE. Surprisingly IE is showing them the way i conceptualized the CSS but it's probably still reading it wrong and FF is actually right. Would anyone able to tell me why this is happening?
CSS:
CSS:
Code:
/* MAIN STRUCTURE */
body{
margin:0;
padding:0;
background:#B9DBEF url(images/bkg.jpg);
background-repeat:repeat-x;
}
#cloudheader{
width:100%;
height:190px;
background:url(images/clouds.jpg);
background-position:center;
}
#wrapper{
width: 970px;
margin: 0 auto;
position:relative;
top:-150px;
}
#banner{
width:721px;
height:71px;
background-image:url(images/compbanner.png);
margin-left:24px;
}
#maincontent{
width:721px;
height:auto;
background-image:url(images/mainbkg.gif);
margin-left:24px;
position:relative;
top:-445px;
}
#contactbox{
width:200px;
height:auto;
font-family:Arial, Helvetica, sans-serif;
color:#25445A;
padding-left:5px;
position:absolute;
left:721px;
top:480px;
}
#contactbox h1{
font-weight:bold;
font-size:13px;
margin-bottom:0px;
}
#contactbox p{
font-size:12px;
margin-top:5px;
margin-bottom:5px;
}
/* FOOTER */
#footer{
width:721px;
height:26px;
margin-left:24px;
position:relative;
top:-445px;
}
#footcornL{
width:26px;
height:26px;
background-image:url(images/bottomcornL.png);
position:relative;
left:0px;
top:0px;
}
#footcornR{
width:26px;
height:26px;
background-image:url(images/bottomcornR.png);
position:relative;
left:694px;
top:-52px;
}
#footerbody{
width:669px;
height:26px;
background-image:url(images/bottomcent.gif);
position:relative;
left:26px;
top:-26px;
}
/* LEFT ACCENT */
#accentholder{
width:24px;
height:445px;
position:relative;
top:20px;
}
#redtopL{
width:24px;
height:20px;
background-image:url(images/redtopl.png);
}
#redbottomL{
width:24px;
height:20px;
background-image:url(images/redbottoml.png);
}
#redbodyL{
width:24px;
height:393px;
background-image:url(images/redbkgL.gif);
}
/* RIGHT UTILITY BAR */
#utilityholder{
width:24px;
height:445px;
position:absolute;
left:721px;
top:25px;
}
#redtopR{
width:183px;
height:19px;
background-image:url(images/redtopr.png);
}
#redbottomR{
width:183px;
height:19px;
background-image:url(images/redbottomr.png);
}
#redbodyR{
width:183px;
height:407px;
background-image:url(images/redbkgR.gif);
}
/* Portal Login Box */
#portalcontainer{
height:160px;
width:153px;
padding-left:20px;
padding-right:10px;
}
#portalcontainer h1{
height:22px;
width:153px;
background:url(images/input.gif);
text-align:center;
}
.input{
height:14px;
width:142px;
margin-top:1px;
margin-left:2px;
background:#ECF2F7;
}