I styled a search bar on this site here
It disappears completely in IE7 (I do not need to support IE6).
It works fine in any other browser I tested it so far (Chrome, IE8, Safari, Firefox, Opera).
I tried to remove and re-add CSS properties without success
HTML
<div id="access-search">
<form id="searchform" method="get" action="http://eezzyweb.com">
<div>
<input id="s" name="s" type="text" value="" size="20" tabindex="1" />
<label for="s">
<input id="searchsubmit" name="searchsubmit" type="submit" value="Search" tabindex="2" />
</label>
</div>
</form>
</div>
CSS
#searchform div{
position:relative;
float:right;
display:inline;
top:6px;
right:10px;
width:250px;
height:22px;
background:url(images/search-bkg-complete.png) 0 0 no-repeat;
}
input#s{
position:relative;
width:210px;
height:16px;
margin-left:5px;
background:none;
padding:3px 0;
}
#searchsubmit {
background:url(images/submit-button.png) 0 2px no-repeat;
float:right;
width:22px;
height:21px;
text-indent:-9999px;
text-transform:capitalize;
}
input#s, #searchsubmit{
vertical-align:middle;
border:0;
line-height:1;
font-size:90%;
}
#searchsubmit:hover{
cursor:pointer;
}
Lol...I solved it. There was an overflow:hidden on a parent container!
Related
I'm a beginner in web development and I have made a Signup form for a webpage . What I feel like is trully missing from the form is a circular avatar icon on top of it like the picture below :
I have html and css code and I have loaded an avatar icon . However I do not know how to place it on the top middle of the form just like the image . I would appreciate your help and guidance with this task .
My code :
//the avatar appears inside the page not on top
.avatar{
height:500px;
border-radius:50%;
}
.form-area{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:500px;
height:600px;
box-sizing:border-box;
background:rgb(0,0,0,0.5);
padding:40px;
}
h1{
margin:0;
padding:0 0 20px;
font-weight:bold;
color:#ffffff;
}
.form-area p {
margin:0;
padding:0;
font-weight:bold;
color:#ffffff;
}
.form-area input,select{
margin-bottom:20px;
width:100%;
}
.form area input[type=text], .form-area input[type="password"]
{
border:none;
border-bottom:1px solid #ccc;
background-color:transparent;
outline:none;
height:40px;
color:#ffffff;
display:16px;
}
.form-area select{
margin-top:20px;
padding:10px 0;
}
.signupbtn{
border:none;
height:40px;
outline:none;
color:#ffffff;
font-size:15px;
background-color:#4CAF50;
cursor:pointer;
border-radius:20px;
}
.cancelbtn{
border:none;
height:40px;
outline:none;
color:#ffffff;
font-size:15px;
background-color:tomato;
cursor:pointer;
border-radius:20px;
}
button:hover{
opacity:0.7;
}
<div class="form-area">
<form action="Start_page.html" class = "sign-form animate" onsubmit="return validateform()" method = "post">
//the avatar I want to display on the form
<div class="imgcontainer">
<img src="IMAGES/login.jpg" alt="Avatar" class="avatar">
</div>
<div class="container">
<h1>Sign Up</h1>
<p>Please fill in this form to create an account.</p>
<hr>
<label for="name" ><b><span>Name<span></b></label>
<input type="text" placeholder="Enter Name" name="onoma" id = "myname" required>
<label for="surname" ><b><span>Surname<span></b></label>
<input type="text" placeholder="Enter Surname" name="epith" id = "mysurname" required>
<label for="email" ><b><span>Email<span></b></label>
<input type="text" placeholder="Enter Email" name="email" id = "mailID" required>
<label for="psw"><b><span>Password</span></b></label>
<input type="password" placeholder="Enter Password" name="psw" id = "pass" required>
<p>By creating an account you agree to our Terms & Privacy.</p>
<div class="clearfix">
<button type="button" class="cancelbtn" onclick = "window.location.href='Start_page.html'">Cancel</button>
<button type="submit" class="signupbtn">Sign Up</button>
</div>
</div>
</form>
</div>
Thank you in advance . If you have any questions or need more information about my page tell me and I will update the post.
Add this to the image:
.imgcontainer img{
height: 100px; /* set a default height*/
margin-top: -75px; /* move image up fo 75px */
border: 1px solid black; /* define a border */
border-radius: 50%; /* make the image rounded, this works only with square images*/
}
and this to it's container:
.imgcontainer{
display: flex; /* change display */
justify-content:center;/* align to the center the image */
/* NOTE : there is a lot of other way to align the image to the center, you can use the one that you prefer*/
}
If this method does not do what you want in the way you want, another way is to use position: absolute, center it on center top, and than traslate it -50% top and -50% left
I have two buttons, the first as <a> tag, and the second as <input type="submit">.
I want to make the both like some.
The following is screenShot on firefox
Also the following is screenShot on IE7
HTML
<div id="loginForm">
<form action="login.php" method="post">
<label for="username">Username:</label>
<input type="text" name="username" id="username" /><br />
<label for="password">Password:</label>
<input type="password" name="password" id="password" /><br /><br />
<input type="submit" name="sbmtLogin" value="Sign in" />
Sign up
</form>
</div>
CSS
body {
margin:0;
padding:0;
}
div#loginForm {
width:270px;
max-width:270px;
margin:100px auto;
padding:10px;
text-align:center;
background-color:#8de3fd;
}
div#loginForm input[type=text], div#loginForm input[type=password] {
border:1px solid #9a9a9a;
width:150px;
margin:3px;
padding:5px;
color:#5b5b5b;
}
div#loginForm label {
display:inline-block;
width:70px;
}
div#loginForm input[type=submit] {
border:1px solid #9a9a9a;
width:50%;
padding:5px;
background-color:#f2f2f2;
color:#5b5b5b;
font: bold 16px arila;
}
div#loginForm a {
border:1px solid #9a9a9a;
background-color:#f2f2f2;
color:#5b5b5b;
padding:5px;
text-decoration:none;
font: bold 16px arila;
}
You can see also JsFiddle online demo
Try giving display:inline-block to your <a> tag. This is just a float issue. Your anchor tag does not have any float.
sometimes ie wont work some codes correctly...so that time we should use conditional stylesheets...Here u can use a new stylesheet that include in <head> with conditional code like this
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie7.css">
<![endif]-->
you can specify your class property whatever you want....it reflect ie7 only...
you can check more here : http://css-tricks.com/how-to-create-an-ie-only-stylesheet/
OR
you can use ie syntax hack..it is so simple and no more stylesheets use for in a site...
.class {
background: gray; /* standard */
background: pink\9; /* IE 8 and below */
*background: green; /* IE 7 and below */
_background: blue; /* IE 6 */
}
ie syntax hack : http://webdesignerwall.com/tutorials/css-specific-for-internet-explorer
Hope this help you....
I am new to CSS, Bootstrap & HTML.
I am trying to display search-box on my web page, in Mozilla it works fine but in Chrome it is not working.
Here is the screen shot of Mozilla browser:
and this is of Chrome:
Also note that when i increase or decrease screen resolution the control's gets scattered badly .Following is HTML code snippet responsible for this display:
<body>
<section id="customers">
<div class="container" style="margin-top:0px;">
<div class="row">
<div class="col-lg-12
<form class="form-inline" role="form" style="background:#eee">
<div class="form-group">
<input id="" class="leftText" type="text" value="" tabindex="1" name="query" autocomplete="off" placeholder="I am looking for" ></input>
<strong >in</strong>
<input id="" class="rigtTextBox" type="text" value="" tabindex="1" name="query" autocomplete="off" helptext="In the location" placeholder="In the location"></input>
<select class="rightcitydropdown">
<option>Mumbai</option>
<option>Pune</option>
</select>
</div>
<button class="btn btn-primary" id="srchBtn" >Ask Me</button>
</div><!--end of col-lg-12-->
</form>
</div><!--end of row-->
</div><!--end of container-->
</section>
</body>
following in my CSS for above controls:
.leftText{
float :left;
border-style:solid;
border-width:5px;
border-color:#989898 ;
height:38px;
}
.rigtTextBox{
border-style:solid;
border-width:5px;
border-right-width:1px;
height:38px;
border-color:#989898 ;
}
.form-control{
border-style:solid;
border-width:5px;
border-left-width:1px;
border-color:#eee;
font-size:10px;
height:30px;
}
.form{
border-width:5px;
border-left-width:1px;
border-color:#eee;
font-size:10px;
}
.rightcitydropdown{
float:right;
border-style:solid;
border-width:5px;
border-left-width:1px;
border-color:#989898 ;
margin-right:17px;
background:white;height:38px;
}
#searchOuterdiv{
background:#F0F0F0;
}
#centralRow{
margin-top:3px;
}
strong { float:left; font-size:28px; margin:0px 10px 0 10px; height:30px; line-height:30px; color:#333333; }
#srchBtn { background:#4682B4; font-size:18px; line-height:16px;
border:none; width:125px; text-align:center;margin-top:6px;
height:35px; padding-bottom:5px; cursor:pointer; color:#333; padding-top:0px; margin-left:7px;color:white}
So please, can any one tell me how to set CSS or correct written code to make responsive appearance.I want this page to be displayed on multiple resolution screens, say desktop,laptop,tablets e.t.c
Thanks in advance.
I would recommend looking at something like http://sass-lang.com/
There's really no "easy" answer when it comes to designs looking the same across different browsers, let someone else deal with it for you
Also, http://dowebsitesneedtolookexactlythesameineverybrowser.com/
you can use the media queries
Ex.
#media only screen and (min-width: 768px) and (max-width: 959px) {
.box {
color:#9d9d9d;
font-size:12px;
line-height:18px;
margin: 0 auto;
padding: 0;
position: relative;
width: 960px;
}
}
And inside it, you can declared this class for firefox:
.box, x:-moz-any-link, x:default { color:#000; }
so, the class box, for Chrome,IE,opera and safari will have the color #9d9d9d while firefox will have #000.
I can't seem to get my head around the following problem. So I procured a template of a search form which I then changed to fit my design requirements but I can't seem to be able to change the value=s bit to an image of a search box button. Please see http://jsfiddle.net/p9URB/. The code is as follows:
HTML
<form action="/search" method="get" id="search_form" class="clearfix voicetron" data-ds-protection="enabled">
<div id="search_holder">
<input type="text" id="search_field" name="q" value="" title="Enter search term" placeholder="Search" data-validators="required" data-speech-enabled="" data-search-engine="oracle" x-webkit-speech="x-webkit-speech" autocomplete="off">
<input type="text" id="search_suggest" value="" placeholder="" disabled="">
<input type="submit" value="y" data-submit-text="s" class="btn_search iconify" title="Search">
</div>
</form>
CSS
#search_form{
position:relative;
margin:10px 0;
float:right
}
#search_form #search_holder{
display:block
}
#search_form #search_holder input[type="text"]{
font-size:13px;
width:180px;
height:26px;
margin:0;
position:absolute;
right:0;
padding:0 32px 0 6px
}
#search_form #search_holder #search_field{
z-index:3;
border:1px solid #C9C9C9;
background:url("") #fff;
-webkit-border-radius:5px;
-moz-border-radius:5px;
-o-border-radius:5px;
-ms-border-radius:5px;
border-radius:5px;
text-shadow:0 0 1px #fff
}
#search_form #search_holder #search_field:focus,#search_form #search_holder #search_field:hover{
border-color:#acb1b4;
color:#123
}
#search_form #search_holder #search_field:-moz-placeholder{
color:#a6a7a8
}
#search_form #search_holder #search_field::-webkit-input-placeholder{
color:#a6a7a8
}
#search_form #search_holder #search_field:-moz-placeholder{
color:#a6a7a8
}
#search_form #search_holder #search_suggest{
z-index:2;
border:none;
background:#fff;
border:1px solid #fff;
-webkit-border-radius:5px;
-moz-border-radius:5px;
-o-border-radius:5px;
-ms-border-radius:5px;
border-radius:5px;
color:#9da2a8
}
#search_form #search_holder .overTxtLabel{
z-index:113
}
#search_form .active{
color:#fff;
background:#a6a7a8
}
#search_form .btn_search{
z-index:3;
position:absolute;
top:4px;
right:1px;
display:block;
color:#a6a7a8;
width:28px;
height:21px;
font-size:17px;
line-height:21px;
text-align:center;
font-weight:400;
background:0 0;
border:0;
border-left:1px dotted #a6a7a8
}
#search_form .btn-anchor{
background:0 0;
border:0;
border-bottom:1px solid #ccc;
color:#666;
margin:0 10px;
font-size:10px;
padding-bottom:2px;
font-weight:400
}
#search_form.voicetron [name="q"]{
padding-right:34px;
width:170px;
line-height:17px
}
#search_form.voicetron .btn_search{
color:#71767a
}
You can use an input type of image as your submit button:
<input type="image" src="/my/image/location.png" />
Instead of styling up a submit button. As far as I know, the input type of image replicates the submit behaviour of a submit button.
Add this to btn_search iconify class of css and specify an image.
background: url("your_url.png") no-repeat scroll 0 0 transparent;
You have set input value="s" so change it to value="" and add background image for that button
#search_form.voicetron .btn_search{
color:#71767a;
background-image:url('http://findicons.com/files/icons/1389/g5_system/16/toolbar_find.png');
background-repeat:no-repeat;
}
Js Fiddle
You can simply treat the button as a block element and remove the text with
text-indent:-9999px;
then set a background image.
You probably also want to add
cursor:pointer;
As it doesn't look like a button at the moment.
hi the problem is that i have given position absolute to a input but i just find that absolute position is not working in input tag can anyone know?
i just wanna my layout liquid by positioning that's why i use this
here is my Html code:
<div id="savevalue">
<input type="text" name="name" id="name" class="inpt" />
<input type="button" value="Submit" class="btn" />
</div>
and here is css code:
.inpt{
background:#fff;
border:1px solid #ccc;
height:30px;
font-size:18px;
position:absolute;
left:0;
right:100px;
}
.btn{
height:30px;
background:#333;
border:1px solid #222;
font-size:18px;
color:#fff;
padding:0 15px;
position:absolute;
right:0;
}
yes it works fine by using
width: -moz-available
thanks to every one