Jump to content
  • 0

Выравнивание поля формы с изображением

Almaz

Asked by Almaz,

 Share

Question

Almaz Explorer

Almaz

Posted
Posted

Здравствуйте все.

У меня такая проблема: никак не могу выравнять текстовое поле формы с изображением (каптчей) по вертикали, почему-то изображение располагается не на одном уровне с полем, а выше.

Пожалуйста, подскажите, в чем может быть дело?

Далее привожу код двух файлов (стили в отдельном файле), которые размещаются в одной папке.

form.htm

<HTML>
<TITLE>Form</TITLE>
<LINK rel="stylesheet" type="text/css" href="style.css">
</HEAD>
<BODY>

		<FORM method="post" class="cform" id="cformsform">
		<FIELDSET class="cf-fs1">
		<OL class="cf-ol">
			<LI id="li--1"><LABEL for="cf_field_2"><SPAN>Your name</SPAN></LABEL><INPUT type="text" name="cf_field_2" id="cf_field_2" class="single fldrequired" value=""></LI>
			<LI id="li--2">
			<LABEL for="cforms_captcha" class="seccap"><SPAN>Verification code</SPAN></LABEL><INPUT type="text" name="cforms_captcha" id="cforms_captcha" class="secinput" value=""><IMG id="cf_captcha_img" class="captcha" src="cforms-captcha.png" alt="">
			</LI>
		</OL>
		</FIELDSET>
		<P class="cf-sb"><INPUT type="submit" name="sendbutton" id="sendbutton" class="sendbutton" value="Submit" onclick="return cforms_validate('', true)"></P>
		</FORM>

</BODY></HTML>

style.css

/*                                                    */
/*  custom code on top the default style sheet        */
/*                                                    */
/*  ** if you want this to apply to a different       */
/*  ** form than to just the 2nd form change the '2'  */
/*  ** (or remove for your 1st, default form)         */
@import "calendar.css";

.cform fieldset.cf-fs1 {
	padding-bottom:0;
}
.cform fieldset.cf-fs1 ol.cf-ol { 
	margin:31px 0 0 0!important; 
}


/*                                                    */
/*  main 'top-level' form elements                    */
/*                                                    */
.cform { 
	margin:10px auto 0 auto; 
	width: 559px; 
}

.cform fieldset	{ 
	margin:10px 0 0 0; 
	padding:5px 0 15px 0; 
	border:none;
	background:white;
}

.cform .cf_hidden {
	display:none; 
	border:none!important;
	background:none!important;
	padding:0!important;
	margin:0!important;
}

.cform legend { 
	display:none; 
}

ol.cf-ol { 
	margin:0!important; 
	padding:0!important; 
}
ol.cf-ol li	{
	background:none!important; 
	margin:5px 0!important; /*some themes may interfere otherwise*/
	padding:0; 
	list-style:none!important; 
	text-align:left;
	line-height:1.3em;
}


/*                                                    */
/* just for text-only fields (no input)               */
/*                                                    */

ol.cf-ol li.textonly {
	color:#a2a2a2;
	padding:4px 0; 
	text-align:center;
}


/*                                                    */
/* global definitions for field labels                */
/*                                                    */

.cform label {
	color:#555555;
	width:128px; 
	margin:4px 10px 0 0; 
	display:-moz-inline-box; /*for mozilla*/
	display:inline-block; /*for Opera & IE*/
	text-align:right;
	vertical-align:top;
}
.cform label span {
	color:#555555;
	width:128px; /* must be the same as above!*/
	display:block;
}

label.cf-before {
	margin:4px 10px 0 0; 
}

label.cf-after 	{
	margin:4px 2px 0 6px;
	width:70px;
	text-align:left;
}

label.cf-after span {
	width:70px;
	display:block;
}

label.cf-group-after {
	margin:4px 4px 0 2px;
	width:125px;
	text-align:left;
}
label.cf-group-after span {
	width:125px;
	display:block;
}

/*                                                    */
/*   FORM FIELDS general formatting                   */
/*                                                    */

.cform input,
.cform textarea,
.cform select {
	color:#555555;
	padding:3px;
	background: #FFFFFF; 
	border: 1px solid #CCCCCC; 
	vertical-align:top;
	letter-spacing:1px;
	line-height:normal;
	padding:4px 3px;
	vertical-align:top;
	font:bold 11px Arial;
}

.cform input:hover,
.cform textarea:hover,
.cform select:hover	{
	background:#F0F9FF; 
}

.cform input:focus,
.cform textarea:focus,
.cform select:focus	{ 
	background:#FFFFFF; 
}

.cform textarea,
.cform input {
	width:275px; 
}
.cform select {
	/*width:183px; /* attempt to have equal length */
}  

/*.cform select*/.cfselectmulti	{ 
	height:15px; 
}

.cform textarea {
	overflow:auto;
}

/*                                                    */
/* formatting for text:  "(required)"  & other        */
/*                                                    */

span.reqtxt,
span.emailreqtxt {
	color:#777777;
	margin:3px 0 0 5px;
	font:normal 10px Tahoma;
	display: -moz-inline-box; 
	vertical-align:top;
	letter-spacing:1px;
}


/*                                                    */
/*   radio button title                               */
/*                                                    */

ol.cf-ol li.cf-box-title {
	color:#a2a2a2;
	padding-left:100px; /* check with label 'width' incl. */
	margin:6px 0 0 0!important;
}

/*                                                    */
/*   check boxes                                      */
/*                                                    */

