/    Sign up×
Community /Pin to ProfileBookmark

Input Boxes (FF vs IE)

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?

[url]http://stjohns.digiconmediagroup.com[/url]

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;
}[/CODE]

to post a comment
CSS

1 Comments(s)

Copy linkTweet thisAlerts:
@KDLAMar 03.2008 — <form action="#" method="post">
<h1><input type="text" id="username" class="input"/></h1>
<h1><input type="password" id="password" class="input"/></h1>
</form>


You've got these encased in <h1> tags. IE and FX apply different line-heights and font-sizes to these.

I suggest you encase them in divs, which are semantically correct. Also, you can apply the red background to the div, rather than having separate elements.

KDLA
×

Success!

Help @cfgcjm spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...