Hi Please find the attached image this is my html & css code
<h2 style="margin:0px 0px 2px 0px" class="widgettitle3">Contact Response for your request</h2>
<div class="tablediv">
<div class="rowdiv">
<div class="celldiv">
<ul class="gallery">
<li>
</li>
</ul>
</div>
<div class="celldiv boldText">Contact Details :</div><div class="celldiv"><input type="text" style="height:28px;" maxlength="150" size="40" id="9" name="9" class="required" ></div> <div class="celldiv"> <input type="button" class="btn" value="Submit" onclick="javascript:processProvideContact('9');"> <input type="button" class="btn" value="Decline" onclick="javascript:processDecline('9');"></div>
</div>
</div>
.tablediv {
display: table;
height:100%;
width:100%;
border:1px solid red;
border-spacing: 0px; /*cellspacing:poor IE support for this*/
border-collapse: separate;
}
.celldiv {
float: left; /*fix for buggy browsers*/
display: table-cell;
position:relative;
margin:1px 1px 1px 0px;
padding:1px 1px 1px 0px;
border:1px solid black;
vertical-align: middle;
}
.rowdiv {
display: table-row;
width: auto;
}
middle and third column is not vertically center position
change your celldiv css class to
.celldiv
{
border: 1px solid black;
display: inline-block;
padding: 1px 1px 1px 0;
position: relative;
vertical-align: middle;
}
Related
i have a weird bug with my css
#box1 {
border:2px solid #CC9933;
padding:5px;
-moz-border-radius:10px 0;
-webkit-border-radius:10px 0;
border-radius:10px ;
margin-bottom: 10px;
width: auto;
}
#box1 label {
background-color: black;
color:white;
float: left;
margin-left: 1px;
}
#box1 span {
display: block;
overflow: hidden;
}
#box1 span input {
width: 100%;
border:none;
border-bottom:solid 1px #000;
outline:none;
}
<div id="box1">
<form>
<div>
<label> Nom de la société </label>
<span><input type="text" value=""></span>
</div>
<div>
<label> Adresse </label>
<span><input type="text" value=""></span>
</div>
</form>
</div>
I won't show all the HTML because it is the same structure.
The thing is that in my web browser it looks like this :
However, this is how it should looks like :
(this is the same code !)
http://jsfiddle.net/8vsyxtys/
It's most likely the float:left.
Try adding a clear div after each:
css would be: .clear { clear:both; height: 1px; }
#box1 {
border:2px solid #CC9933;
padding:5px;
-moz-border-radius:10px 0;
-webkit-border-radius:10px 0;
border-radius:10px ;
margin-bottom: 10px;
width: auto;
}
#box1 label {
background-color: black;
color:white;
float: left;
margin-left: 1px;
}
#box1 span {
display: block;
overflow: hidden;
}
#box1 span input {
width: 100%;
border:none;
border-bottom:solid 1px #000;
outline:none;
}
.clear {
clear: both;
height: 1px;
}
<div id="box1">
<form>
<div>
<label> Nom de la société </label>
<span><input type="text" value=""></span>
</div>
<div class="clear"> </div>
<div>
<label> Adresse </label>
<span><input type="text" value=""></span>
</div>
</form>
</div>
I am creating a table madde with several divs, and I am having an extra space between the first row (styled as head) and the rest of them, only the fist two columns (divs). Here you can see very clear:
There is no style atribute causing this space, at least I am not able to find the reason of it.
I have reproduced it on jsfiddle and you can see that it also sets the extra space: DEMO
Here I bring HTML & Syle related code:
HTML:
<div class="tableWrap">
<div class="tableHeader">
<div class="contentColumn60">
<span class="tableHeaderText">Turno</span>
</div>
<div class="contentColumn20">
<span class="tableHeaderText">Tipo</span>
</div>
<div class="contentColumn10">
<span class="tableHeaderText">Editar</span>
</div>
<div class="contentColumn10">
<span class="tableHeaderText">Reactivar</span>
</div>
</div>
<div class="tableContent">
<div class="contentColumn60">
<span class="tableContentText">Mañana(17:00 - 21:00)</span>
</div>
<div class="contentColumn20">
<span class="tableContentText">Mañanas</span>
</div>
<div class="contentColumn10">
<div class="editIcon"></div>
</div>
<div class="contentColumn10">
<div class="discontinueIcon"></div>
</div>
</div>
<div class="tableContent">
<div class="contentColumn60">
<span class="tableContentText">Mañana(17:00 - 21:00)</span>
</div>
<div class="contentColumn20">
<span class="tableContentText">Mañanas</span>
</div>
<div class="contentColumn10">
<div class="editIcon"></div>
</div>
<div class="contentColumn10">
<div class="discontinueIcon"></div>
</div>
</div>
<div class="tableContent">
<div class="contentColumn60">
<span class="tableContentText">Mañana(17:00 - 21:00)</span>
</div>
<div class="contentColumn20">
<span class="tableContentText">Mañanas</span>
</div>
<div class="contentColumn10">
<div class="editIcon"></div>
</div>
<div class="contentColumn10">
<div class="discontinueIcon"></div>
</div>
</div>
STYLE:
.tableWrap{
width: 100%;
height:380px;
border:#ccc 1px solid;
border-radius:3px;
box-shadow: 0 1px 2px #d1d1d1;
margin: 10px;
background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafafa));
background: -moz-linear-gradient(top, #fbfbfb, #fafafa);
font-size:12px;
color:#666;}
.tableHeader{
height: 40px;
width: 100%;
background: -moz-linear-gradient(center top , #EDEDED, #EBEBEB) repeat scroll 0 0 rgba(0, 0, 0, 0);
border-bottom: 1px solid #E0E0E0;
border-left: 1px solid #E0E0E0;
border-top: 1px solid #FAFAFA;
display: inline-block;
font-weight: 600;
}
.tableHeaderText{
line-height: 40px;
padding: 0 10px;
}
.tableContent{
height: 40px;
width: 100%;
}
.tableContentText{
line-height: 40px;
padding: 0 0 0 20px;
}
.contentColumn60{
height: 40px;
width: 58%;
border-top:1px solid #fafafa;
border-bottom:1px solid #e0e0e0;
border-left:1px solid #e0e0e0;
display: inline-block;
}
.contentColumn20{
height: 40px;
width: 20%;
border-top:1px solid #fafafa;
border-bottom:1px solid #e0e0e0;
border-left:1px solid #e0e0e0;
display: inline-block;
}
.contentColumn10{
height: 40px;
width: 10%;
border-top:1px solid #fafafa;
border-bottom:1px solid #e0e0e0;
border-left:1px solid #e0e0e0;
display: inline-block;
}
.discontinueIcon{
width: 23px;
height: 23px;
background-size: 98%;
background-image: url(images/error.png);
background-repeat:no-repeat;
margin: 0 auto;
}
.editIcon{
width: 23px;
height: 23px;
background-size: 98%;
background-image: url(images/edit.png);
background-repeat:no-repeat;
margin: 0 auto;
}
Since the elements are inline-block, you could use vertical-align:top to align them as desired. It's worth noting that the default property value is baseline; this explains why they were behaving as they were. UPDATED EXAMPLE HERE
.contentColumn60 {
height: 40px;
width: 58%;
border-top: 1px solid #fafafa;
border-bottom: 1px solid #e0e0e0;
border-left: 1px solid #e0e0e0;
display: inline-block;
vertical-align: top;
}
.contentColumn20 {
height: 40px;
width: 20%;
border-top: 1px solid #fafafa;
border-bottom: 1px solid #e0e0e0;
border-left: 1px solid #e0e0e0;
display: inline-block;
vertical-align: top;
}
use overflow:hidden; for content column60,20,10 it works perfect
add a clearfix or use vertical-align:top and overflow:hidden
.contentColumn60:after {
content: "";
display: table;
clear: both;
}
I have the following:
<div id = "top">
<div id="search_top">
<span> Search: </span>
<span> <form id= "search"> <input class = "search_textbox" type="text" name="ticker" value="" ></form> </span>
<div class="arrow-right block"> </div>
</div>
</div>
My CSS is:
#top{
display:inline-block;
}
#search{
float:left;
}
.arrow-right {
width: 0;
height: 0;
border-top: 0.6em solid transparent;
border-bottom: 0.6em solid transparent;
vertical-align:text-top;
border-left: 0.6em solid green;
cursor: pointer;
}
What I want is to have "Search" then the form then the "arrow-right". However, this all comes out on top of each other and I'm not sure why...
Thanks!
You've got a few problems in your html code, an unclosed input, a form inside a span tag, etc. If you fix those problems you'll get to something like this:
<div id="top">
<div id="search_top">
<span> Search: </span>
<form id="search">
<input class="search_textbox" type="text" name="ticker" value="" />
</form>
<div class="arrow-right block"></div>
</div>
</div>
The following CSS will achieve the alignments you want:
#top {
display:inline-block;
}
#search_top > * {
display: inline-block;
vertical-align: middle;
}
.arrow-right {
width: 0;
height: 0;
border-top: 0.6em solid transparent;
border-bottom: 0.6em solid transparent;
vertical-align:text-top;
border-left: 0.6em solid green;
cursor: pointer;
}
See this jsfiddle for a demo.
Could someone point out how to get the white space left to the login box to be highlighted as part of the link in the title heading? Obviously I don want people to click on the login box and get linked back to the homepage. Tried floating the loginBox element and really not sure what to do. Here's the code:
<html>
<head>
<link rel="stylesheet" href="css.css"/>
</head>
<body>
<div id="container">
<a href="#" style="display:block">
<div id="title">
<h1>Record Store</h1>
<img src="images/vinyl.jpg" height="80px" width="auto" />
</div>
</a>
<div id="loginBox">
<form action="#">
<label>User Name: </label>
<input type="text" />
<label>Password: </label>
<input type="password" />
<input type="submit" value="Login"/>
</form>
</div>
<div id="navigation" >
<ul class="navbar">
<li>Home</li>
<li>Vinyl Stock</li>
<li>Online Offers</li>
<li>Collectors News</li>
<li>Join</li>
</ul>
</div>
<div id="content">
<p>You'd be a fool to believe anything on this site</p>
</div>
<div id="footer">
<span id="adminLogin">Admin Login</span>
<p id="copyright">©</p>
</div>
</div>
</body>
</html>
and
* {
padding: 0;
margin:0;
}
body{
font-family: Arial, Verdana, Helvetica;
}
h1{
font: bold 2.8em Arial, Verdana, Helvetica;
position:absolute;
left: 10px;
top:5px;
}
img {
position: absolute;
left:300px;
/*top:5px;*/
}
#container {
margin: auto;
width: 800px;
border: 1px solid black;
z-index: -9;
}
#title {
margin:auto;
/*border: 1px solid black;*/
height: 16%;
position: relative;
}
#loginBox{
float:right;
border: 1px solid black;
}
#navigation{
clear:both;
border-top: 1px solid black;
border-bottom: 1px solid black;
height: auto;
overflow: auto;
background-color: blue;
}
#content{
min-height:400px;
background-color: white;
}
#adminLogin{
float:right;
margin-right: 60px;
margin-top: 20px;
}
#footer{
height:100px;
background-color: red;
}
#copyright{
clear: both;
text-align: center;
}
.navbar {
}
.navbar ul {
}
.navbar li {
font: bold 12px/1.2em Arial, Verdana, Helvetica;
height: auto;
list-style: none;
text-align: center;
width: 20%;
float:left;
background-color: blue;
padding: 1% 0px;
}
.navbar a {
border-right: 1px solid #1F5065;
color: white;
display: block;
text-decoration: none;
}
.navbar li:hover a {
color: black;
}
.navbar li:hover{
background-color: white;
}
I think your best bet is to fill a parent div with your anchor, and then absolutely position the login on top. The absolutely positioned header and image are better placed using padding, to maintain the box's natural height.
h1 {
font: bold 2.8em Arial,Verdana,Helvetica;
display: inline-block;
vertical-align: top;
}
#header {
position: relative;
margin:auto;
}
#title {
padding: 5px 0 24px 10px;
}
#loginBox{
border: 1px solid black;
position:absolute;
right:0;
bottom:0;
}
And then add your relative div, like
<div id="header">
<a href="#" style="display:block">
<div id="title">
<h1>Record Store</h1>
<img src="images/vinyl.jpg" height="80px" width="auto" />
</div>
</a>
<div id="loginBox">
<form action="#">
<label>User Name: </label>
<input type="text" />
<label>Password: </label>
<input type="password" />
<input type="submit" value="Login"/>
</form>
</div>
</div>
So i'm trying to make a login box with 2 fields and a submit button. The submit button position itself differently in EVERY browser. In Firefox it works as expected but in IE8 and Safari the vertical alignment gets screwed up. Any ideas to resolve this problem?
Here's a screendump of the issue: http://gefuhlkunder.dk/bla.jpg
<form action="">
<div>
<input type="text" name="brugernavn" class="login-input" value="Brugernavn" />
<input type="text" name="brugernavn" class="login-input" value="password" />
<input class="login-submit" type="submit" value="login" />
</div>
</form>
.login-input{
border:1px solid #bebebe;
font-family: 'FlamaBook', sans-serif;
font-size:10px;
letter-spacing:-0.4px;
text-transform:uppercase;
color:#464646;
font-size-adjust: 0.5;
height:18px;
line-height:18px;
text-align:center;
width:69px;
margin:0 3px 0 0;
}
.login-submit{
border:1px solid #bebebe;
font-family: 'FlamaBook', sans-serif;
font-size:10px;
letter-spacing:-0.4px;
text-transform:uppercase;
color:#464646;
font-size-adjust: 0.5;
text-align:left;
position:absolute;
padding: 0px 0px 0 3px;
width:59px;
height:20px;
line-height:20px;
background:#fff url(images/submit_bg.png);
cursor:pointer;
}
Try these
.login {
font-family: sans-serif;
font-size:10px;
border:1px solid #bebebe;
text-transform:uppercase;
text-align:center;
color:#464646;
cursor:pointer;
padding:3px;
margin-right:3px;
}
.login-submit {
margin-top:3px;
}
and
<form action="">
<div>
<input type="text" name="brugernavn" class="login login-input" value="Brugernavn" />
<input type="text" name="brugernavn" class="login login-input" value="password" />
<input class="login login-submit" type="submit" value="login" />
</div>
This is the best I could do so far using tables (checked on Firefox, Chrome and IE8). You can however notice a small discrepancy in IE8.
If you use this code, u need to put a background image in your button. Any text would mess up the layout. Can't believe it is so tricky to even try do such a simple things.
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="firstTd">
<div class="styleOne">
<input id="searchEntry" value="" title="Search" size="41" type="text" name="searchEntry"/>
</div>
</td>
<td>
<div>
<button value="Search" class="buttonStyle" type="submit" name="myButton">
<span></span>
</button>
</div>
</td>
</tr>
</table>
table {
width: 342px;
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: gray;
position: relative;
border-bottom: 1px solid transparent;
}
tbody {
display: table-row-group;
vertical-align: middle;
border-color: inherit;
}
tr {
display: table-row;
vertical-align: inherit;
border-color: inherit;
}
td, th {
display: table-cell;
vertical-align: inherit;
}
td.firstTd{
width: 281px;
}
div.styleOne {
background-color: #fff;
border: 1px solid #d9d9d9;
border-top-color: #c0c0c0;
height: 27px;
display: block;
width: 281px;
}
input#searchEntry{
font-size: 20px;
width: 278px;
}
button.buttonStyle{
padding: 12px 22px;
}
Try with:
height:18px;
margin: 3px 0 0;