input.cf-box-a,
input.cf-box-b 	{ 
	margin:2px 0 0 0; 
	width:16px; 
	height:22px;
	border:none!important;
	background:none!important;
}

input.cf-box-a 	{ 
	margin-left:100px; /* check with label 'width' incl. */
} 


/*                                                    */
/* check box groups                                   */
/*                                                    */

ol.cf-ol li.cf-box-group {
	margin:0pt !important;
	padding: 0 0 5px 100px; 
} 


/*                                                    */
/*   FORM submit button                               */
/*                                                    */

p.cf-sb {
	text-align:right;
	padding:0!important;
	margin:0;
	height:67px; 
}
.cform input.sendbutton	{ 
	color:#FFFFFF;
	font:13px Verdana;
	font-weight:bold;
	height:21px;
	line-height:21px;
	margin: 0px 15px 15px 0px;
	padding: 0 0 5px;
	width:105px;
	background: #555555;
	border: 1px solid #CCCCCC;
}
.cform input.sendbutton:hover	{ 
	font:12px Verdana;
	font-weight:bold;
}


/*                                                    */
/*   FORM FIELDS enhanced error display               */
/*                                                    */
ol.cf-ol li.cf_li_err {
	border-color:#DF7D7D;
	border-color:#DF7D7D;
	border-style:solid;
	border-width:1px 0pt;
	padding:5px 0!important;
	margin:5px 0!important;
}

ol.cf-ol li ul.cf_li_text_err {
	margin:0 0 0 100px;
	padding:0;
	color:#333;
}

ol.cf-ol ul.cf_li_text_err li {
	background:url(icon-alert.png) no-repeat left 1px!important;
	list-style:none!important;
	font-weight:bold;
	text-indent:0;
	margin:0 0 2px!important;
	padding-left:15px;
}
ol.cf-ol ul.cf_li_text_err li:before {
	content:'';
}


/*                                                    */
/* 'visitor verification' related styles              */
/*                                                    */

label.secq,
label.seccap {
	vertical-align:text-bottom;
	margin-bottom:4px;
}

input.secinput {
	vertical-align:text-bottom;
}

#cforms_captcha6,
#cforms_captcha5,
#cforms_captcha4,
#cforms_captcha3,
#cforms_captcha2,
#cforms_captcha {
	/*height:15px;*/
	width:50px;
	padding: 4px 4px;
	margin: 0;
	vertical-align:text-top;
}

img.captcha	{
	vertical-align:text-bottom;
	margin:0 0 0 5px!important;
	padding:0!important;
	border:none!important;
	float:none!important;
}

img.captcha-reset {
	vertical-align:text-bottom;
	background:url(captcha_reset.png) no-repeat;
	margin:0 0 2px 3px;
	width:21px;
	height:21px;
	border:none;
}

img.imgcalendar {
	border:none;
}

/*                                                    */
/* change formatting of response msgs here            */
/*                                                    */

div.cf_info {
	color:#333;
	display:none;
	padding:10px 15px!important;
	width:380px;
	line-height:1.3em;
	margin:10px auto;
}
div.cf_info ol {
	margin:0;
	padding:5px 15px 0 30px;
}
div.cf_info ol li {
	padding:1px 0;
	margin:2px 0;
}
div.cf_info a	{
	color:#ad2929!important;
	text-decoration:underline!important;
}
div.success {
	background:white none repeat scroll 0%;
	color:#000000;
	display:block;
	font-size: 1.5em;
	text-align:center!important;
}
div.failure {
	display:block;
	text-align:center!important;
	font-size: 1.5em;
	color:#FF0000;

}
div.waiting {
	background:#FFFFFF;
	color:#AAAAAA;
	display:block;
}
/*                                                    */
/*   formatting for invalid user inputs               */
/*                                                    */
.cform .cf_error { 
	color:#ad2929; 
	border:1px solid #ad2929; 
}
div.mailerr {
	display:block;
}
.mailerr,
.cform .cf_errortxt {
	color:#ad2929; 
}


/*                                                    */
/* disabled fields [disabled] does not work on IE!    */
/*                                                    */

[disabled] {
	color:#dddddd;
	border-color:#dddddd!important;
	background:none!important;
}
.disabled {
	border-color:#dddddd!important;
}

/*                                                    */
/* upload box styling                                 */
/*                                                    */

.cform input.cf_upload  {
	width:220px;
	background: #f9f9f9;
	border:1px solid #888888;
}

/*                                                    */
/*  Other: link love                                  */
/*                                                    */
.linklove {
	width:410px;
	margin:0 auto 10px!important;
	padding:0!important;	
	text-align:center!important;
}
.linklove a,
.linklove a:visited {
	font-size: 0.8em;
	font-family: Tahoma;
	color:#aaaaaa!important;
}

/*                                                    */
/*  Other: browser hacks                              */
/*                                                    */
* html ol.cf-ol,
* html ol.cf-ol li,
* html span.reqtxt,
* html span.emailreqtxt { 
	display: inline-block;  /*for ie6*/
}
*+html ol.cf-ol,
*+html ol.cf-ol li,
*+html .cform label,
*+html span.reqtxt,
*+html span.emailreqtxt {
	display: inline-block; /*for ie7*/
}
*+html img.captcha	{
	margin-bottom:1px!important;
}
* html img.captcha	{
	margin-bottom:1px!important;
}
* html select {
	margin-top:3px!important;
}

Спасибо всем откликнувшемся.

Link to comment
Share on other sites

3 answers to this question

Recommended Posts

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept