I have my td's set with a height on them, but on mobile devices such as my iPad and iPhone, the td background and border flows out of the td and into the tr. I recreated my exact code to show you what it NORMALLY looks like on my desktop, but as you can imagine there's probably a bug in my code which is allowing it to flow into the tr's
#tstyle2 {
width: 1000px;
border-top: 1px solid #e8e6e6;
border-bottom: 1px solid white;
}
#tstyle2 tr {
height: 160px;
border-bottom: none;
border-collapse: separate;
border-top: 1px solid white;
border-bottom: none;
width: 1000px;
}
#tstyle2 td {
border-top: none;
display: block;
height: 130px;
background-color: white;
border-left: 4px solid #bd6ec1;
box-shadow: 0px 3px 5px #b5b6b6;
}
http://jsfiddle.net/338cR/
I managed to find the solution:
I had to add
display:block;
to the #tstyle2 tr {}
and then add
width: 1000px;
to the #tstyle2 td {}
Related
Hi,
This issue is only reflecting in Google Chrome,
In style
.GridviewScrollHeader > TH, .GridviewScrollHeader > TD {
padding: 5px; white-space: normal;
border-right: 1px solid #a5bed4;
border-left: 1px solid #fff;
border-bottom: 1px solid #AAAAAA;
border-top:none;
background:url(../Images/grid_head.jpg) repeat-x top center #cfe4ff;
text-align: left;
vertical-align: bottom;
}
If you provide the height to the grid then this problem can be solved. For example:
height: 250,
autowidth: true
width: 1100,
I'm trying to create some CSS triangles, using css and the :after pseudo class. Somehow, the up and down arrows are working properly, but the left and right arrows are being "cut off" (see fiddle: http://jsfiddle.net/K9vxN/ )
This is basically the css I'm using:
.arrow-right:after {
content:"";
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid green;
}
Does anyone know why this is happening?
Make the :after pseudo element inline-block (or block). Currently it's an inline element, and it's size is based on the line height of the (empty) text it contains.
You'll have to fix some positioning then, though, but that should be trivial.
div { height:0px; }
div:after { content:""; display: block;}
.arrow-up:after {
margin-left: 50px; /* move right, to show it */
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid black;
}
.arrow-down:after {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
}
.arrow-right:after {
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid green;
}
.arrow-left:after {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right:10px solid blue;
}
<div class="arrow-up"></div>
<div class="arrow-down"></div>
<div class="arrow-left"></div>
<div class="arrow-right"></div>
http://jsfiddle.net/K9vxN/2/
By the way, you might not need to use :after at all, but that depends on whether you want the div to have an arrow or to be an arrow. That's up to you. ;)
Simply add display: block to all your :after selectors. For example
.arrow-up:after {
display: block; /* Added this */
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}
Here's a demo
Ensure the :after pseudo-element is specified as either block or inline-block, dependent upon your usage scenario.
div:after {
content:"";
display: block;
}
See http://jsfiddle.net/kFa6a/
your pseudo-element needs layout to be triggered:
you can set as display:block; or any other value of display but inline.
You can use as well float or position:absolute/fixed to trigger layout.
http://jsfiddle.net/K9vxN/5/
div:after {
content:"";
display:block;/* or table, inline-table,inline-block, but not inline*/
/* to your choice, where it suits design the best */
/* pick up here instead display*/
/*position:absolute;*//* or fixed */;
/* float:left;*//* or right */
}
I have an html file as inserted in the image file and i have to make the heading of it fixed and the rest table scrollable by using CSS.
I found the css to do that but my problem is that after inserting the css in html file the formatting for the header and data does not match .Suggest me whats wrong in my css my css is as following.
I want my formatting should not be disturbed only the header should be fixed up.
<style type="text/css">
div.tableContainer
{
clear: both;
border: 1px solid #963;
height: 300px;
overflow: hidden;
width: 1000px
}
html>body thead.fixedHeader tr
{
display: block
}
thead.fixedHeader th
{
background: #C96;
border-left: 1px solid #EB8;
border-right: 1px solid #B74;
border-top: 1px solid #EB8;
font-weight: normal;
padding: 4px 3px;
text-align: left
position: relative
width: 200px
}
html>body tbody.scrollContent {
display: block;
height: 300px;
overflow: auto;
width: 100%
}
tbody.scrollContent td, tbody.scrollContent tr.normalRow td {
background: #FFF;
border-bottom: none;
border-left: none;
border-right: 1px solid #CCC;
border-top: 1px solid #DDD;
padding: 2px 3px 3px 4px
}
html>body thead.fixedHeader th +th {
width: 50px
}
</style>
this is the image for html file i was not able to insert the source code of it.
add margin to table like jsfiddle.net/h5t98/
table
{
margin-top: 26px;
width: 138px;
}
.month
{
width: 79px;
}
.saving
{
width:49px;
}
I have given fixed column width you can change according to your max column width.
I am trying to build the css for a table like the sudoko one. any help is really appreciated.
I want to draw border every 3 rows and every 3 columns.
.no-stripes .v-table-row,.no-stripes .v-table-row-odd, .v-table-cell-content
{
background: white;
color: $cellcolor;
width: 40px;
height: 40px;
text-align: center;
border-left: solid 1px black;
border-bottom: solid 1px black;
}
Try :nth-of-type(3n) selector for td and tr elements.
Here sample
CSS:
td {
width: 50px;
height: 50px;
border: 1px solid #000;
}
td:nth-of-type(3n) {
border-right: 3px solid red;
}
tr:nth-of-type(3n) td {
border-bottom: 3px solid red;
}
table {
border: 3px solid red;
}
I have two "inline-block" buttons, see the image below:
But, if you click, you will see the other button two pixels down.
Example: http://jsfiddle.net/caio/EUjeY/.
.button {
border-radius: 2px;
border: 1px solid #ddd;
border-bottom: 3px solid #ccc;
background: #eee;
padding: 5px 10px;
display: inline-block;
}
.button:hover {
background: #e7e7e7;
}
.button:active {
border-bottom: 1px solid #ddd;
padding: 7px 10px 5px;
}
Can you help me to prevent this?
Thanks.
you can add this to your .button class:
vertical-align: top;
Working example: http://jsfiddle.net/uW7Sa/1/
Just give .button the css property float: left and both buttons will remain at the same location. This is because float: left removes the button from the flow of the document, so aside from the containing div, it isn't affected by other, inline elements:
.button {
border-radius: 2px;
border: 1px solid #ddd;
border-bottom: 3px solid #ccc;
background: #eee;
padding: 5px 10px;
display: inline-block;
float: left;
}
DEMO
I would provide more code because I'm using a float here, but I don't know what the rest of your document looks like, so I can't compensate.