I have styled this code block while using Google chrome and as you see in this image it aligns fine.
However when viewing it with Firefox it doesn't display correctly
What am I doing wrong?
.full-panel select {
-webkit-appearance:none;
background-color:#1B6B80;
background-position:95% 50%;
background-repeat:no-repeat;
border:1px solid #1B6B80;
border-radius:2px;
color:#FFFFFF;
display:block;
font-size:10px;
height:30px;
line-height:10px;
padding-left:5px;
padding-right:25px;
position:absolute;
right:150px;
top:30px;
width:150px;
}
<form method="POST" action="/" accept-charset="UTF-8"><input name="_token" type="hidden" value="M7sQaw7MVFV4DQhoyMxdiuJPB7E5KbaWVB5U9lbp">
<div class="full-panel">
<input name="quick" value="1" type="hidden">
<input class="biginput" type="text" name="name" placeholder="Set up your free website">
<select name="domain_id">
<option>mysite.com</option>
</select>
<input class="bigbutton" type="submit" value="Submit">
</div>
</form>
When you have to use the position absolute be sure that its parent container has a relative position
.full-panel {
position:relative;
}
This way you can start counting the pixels (top:30px) relatively to its container and NOT relatively to body
Related
I wanted to create a small form with some checkboxes which are only visible when the mouse cursor hover this container.
The hover effect and the container inside are no problem.
But there are more elements after that checkboxes and when I hover every element below is moving down because the container with the checkboxes has a height. But when I say no height:auto or 100% when I hover then I can't reach more then one checkbox.
<form>
<input type="text" name="something">
<div class="cb-container">
<input type="checkbox" name="first" value="first">
<input type="checkbox" name="second" value="second">
<input type="checkbox" name="third" value="third">
</div>
<input type="submit">
</form>
<style type="text/css">
.cb-container {
height:25px;
overflow:hidden;
position:relative;
z-index:1;
}
.cb-container:hover {
display:block;
height:auto;
overflow:visible;
position:relative;
z-index:1;
}
</style>
Some opening animation would be nice, but that is another task for me.
For the first I would like to understand why I can't open the container over e.g. the submit button instead of pushing him down.
This may help you ! http://jsfiddle.net/13cjn242/
.cb-container {
height:25px;
opacity:0;
}
.cb-container:hover {
opacity:1;
}
i am trying to create a modal box, here is my html
<div id="sign_up_box"> // this should be transparent
<div id="signup_form"> // this should be opaque
<button type="button">X Close</button>
<form method="POST" action="signup_pro.php">
<label>Name</label></br>
<input type="text" name="username"/></br>
<label>Email</label></br>
<input type="email" name="email"/></br>
<label>Password</label></br>
<input type="password" name="password"/></br>
<input type="submit" value="Create Account"/>
</form>
</div>
</div>
here is my css
#sign_up_box {
position:absolute;;
top:0%;
left:0%;
bottom:0%;
right:0%;
width:100%;
height:100%;
background-color: crimson;
opacity:0.5;
display:none;
transition: opacity 400ms ease-in;
}
#signup_form {
position:absolute;
top:30%;
left:40%;
z-index:9999;
opacity:1 !important;
background-color:white;
width:30%;
min-width:100px;
padding:2px;
}
#signup_form form{
margin:5% auto;
width:80%;
opacity:1;
}
I have div inside another div, i want outer div to be transparent but inner div to be totally opaque.
but here i am unable to override the the parents opacity property as a result the inner div is transparent as well. can anyone suggest a solution? jsfiddle - http://jsfiddle.net/manu2784/z5qrwfgv/
try taking the form out of the backdrop. As in:
<div id="sign_up_box">// this should be transparent</div>
<div id="signup_form">// this should be opaque
<button type="button">X Close</button>
<form method="POST" action="signup_pro.php">
<label>Name</label>
</br>
<input type="text" name="username" />
</br>
<label>Email</label>
</br>
<input type="email" name="email" />
</br>
<label>Password</label>
</br>
<input type="password" name="password" />
</br>
<input type="submit" value="Create Account" />
</form>
</div>
Fiddle: http://jsfiddle.net/oxfuc4et/1/
(I took out display:none from the css only for demo purposes, I believe you will be doing that on button click yourself, right?)
Take this out display:nonefiddle
I think the problem is
display:none
Are you trying something like this
I have a form whose submit input button has a background-image and is shifted left over the top of the input field:
This works in all current browsers. My problem is that it also needs to work in IE8 on Windows XP (!), and it doesn't. When you hover over the input (the magnifying glass), the pointer does not change, and the button is not clickable. Any ideas where I'm going wrong please?
HTML:
<form id="" action="" method="post">
<label for="search">Search</label>
<input type="text" id="search" name="search" value="" />
<input type="submit" name="searchsub" class="searchsub" value="" />
</form>
CSS:
#search {
width:222px;
height:36px;
padding-left:223px;
padding-right:10px;
float:left;
}
input.searchsub {
width:23px;
height:23px;
float:left;
background-image:url(../images/magnifier.jpg);
margin:8px 0 0 -32px;
border:0;
cursor:pointer;
}
This is a start: (demo: http://jsfiddle.net/KYL3A/)
I removed your floats and added a div as a "border wrapper". I think this will make IE8 play :) though I couldn't test it myself as I don't have IE8
<form id="" action="" method="post">
<div id="searchwrap">
<label for="search">Search</label>
<input type="text" id="search" name="search" value="" />
<input type="submit" name="searchsub" class="searchsub" value="" />
</div>
</form>
CSS
#searchwrap {
display: inline-block;
border: 1px solid #333;
padding: 0 10px;
}
#search {
width:150px;
height:36px;
border:0;
}
input.searchsub {
width:23px;
height:23px;
background:red url(); // added red as i dont have your image
margin:8px 0 0 0px;
cursor:pointer;
}
If you use the button element in an HTML form, different browsers will submit different values. Internet Explorer will submit the text between the and tags, while other browsers will submit the content of the value attribute. Use the input element to create buttons in an HTML form.
Therefore this would not work in the web browser you are saying (IE + XP) because that browser does not support it. There is no problem in your code. So i would say that just leave it like this, because there would not be many users of your website who are running Internet Explorer on XP but if there are many then you may want to put some text in there.
Source:
The first answer on this page and this source
I created a jfiddle. I'm sure it is easy to fix, but I can't figure it out.
http://jsfiddle.net/mt4jK/8/
<h1 class="allpages">Questions or Concerns about Compliance Issues?</h1>
<h3>We welcome all compliments and constructive criticism!</h3>
<form class="webform" action="http://hsc.unm.edu/scripts/cfmailform/cfmailer.cfm" method="post">
<!--Required hidden operators-->
<input name="recipient" type="hidden" value="bfloran#salud.unm.edu" />
<input name="subject" type="hidden" value="HSC Compliance Office Email Form" />
<input type="hidden" name="cc" value="mgwilson#salud.unm.edu" />
<input name="redirect" type="hidden" value="http://hsc.unm.edu/admin/compliance/ThankYOU.html" /> <!-- Field validation for the user -->
<label for "name">Your Name (optional):</label>
<input name="name" type="text" id="name" value="" /><br />
<label for "name">Your E-mail (Optional):</label>
<input name="mail" type="text" value="" /><br>
<label for "name">Comment:</label>
<textarea name="comment" value="" ></textarea>
<p>
<div class="submit">
<input type="submit" value="Submit" />
<input type="reset" value="Reset" />
</div>
</form>
CSS:
h3{text-align:center;}
.webform {background-color: #eeeeee;
width: 655px; border: solid;
border-color: #e9e9e9;margin-left: auto; margin-right: auto; padding: 15px 0px 15px 17px;}
.webform label { width:200px; vertical-align:top; text-align:right; padding: 5px; float:left; font-size:14px; font-weight:bold;}
.webform textarea {width:200px; text-align:right; float:left; }
.submit{width:50px:}
edit: formatting the CSS code to easy visibility.
you have a float:left in textarea remove it like this:
.webform textarea {width:200px; text-align:right; }
instead of this:
.webform textarea {width:200px; text-align:right; float:left; }
DEMO
It looks like the margin-bottom of your comment boxes is messing with the .submit div. I found that adding some margin top to your .submit wrapper pushes it far enough down to clear the other container's margin-bottom. Try adding this to your ".submit" class:
css:
width: 230px;
margin: 50px auto;
HTML
<form id="contact_form" action="#" name="" method="POST">
<label for="name">NAME</label>
<input type="text" name="name" id="name" class="contact_form_input" />
<label for="email">EMAIL</label>
<input type="text" name="email" id="email" class="contact_form_input" />
<label for="subject">SUBJECT</label>
<input type="text" name="subject" id="subject" class="contact_form_input" />
<label for="message">MESSAGE</label>
<textarea name="message" id="message"></textarea>
<input type="submit" class="submit" name="submit" value="Submit" />
<input type="reset" class="reset" name="reset" value="Reset" />
</form>
CSS
form#contact_form{
width:auto;
height:auto;
margin:0px;
margin-left:73px;
padding:0px;
float:left;
clear:both;
}
form#contact_form label{
float:left;
clear:both;
margin-left:3px;
margin-bottom:6px;
font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size:12px;
font-style:italic;
font-weight:bold;
}
input.contact_form_input{
width:474px;
height:36px;
margin:0px;
margin-bottom:9px;
padding:0px;
float:left;
clear:left;
}
form#contact_form textarea{
width:479px;
height:150px;
margin-bottom:9px;
float:left;
clear:left;
}
you can see here that in IE7 that text inputs gets some kind of "margin-left". How can i get rid of that margin? thanks
Your easiest option would actually be to use the following CSS:
form#contact_form label{
display: block;
margin-left:3px;
margin-bottom:6px;
font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size:12px;
font-style:italic;
font-weight:bold;
}
But I would recommend you wrap each of your input rows (including the label) in a block-level element such as a <p> tag or a list item:
<form id="contact_form" action="#" name="" method="POST">
<ul>
<li>
<label for="name">NAME</label>
<input type="text" name="name" id="name" class="contact_form_input" />
</li>
...
This article from A List Apart is an excellent introduction.
I'd suggest using conditional comments: (Put this in the head)
<!--[if lt IE 8]>
<link href="IE.css" rel="Stylesheet" type="text/css"/>
<![endif]-->
and setting up some separate CSS_
input.contact_form_input{
width:474px;
height:36px;
margin:0px;
margin-bottom:9px;
margin-left:-10px;/*or whatever px distance works*/
padding:0px;
float:left;
/*remove clear:left;*/
}
That's what I always do to make IE behave.