.table-cell and .table display not working well on IE - html

I seem to have an issue with displaying a .table and .table-cell display in IE browsers (works fine on Chrome).
This is how it looks on Chrome (how it should look):
Here is how it looks on IE browsers (9 and above).
The cells are not positioned next to each other, they are positioned below each other:
Here is the HTML:
<div class="Tab">
<div class="row">
<input type="button" runat="server" class="Tabbutton iconInterview TabbuttonActive" />
<input type="button" runat="server" class="Tabbutton iconScore " />
<input type="button" runat="server" class="Tabbutton iconInfo" />
<input type="button" runat="server" class="Tabbutton iconActions" />
</div>
</div>
Here are the CSS elements:
.Tab
{
width:100%;
height:40px;
display:table;
}
.Tabbutton
{
height:40px;
background-color:#EDEDED;
display:table-cell;
width:25%;
border-top:none;
border-right:none;
}
.TabbuttonActive {
border-bottom:none;
background-color:white;
}
.row{display:table-row;}

display: table and display: table-cell are supported from IE11 http://caniuse.com/#search=table-cell
I don't know your case, what do you whant to do with these buttons, but is it possible for you, to use simple display: block and float: left ?
.Tab
{
width:100%;
height:40px;
display:block;
}
.Tabbutton
{
height:40px;
background-color:#EDEDED;
display:block;
width:100%;
border-top:none;
border-right:none;
}
.TabbuttonActive {
border-bottom:none;
background-color:white;
}
.btnCol {
width: 25%;
float: left;
display: block;
}
.row::after {
content: "";
display: block;
clear: both;
}
<div class="Tab">
<div class="row">
<span class="btnCol">
<input type="button" runat="server" class="Tabbutton iconInterview TabbuttonActive" />
</span>
<span class="btnCol">
<input type="button" runat="server" class="Tabbutton iconScore " />
</span>
<span class="btnCol">
<input type="button" runat="server" class="Tabbutton iconInfo" />
</span>
<span class="btnCol">
<input type="button" runat="server" class="Tabbutton iconActions" />
</span>
</div>
</div>

Related

Put button input center and another button right on the same line

I want to put the go-page button and input center and export button right on the same line, it doesn't work below
<div>
<P style="float: center">
<input type="text" id="page-dir" name="page-dir" maxlength="6" size="4" autocomplete="on"
onkeydown="if (event.keyCode == 13) document.getElementById('go-page').click()"/>
<button style="float: center" id="go-page" onClick="goPage()">go to page</button>
</P>
<P style="float: right">
<button id="export" onclick="export()">export</button>
</P>
</div>
.container {
display:block;
text-align:center;
width:500px;/*you can use percentage*/
position:relative;
border:1px solid #ff4500;
}
.cont-one {
display:inline-block;
max-width:150px;
border:1px solid #000;
}
#page-dir{
width:50px;
}
.cont-two{
position:absolute;
display:inline-block;
width:50px;
float:right;
border:1px solid #000;
left:450px;
}
<div class="container">
<div class="cont-one">
<input type="text" id="page-dir" />
<button id="go-page" onClick="goPage()">Go to page</button>
</div>
<div class="cont-two">
<button id="export" onclick="export()">export</button>
</div>
</div>

CSS: How to align elements around a centered element?

