Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Input boxes (F vs IE)

Status
Not open for further replies.

cfgcjm

Programmer
Oct 30, 2007
21
US
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:
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;
	}
 
Your input boxes look the same to me in IE7 and FF and they look good in both browsers. How is it that what I am seeing veers from your idea?

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
Me too, and I included Safari for Windows. They have rounded corners. What seems to be the problem for you?

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top