I already make a form consist of two inputs (input text and input date) and a button. I design the form in Google Chrome.
Here it is :
After I finished the form, I'm trying to open the page in Mozilla Firefox Browser and I see that the date input is not date-formatted.
Like this :
This is my code
<!DOCTYPE HTML><HTML>
<body>
<!--NAVIBAR-->
<div class="container">
<div class="row">
<div class="col-md-3 no-float"><br>
<img src="img/logo-pln-persero.png" style="height:150px; margin-top:-40px;" ><hr>
<p class="navbar-font-gold">
<?php
$tgl_hari_ini = date('D, d M Y ');
echo $tgl_hari_ini;
?>
</p>
<div role="navigation">
<div class="navbar-main-collapsed">
<ul class="nav li navbar-stacked">
<li>
<a class="page-scroll" href="home.php">
<p class="navbar-font">HOME</p>
</a>
</li>
<li>
<a class="page-scroll" href="home.php?cek=logout">
<p class="navbar-font">LOG OUT</p>
</a>
</li>
</ul>
</div>
</div><hr>
<!-- Footer Starts -->
<div class="footer">
© Copyright 2015
</div>
<!-- # Footer Ends -->
</div>
<div class="col-md-9 no-float">
<div class="span">
<header><p class="font-header br1" align="center" style="padding-top:10px;">SISTEM PENGADAAN BARANG/JASA <br>UPT SULSELRABAR </p><hr></header>
<div class="form-thumbnail">
<form method="post">
<h3 style="font-weight:bold" align="center">Surat Kuasa Kerja</h3>
<div class="form-group">
Nomor SKK:
<input type="text" class="form-control" name="no_skk" placeholder="NO SKK" style="width:300px;"></input>
</div>
<div class="form-group">
Tanggal Masuk:
<input type="date" class="form-control" name="tgl_skk" style="width:200px;"></input>
</div>
<div class="form-group" align="center">
<button type="submit" class="btn btn-custom btn-default" name="btn_submit_skk" style="border-radius:0px"> Simpan </button>
</div>
</form>
<a class="page-scroll" href="kontrak-home.php?id=<?php echo $id;?>">
<span class="glyphicon glyphicon-arrow-left"></span> Back
</a>
</div>
</div>
</div>
</div>
<script src="js/bootstrap.min.js"></script>
</body>
</HTML>
and my head tag is :
<head>
<title>Edit Surat Kuasa Kerja</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
*
{
margin:0;padding:0;
}
html,body,.container
{
height:100%;
}
.container
{
display:table;
width: 100%;
margin-top: -50px;
padding-top: 50px;
padding-left:0px;
padding-right:0px;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.font-header{
font-weight:bold;
color:gold;
font-size:48px;
line-height:50px;
}
.font-kontrak{
font-weight:bold;
color:black;
}
.font-progress>a:hover{
}
.thumbnail{
border-radius:0px 0px 0px 0px;
}
.footer {
position:absolute;
bottom:0px;
background-color: #3E4095;
height: 50px;/* or however high you would like */
color:gold;
font-weight:bold;
}
header
{
background:#820404;
height: 130px;
margin-left:-15px;
margin-right:-15px;
}
#br1
{
line-height:25px;
}
.col-md-3.no-float, .col-md-9.no-float {
float: none;
}
.col-md-3
{
display: table-cell;
background: #3E4095;
width: 25%;
}
.col-md-9
{
display: table-cell;
width: 75%;
height:100vh;
}
input[type=text]
{
border-radius:0px 0px 0px 0px;
}
input[type=password]
{
border-radius:0px 0px 0px 0px;
}
input[type=date]
{
border-radius:0px 0px 0px 0px;
}
.navbar-font
{
font-size:16px;
font-weight:bold;
color:white;
}
.navbar-font-gold{
font-size:16px;
font-weight:bold;
color:gold;
}
.nav li
{
line-height:15px;
}
.nav>li>a:hover
{
background-color:gold;
width:100%;
margin:0;
}
.p1{
line-height: 20px;
font-weight:bold;
font-size:24px;
}
.row
{
height: 100%;
display: table-row;
}
.col-special{
column-count:2;
-webkit-columns:2;
-moz-columns:2;
margin-left:6px;
}
.thumbnail{
border-radius:0px 0px 0px 0px;
border:none;
}
.form-thumbnail{
display: table;
background:#EEEEEE;
margin-top:10vh;
margin-left:40vh;
padding-bottom:30px;
padding-top:30px;
padding-left:70px;
padding-right:70px;
}
</style>
</head>
Can I Use: Date and time input types. Simply put, this is not widely supported. Using the native input type will currently not have a consistent behavior across browsers.
As far as I'm aware, input date types aren't supported by Firefox.
Related
I'm having a couple of bugs with my layout and was wondering if anyone could help me out. I need to have the white space removed above the nav bar and below the footer. Secondly, I'd like to have all of the footer elements on the same line, instead of being slightly staggered. I've attached a picture of the site, as well as the HTML and CSS that goes with it. Thanks in advance!
HTML:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>21st Century Dad</title>
<link type="text/css" rel="stylesheet" href="css/reset.css" />
<link type="text/css" rel="stylesheet" href="styles.css" />
<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup{background:#26ADE4; float:right; font:14px 'Kanit',Helvetica,Arial,sans-serif; margin-right: 20px; margin-top: 20px; text-align:center; padding:10px; border-radius:20px;}
/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
</head>
<body>
<header>
<div id="header-content">
<img src="../website/images/logo-big.png" alt="21st Century Dad" height="110" style="margin-left:20px; margin-top:20px;" />
<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
<form action="//fb.us15.list-manage.com/subscribe/post?u=48be460d4492dcbdd2828666e&id=f7d2ed069d" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
Sign up for our newsletter!
<div class="indicates-required"><span class="asterisk"></span></div>
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address <span class="asterisk">*</span>
</label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_48be460d4492dcbdd2828666e_f7d2ed069d" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button" style="background-color:#D1E751; font:14px 'Kanit',Helvetica,Arial,sans-serif; margin-top:4px; border-radius:5px; border-color:#D1E751;"></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->
<nav>
<ul>
<li>About</li>
<li>DIY Projects</li>
<li>Dad Tech</li>
<li>Kid Stuff</li>
<li>Ask a Dad</li>
<li>Dad Jokes</li>
</ul>
</nav>
</div>
</header>
<div id="wrapper">
<main>
<div class = "container">
<div class = "blocks">
<h1>What's New with Dad?</h1>
<img src="../website/images/whatsnew.png" alt="About Me Picture" style="border:1px solid #000;">
</div>
<div class = "blocks">
<h1>DIY Project of the Week</h1>
<img src="../website/images/diyproject.jpg" alt="DIY Project Picture" style="border:1px solid #000;">
</div>
<div class = "blocks">
<h1>Dad Gadget of the Week</h1>
<img src="../website/images/dadgadget.jpg" alt="Dad Gadget of the Week Picture" style="border:1px solid #000;">
</div>
<div class = "blocks">
<h1>Activity / Meal of the Week</h1>
<img src="../website/images/dadactivity.jpg" alt="Kid Activity & Meal of the Week" style="border:1px solid #000;">
</div>
<div class = "blocks">
<h1>Dad Q & A of the Week</h1>
<img src="../website/images/askadad.png" alt="Dad Q & A of the Week" style="border:1px solid #000;">
</div>
<div class = "blocks">
<h1>Dad Joke of the Week</h1>
<img src="../website/images/dadjokes.jpg" alt="Dad Joke of the Week" style="border:1px solid #000;">
</div>
</div><!-- end container -->
</main>
<footer>
<div id="footer">
<p class="left">
21stcenturydad#gmail.com
<p class="right">
<a href="https://www.facebook.com/">
<img src="../website/images/Facebook.png" alt="Facebook Logo"/></a>
<a href="https://www.snapchat.com/">
<img src="../website/images/Snapchat.png" alt="Snapchat Logo"/></a>
<a href="https://www.instagram.com/">
<img src="../website/images/Instagram.png" alt="Instagram Logo"/></a>
<p class="centered">
© Copyright 2017 21st Century Dad
</div>
</footer>
</div>
</body>
</html>
CSS:
#charset "UTF-8";
/* CSS Document */
#import url('https://fonts.googleapis.com/css?family=Kanit:200,300,500');
body {
background-color: #FFF;
background-image:url(../website/images/background.png);
font-size: 13px;
font-family: 'Kanit', sans-serif;
font-weight: 200;
color: #363636;
}
p {
line-height: 140%;
}
header {
background-color: #D1E751;
width: 960px;
z-index:1000;
margin-right:auto;
margin-left:auto;
}
#header-content {
width: 960px;
margin-left: auto;
margin-right: auto;
height: 130px;
position:relative;
left:0px;
top:0px;
}
nav {
background-color: #26ADE4;
color: #fff;
width: 100%;
text-align: center;
font-size: 16px;
font-weight:bold;
}
nav ul {
display: block;
padding:14px 0 14px;
}
nav li {
display: inline-block;
}
nav a {
padding: 5px 30px 5px;
}
nav a:link {
color: #fff;
text-decoration: none;
}
nav a:hover {
background-color: #D1E751;
color: #FFF;
}
nav a:visited{color:#FFF;}
#wrapper {
width: 960px;
margin-left: auto;
margin-right: auto;
background-color: #fff;
overflow: hidden;
padding-top:60px;
}
.container{width:960px;
margin-left:auto;
margin-right:auto;
text-align:center;}
.blocks{display:inline-block;
width:300px;
padding-left:5px;
padding-right:5px;
}
h1 {
font-size: 20px;
color: #26ADE4;
font-weight: 500;
margin-bottom: 2px;
}
h2 {
font-weight:500;
font-size: 60px;
color: #fff;
position:absolute;
left:-2px;
bottom:-9px;
}
footer {
background-color: #D1E751;
color: #fff;
font-size: 10px;
padding: 12px;
font-weight:bold;
clear: both;
}
.left{text-align:left;
font-size:14px;
float:left;
padding-top:8px;
padding-bottom:8px;
}
.right{float:right;
text-align:right;
}
.centered{text-align:center;
font-size:14px;
padding-top:8px;
padding-bottom:8px;
max-width:300px;
margin-left:auto;
margin-right:auto;}
Screenshot
take out margin:auto to the body to get rid of surrounding whitespace
For a simple footer, you can position the element fixed to the screen
For elements in the footer, You can use a display flex property on the div with id footer
CSS rules below and pen is here
body {
margin: auto;
}
.left,
right,
.centered {
margin-left: 50px;
margin-right: 50px;
margin-top: 0;
}
footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
So, I added a customized live tweet feature to the website, using something called 'twitter-post-fetcher, and I'm trying to get rid of this random bullet-point next to the live tweet. I tried adding it 'list-style'but that doesn't seem to be working.
Thanks in advance.
<!-- Custom CSS -->
<link href="css/customstyle.css" rel="stylesheet">
<style type="text/css">
.border{
border-right:1px solid #000;
}
footer{
margin-top: 300px;
}
.audio-peri-soc{
width:190%;
line-height: 45px;
}
.social-media{
display: block;
}
.unstyled{
list-style-type: none;
}
.border{
border-right:2px solid #ccc;
height:100px;
}
.col-lg-4{
width:30%;
list-style-type: none;
}
.compress .col-xs-9{
width: 200%;
padding-left: none;
}
.compress .col-xs-4{
padding-left:0;
}
.compress .col-lg-8 div{
margin:0;
padding: 0;
color:black;
font-size: 15px;
width:100%;
}
.blue{
color:#fff;
bottom:0;
margin-top:-10px;
margin-left: 10px;
font-size: 10px;
}
.compress{
width:100%;
margin: 0;
}
.twitter-fav-icon{
margin-left: 5px;
}
.compress p, a {
font-family:Arial,Sans-Serif;
font-size:13px;
color:black;
text-decoration:none;
margin: 0;
}
.compress ul li {
list-style:none;
overflow:hidden;
margin:50px;
padding:5px;
width:100%;
}
#example1{
margin-left: -40px;
padding: 0;
list-style-type: none;
}
.interact a{
margin: 0 0 0 5px;
padding: 0;
text-decoration: none;
}
.compress ul li:hover {
background-color:#fff;
}
.compress .user, .tweet, .timePosted {
float:none;
}
.compress a, a:visited {
color:#999;
}
.compress a:hover {
color:#ccc;
}
body{background:url('http://www.placehold.it/1200x800/cccccc/000000') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
margin: 0;}
.effect{
-moz-box-shadow: inset 0 0 10px #000000;
-webkit-box-shadow: inset 10px 100px 0 #000000;
box-shadow: inset 1px 0 10px #000000;
}
.col-md-7 p{
font-size:15px;
line-height: 230%;
text-align: justify;
width: 500px;
margin-top: -30px;
}
#footerSlideButton {
background-image:url('http://placehold.it/50x50');
background-repeat:none;
position: absolute;
top: -55px;
right: 20px;
width:50px;
height:50px;
border: none;
cursor: pointer;
}
.container .pull-left p{
margin: 0;
color:blue;
padding:0;
}
.navbar-fixed-bottom p{
margin: 20px;
font-size: 15px;
}
.navbar-fixed-bottom {
position: fixed;
bottom: -20px;
height: 0;
width: 100%;
background-color:#ffffff;
padding: 10px 0;
margin: 0;
}
#media (max-width:630px) {
ul{
color: blue;
}
}
</style>
</head>
<body>
<footer>
<div class="container" id="contact" name="contact">
<div class="row">
<br>
<h1 class="centered">THANKS FOR VISITING US</h1>
<hr>
<div class="col-lg-4">
<h3>Latest Tweets
</h3>
<div id="example1"></div>
<h4>Watch me on Periscope</h4>
<script>...</script>...
</div><!-- col -->
<div class="col-lg-4 border">
<form class="form-horizontal" role="form">
<div class="form-group">
</div>
</form><!-- form -->
</p>
</div><!-- col -->
<div class="col-lg-4">
<h3> Subscribe
</h3>
<div id="example1"></div>
<p>Subscribe for the latest newsletters and updates</p>
<div id="mc_embed_signup" class="mailchimp">
<div class="form-group">
<input type="email" value="" name="EMAIL" class="required email form-control" id="mce-EMAIL" placeholder="Enter email">
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn__bottom--border mailchimp__btn" data-style="shrink" data-horizontal>
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div>
<div class="" style="position: absolute; left: -5000px;"><input type="text" name="..." value=""></div>
</form>
<span class="form_nospam">No spam</span>
</div><!--End mc_embed_signup-->
</div><!-- col -->
</div><!-- row -->
</div><!-- container -->
<hr class="container">
<div class="container">
<i class="fa fa-facebook fa-2x"></i>
<i class="fa fa-twitter fa-2x"></i>
<i class="fa fa-soundcloud fa-2x"></i>
<div class="pull-right">
<iframe width="60%" height="20" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/226657681&color=999999&auto_play=true&hide_related=false&show_comments=true&show_user=true&show_reposts=false"> </iframe>
</div>
</div>
</footer>
</body>
</html>
Assuming you want no bullet points at all.
* {
list-style-type: none;
}
Am working on making a copy of the BBC site and want to make two horizontal bars (part of the header) butt up against each other. Right now, there is a space between the two which I want to remove.
Here is the image I am getting:
Here is the HTML and CSS:
<!doctype html>
<html>
<head>
<title>BBC_Copy</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
body {
margin:0;
font-family: arial, helvetica, sans-serif;
}
#topbar {
background-color:#7A0000;
width: 100%;
height:40px;
color:white;
}
.fixedwidth {
width:1050px;
margin:0 auto;
}
#logodiv {
padding-top:5px;
float:left;
border-right:1px solid #770000;
padding-right: 10px;
}
#signindiv {
font-weight: bold;
padding:2px 80px 12px 20px;
font-size: 0.9em;
float:left;
border-right:1px solid #770000;
}
#signindiv img {
position:relative;
top:3px;
}
#topmenudiv {
float:left;
}
#topmenudiv ul {
margin:0;
padding:0;
}
#topmenudiv li {
list-style: none;
font-wieght:bold;
font-size:0.9em;
border-right:1px solid #770000;
height:100%;
padding:10px 20px 12px 20px;
float:left;
}
#searchdiv {
float:left;
padding:5px 0 0 10px;
}
#searchdiv input {
height:25px;
border:none;
font-size:0.9em;
padding-left: 10px;
background-image: url("images/magnify.png");
background-repeat: no-repeat;
background-position:center right;
}
.break {
clear:both;
}
#newsbar {
background-color:#7A0000;
width: 100%;
height:40px;
color:white;
}
</style>
</head>
<body>
<div id="container">
<div id="topbar">
<div class="fixedwidth">
<div id="logodiv">
<img src="images/bbc_logo.png" />
</div>
<div id="signindiv">
<p><img src="images/signin.png" />Sign In</p>
</div>
<div id="topmenudiv">
<ul>
<li>News</li>
<li>Sport</li>
<li>Weather</li>
<li>iPlayer</li>
<li>TV</li>
<li>Radio</li>
<li>More...</li>
</ul>
</div>
<div id="searchdiv">
<input type="text" placeholder="Search" />
</div>
</div>
<div class="break">
</div>
<div id="newsbar">
</div>
</div>
</body>
</html>
Your problem is in:
<div id="signindiv">
<p><img src="images/signin.png" />Sign In</p>
</div>
The <p> tags are adding extra margin on top and bottom. I would recommend getting rid of the p tags... they don't add any semantic advantage.
Replace this:
<div id="signindiv">
<p><img src="images/signin.png" />Sign In</p>
</div>
with this:
<div id="signindiv">
<img src="images/signin.png" />Sign In
</div>
Result: http://jsfiddle.net/ru7zzc1w/1/
I've made a page of 'contact us' where the user should fill a form, and of course submit/send it.
Now, thing is that the moment I add <form>...</form> tags the layout breaks. It seems it happens only in chrome(not 100% sure yet).
However, surprisingly, if I instead of refreshing the page, use the menu(click contact us) the layout/design is just fine.
Seems the problem is caused by <form> tag. Without it the layout/design is fine
how it should be
how it is with <form> tags
Please take a look if there is problem in my .css or .html.
CSS.css:
body{
background-color: #80B2E6;
font-family: "Times New Roman", Georgia, Serif;
font-size: medium;
padding: 0px;
}
nav{
height:3.5em;
}
#Content{
padding:10px;
width: 580px;
margin-left: auto;
margin-right: auto;
background-color:#B89470;
}
#Content h2{
text-align:center;
display: block;
}
#Menu{
background-color:#AD855C;
display: block;
}
#Header{
background-color:#AD855C;
width: 600px;
margin: 0 auto;
}
#Logo{
background-image:url('Library/Misc/LogoBG.jpg');
background-size: 100% 100%;
height:100px
}
#Logo h2{
text-align:center;
vertical-align:middle;
}
.Line{
margin:0;
padding:0;
height: 3.5em;
border-right: 2px solid #000000;
float:left;
display: inline-block;
}
a.MMLink{
text-decoration: none;
background-color:#AD855C;
height: 1.5em;
padding: 1em;
display:inline-block;
float: left;
}
a.MMLink:hover{
background-color: #CEB69D;
color:black;
}
a.MMLink:link{
color:black;
}
a.MMLink:visited{
color:black;
}
a.MMLink:active{
background-color: #CEB69D;
color:black;
}
#MenuLeft{
float: left;
display: inline-block;
}
#MenuRight{
float: right;
display: inline-block;
}
.NewsFeed{
text-decoration:underline;
font-weight:bold;
}
.Form {
width: 400px;
border: 2px solid black;
margin-left: auto;
margin-right: auto;
margin:0;
padding:0;
}
HTML Contactus.html:
<!DOCTYPE html>
<html>
<head>
<title>
A page
</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="CSS.css" />
</head>
<body>
<div id="Header">
<div id="Logo">
<h2> My Header </h2>
</div>
<nav>
<div id="MenuLeft">
<a class="MMLink" href="Index.php">Home</a>
<div class="Line"></div>
<a class="MMLink" href="About.html">About</a>
<div class="Line"></div>
<a class="MMLink" href="Contactus.php">Contact Us</a>
<div class="Line"></div>
</div>
<div id="MenuRight">
<div class="Line"></div>
<a class="MMLink" href="Login.php">Login</a>
<div class="Line"></div>
<a class="MMLink" href="Signup.php">Sign-Up</a>
</div>
</nav>
</div>
<div id="Content">
<h2>Contact us!</h2>
<hr/>
<p>
That ironical, but if you've encountered a problem, a bug, or just want to contact us,
<br/>
please feel free to fill the next form.
</p>
<form>
input fields go here
<br/>
</form>
<p>some text2</p>
</div>
</body>
</html>
It could be a problem with your floats. Try adding clear:both to #content:
#Content{
padding:10px;
width: 580px;
margin-left: auto;
margin-right: auto;
background-color:#B89470;
clear:both:
}
On a side note I wouldn't use a seperate div for your vertial divders. Try using border-left and/or border-right on .MMlink instead. Also use border-bottom on your <h2>Contact Us</h2> and get rid of the <hr />
Here's how I'd tidy up your HTML with associated CSS changes: http://jsfiddle.net/kzww8fvb/
I am trying to fit the input and button for the search form in the middle of my banner.
But this is what I get:
Here the HTML:
<div class="header-container">
<div class="header">
<h1 class="logo"><strong>Magento Commerce</strong><img src="" alt="Magento Commerce" /></h1>
<div class="quick-access">
<form id="search_mini_form" action="/" method="get">
<div class="form-search">
<label for="search">Search:</label>
<input id="search" type="text" name="q" value="" class="input-text" maxlength="128" />
<button type="submit" title="Recherche" class="button"><span><span>Recherche</span></span></button>
<div id="search_autocomplete" class="search-autocomplete">
</div>
<script type="text/javascript">
//<![CDATA[
var searchForm = new Varien.searchForm('search_mini_form', 'search', 'Search entire store here...');
searchForm.initAutocomplete('/', 'search_autocomplete');
//]]>
</script>
</div>
</form>
<ul class="links">
<li class="first" ><a href="" title="Mon compte" >Mon compte</a> </li>
<li><a href="" title="My Wishlist" >My Wishlist</a></li>
<li>My Cart</li>
<li>Checkout</li>
<li>Blog </li>
<li class=" last"><a href="" title="Se connecter" >Se connecter</a></li>
</ul>
</div>
</div>
</div>
Here is the CSS:
.header-container {
position:fixed;
background-color: #000;
height:40px;
line-height:40px;
width:100%;
color:#fff;
}
.header {
text-align:right;
height:40px;
line-height:40px;
z-index:10;
}
.header .quick-access {
height: 40px;
line-height: 40px;
}
.header .form-search {
float:right;
height:40px;
width: auto;
line-height:40px;
}
form {
display: inline;
}
I found a way to do it with display: table-cell; and vertical-align: middle; but I don't want to use this technique because I want to support older browsers.
So how come the technique:
height: 40px;
line-height: 40px;
is only working with the ul list menu and not with the input and button?
UPDATE
Here is the jsfiddle link where you can see the problem: example
I will suggest to not using line-height for this... It's not a text block.
Instead... I will use padding-top like this:
.header .form-search {
float: right;
height: 40px;
padding-top: 10px;
box-sizing: border-box;
-moz-box-sizing: border-box; /* FF */
width: auto;
}
Update fiddle: http://jsfiddle.net/gmolop/fELkE/1/
Apply float:left to your <h1> element. This fixes the issue.
FIDDLE
<header>
<h1>some text</h1>
<form>
<input type="text" />
</form>
<button>Button</button>
</header>
css
header
{
height: 40px;
line-height: 40px;
width: 100%;
background: #ccc;
}
input,button,form
{
height: 25px;
display: inline-block;
margin: 0 20px;
}
h1
{
margin:0; padding:0;
display: inline-block;
float:left;
}