I am trying to create a simple page navigation consisting of three parts:
A few previous page numbers (if any)
The current page number (this must be centered)
A few upcoming page numbers (if any)
The important thing is that the current page number is always horizontally centered within the parent container. The other two parts should take up the remaining horizontal space evenly.
This JSFiddle illustrates my two attempts at solving this problem.
Solution 1: use text-align: center. This achieves the desired result but only if both sides are equal in width. If not the current page number will not be in the center.
HTML
<div class="container">
<input type="button" value="47">
<input type="button" value="48">
<input type="button" value="49">
<input type="text" size="5" maxlength="5" value="50">
<input type="button" value="51">
<input type="button" value="52">
<input type="button" value="53">
</div>
CSS
.container, input {
text-align: center;
}
Solution 2: use manually specified widths to distribute the horizontal space evenly. This effectively centers the current page number under all circumstances but it requires you to hardcode widths.
HTML
<div class="container">
<div class="left">
<input type="button" value="47">
<input type="button" value="48">
<input type="button" value="49">
</div>
<div class="right">
<input type="button" value="51">
<input type="button" value="52">
<input type="button" value="53">
</div>
<div class="center">
<input type="text" size="5" maxlength="5" value="50">
</div>
</div>
CSS
.left {
width: 40%;
float: left;
text-align: right;
}
.right {
width: 40%;
float: right;
text-align: left;
}
.center {
width: 20%;
margin-left: 40%;
}
Neither of these solutions really do what I want. Is there any way to have the current page number centered while allowing the other elements to align to its natural size, rather than to an arbitrary pixel or percentage width?
Try this CSS table layout follows.
.container {
width: 100%;
display: table;
border-collapse: collapse;
table-layout: fixed;
}
.left, .center, .right {
display: table-cell;
border: 1px solid red;
text-align: center;
}
.center {
width: 50px;
}
<div class="container">
<div class="left">
<input type="button" value="47">
<input type="button" value="48">
<input type="button" value="49">
</div>
<div class="center">
<input type="text" size="5" maxlength="5" value="50">
</div>
<div class="right">
<input type="button" value="51">
<input type="button" value="52">
<input type="button" value="53">
</div>
</div>
jsfiddle
You should use flex and float properties together, checkout my solution:
.container {
display: -webkit-flex; /* Safari */
display: flex;
}
.container, input {
text-align: center;
}
.container:after {
content:"";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 50%;
border-left: 2px dotted #ff0000;
}
.left {
display: inline-block;
flex: 1;
}
.left input {
float: right;
}
.right {
display: inline-block;
flex: 1;
}
.right input {
float: left;
}
.center {
display: inline-block;
}
<div class="container">
<div class="left">
<input type="button" value="48">
<input type="button" value="49">
</div>
<div class="center">
<input type="text" size="5" maxlength="5" value="50">
</div>
<div class="right">
<input type="button" value="51">
<input type="button" value="52">
<input type="button" value="53">
</div>
</div>
You can use the CSS property display with the value flex in the wrapper, and the property flex in the children.
To learn more about it, check the following resource: A Complete Guide to Flexbox
Here is an example:
.wrapper {
display: flex;
}
.wrapper > div {
text-align: center;
flex: 1;
border: 1px solid #000;
}
<div class="wrapper">
<div>
<button>1</button>
<button>2</button>
</div>
<div>
<button>3</button>
</div>
<div>
<button>4</button>
<button>5</button>
<button>6</button>
</div>
</div>
Here is a solution you might consider:
Use hidden buttons to always maintain the same number of tags on left and right side
<div class="container">
<input style="visibility: hidden" type="button" value="0">
<input style="visibility: hidden" type="button" value="0">
<input style="visibility: hidden" type="button" value="0">
<input type="text" size="5" maxlength="5" value="1">
<input type="button" value="2">
<input type="button" value="3">
<input type="button" value="4">
</div>
Instead of specifying the width in % you can use CSS calc to split the full width in 3 parts:
[50% - 25px][50 px][50% - 25px]
Then right-align the left part, left align the right part and you're done. When using SASS or LESS you only need to specify the width of the center part.
.container {
width: 100%;
white-space: nowrap;
overflow: hidden;
}
.container > * {
display: inline-block;
}
.container .left {
width: calc(50% - 25px);
text-align: right;
}
.container > input {
width: 50px;
margin: 0px;
text-align: center;
}
.container .right {
width: calc(50% - 25px);
text-align: left;
}
<div class="container">
<div class="left">
<input type="button" value="48" />
<input type="button" value="49" />
</div>
<input type="text" maxlength="5" value="50" />
<div class="right">
<input type="button" value="51" />
<input type="button" value="52" />
<input type="button" value="53" />
</div>
</div>

How can I properly align contents of a div in a single line?

.up, .down{
font-size:6px;
display:block;
height:10px;
}
span{
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="rotator">
<span><input type="text" class='Rbox' value="0" /></span>
<span>
<input class='up' value="▲" type="button" />
<input class='down' value="▼" type="button" />
</span>
</div>
As you can see, although i was able to bring content div rotator in a single line I am still not able to give it a smooth alignment.
Give vertical-align: top; to span will solved your issue.
Check
.up,.down{
font-size:6px;
display:block;
height:10px;
}
span{
display: inline-block;
vertical-align:top;
}
<div class="rotator">
<span><input type="text" class='Rbox' value="0" /></span>
<span><input class='up' value="▲" type="button" />
<input class='down' value="▼" type="button" /></span>
</div>
you can use
.span{
display: inline-block;
vertical-align: middle;
}
Read more at vertical align
Add this vertical-align: middle; CSS property to the parent of the up and down class.

Get date in center of page

How can I get the dates in the center of the main div.
JSFiddle
<style>
.div_table{
display:table;
width:100%;
}
.div_table_row{
display:table-row;
width:auto;
clear:both;
}
.div_table_col{
display:table-column;
float:left;/*fix for buggy browsers*/
}
label
{
width: 10em;
text-align: left;
margin-right: 0.5em;
display: block;
}
input
{
color: #781351;
background: #fee3ad;
border: 1px solid #781351
}
</style>
<div class="div_table">
<div class="div_table_row">
<img src="./images/logo_transparent.png" width="192" height="69" alt="Logo" />
</div>
<div class="div_table_row">
<?php include_once("./include/menu.php"); ?>
</div>
<div class="div_table_row">
<div style="text-align:center">
<label>From Date:<br /><input type="text" class="date" /></label>
<label>To Date:<br /><input type="text" class="date" /></label>
</div>
</div>
<div class="footer div_table_row">All Rights Reserved</div>
</div>
Whould you like to center the labels or the input textfields?
If labels do this:
<label><span>From Date:</span><br /><input type="text" class="date" /></label>
<label><span>To Date:</span><br /><input type="text" class="date" /></label>
Put the text in the label into a span.
in CSS:
label span {
position: absolute;
left: 50%;
}
Add position: relative; to .div_table_row.

Table Row not lining up

I created a table to display a shopping cart. My first two rows line up perfectly, but the last row doesn't. I tried recreating it and still can't figure out what I'm doing wrong. Any ideas?
To make it more readable, I took out the first two rows and just left the last row that is causing the problems.:
CSS
.gallery-list
{
}
.gallery-list .container
{
clear:both;
width:100%;
padding-top:10px;
padding-bottom:10px;
}
.gallery-list .container .imgContainer
{
width:25%;
float:left;
padding-top:5px;
}
.gallery-list .container .imgContainer img
{
width:98%;
}
.gallery-list .container .descContainer
{
width:74%;
float:left;
padding-left:5px;
}
.gallery-grid
{
}
.gallery-grid .container
{
width:33%;
padding-top:10px;
padding-bottom:10px;
float:left;
}
.gallery-grid .container .imgContainer
{
}
.gallery-grid .container .imgContainer img
{
width:98%;
}
.gallery-grid .container .descContainer
{
display: none;
}
ul.pager
{
list-style-type: none;
margin:0px;
padding:0px;
}
.pager li {display: inline; }
.pager li a {padding:5px; border:solid 1px #ccc;margin:2px;}
.current
{
color:black;
}
.current:hover
{
text-decoration:none;
}
#pager
{
clear:both;
}
html
<tr>
<td>
<div class="gallery-list">
<div class="container">
<div class="imgContainer">
<img src=""/>
</div>
<div class="descContainer">
<div class="name">
<h2 style="color:#000;text-transform:uppercase;margin:0;">Friday Night and Saturday Activities (Single)</h2>
</div>
<div class="desc">
</div>
<div class="shortcode">
<object class="simpleecommcartAddToCartButton">
<form id='cartButtonForm_1' class="SimpleEcommCartCartButton" method="post" action="http://beauwaldrop.com/ahs83/store/cart/" >
<input type='hidden' name='task' id="task_1" value='addToCart' />
<input type='hidden' name='simpleecommcartItemId' value='1' />
<input type='hidden' name='hascartwidget' class="hascartwidget" value='no' />
<span style="color:#666;font-size:1.1em;"><em></em></span>
<span style="font-weight:bold;font-size:1.01em;">Price: $89.00</span>
<input type="hidden" name="item_quantity" class="SimpleEcommCartItemQuantityInput" value="1">
<br><input type='submit' value='Add To Cart' name='addToCart_1' id='addToCart_1' />
<input type="hidden" name="action" value="check_inventory_on_add_to_cart" />
<div id="stock_message_box_1" class="SimpleEcommCartUnavailable" style="display: none;">
<h2>We're Sorry</h2>
<p id="stock_message_1"></p>
<input type="button" name="close" value="Ok" id="close" class="modalClose" />
</div>
</form>
</object>
</div>
</div>
</div>
</td>
<td>
<div class="container">
<div class="imgContainer">
<img src=""/>
</div>
<div class="descContainer">
<div class="name">
<h2 style="color:#000;text-transform:uppercase;margin:0;">Friday Night and Saturday Activities (Couple)</h2>
</div>
<div class="desc">
</div>
<div class="shortcode">
<object class="simpleecommcartAddToCartButton">
<form id='cartButtonForm_2' class="SimpleEcommCartCartButton" method="post" action="http://beauwaldrop.com/ahs83/store/cart/" >
<input type='hidden' name='task' id="task_2" value='addToCart' />
<input type='hidden' name='simpleecommcartItemId' value='2' />
<input type='hidden' name='hascartwidget' class="hascartwidget" value='no' />
<span style="color:#666;font-size:1.1em;"><em></em></span>
<span style="font-weight:bold;font-size:1.01em;">Price: $129.00</span>
<input type="hidden" name="item_quantity" class="SimpleEcommCartItemQuantityInput" value="1">
<br><input type='submit' value='Add To Cart' name='addToCart_2' id='addToCart_2' />
<input type="hidden" name="action" value="check_inventory_on_add_to_cart" />
<div id="stock_message_box_2" class="SimpleEcommCartUnavailable" style="display: none;">
<h2>We're Sorry</h2>
<p id="stock_message_2"></p>
<input type="button" name="close" value="Ok" id="close" class="modalClose" />
</div>
</form>
</object>
</div>
</div>
</div>
</td>
</tr>
</table>
If you inspect the source of the page, you have closed and reopened the tr before your last column which is causing the last two columns to be split like that
Having looked at the posted code there is nothing wrong and it works perfectly:
http://jsfiddle.net/9pPXq/