I’m trying to adapt some css code I found, however my table seems ugly (according to me). I'll explain this on a picture.
css:
td, th {
border-left: 1px solid #494437;
border-top: 1px solid #494437;
padding: 10px;
text-align: left;
}
th {
background-color: #b8ae9c;
-webkit-box-shadow: inset 2px 2px 0px 0px rgba(255,255,255,1);
-moz-box-shadow: inset 2px 2px 0px 0px rgba(255,255,255,1);
box-shadow: inset 2px 2px 0px 0px rgba(255,255,255,1);
border-top: none;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
td:first-child, th:first-child {
border-left: none;
}
I explained what I want by an image:
EDIT: For example I expect white area on right side, when I add padding-right: 0.2em; into "th". But it doesn't change anything.
Is this what you are expecting?
.table {
border: 1px solid #000;
float: left;
}
.header {
border: 2px solid #ccc;
border-width: 2px 0 0 2px;
background-color: #b8ae9c;
margin: 2px;
float: left;
}
<div class="table">
<div class="header">Header</div>
<div class="header">Header</div>
</div>
Related
I'm trying correctly shadow the tabs on this site. Not sure If the issue are the values or the html markup.
div.ui-tabs-panel.ui-widget-content.ui-corner-bottom {
background-color: #ffffff;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
div.variableselector_valuesselect_variabletitle_panel {
background-color: #ffffff;
}
a.ui-tabs-anchor {
box-shadow: 1px 4px 2px rgba(0,0,0,0.16), 1px 0px 5px rgba(0,0,0,0.23);
}
here's a screenshot:
I think you are looking for this.
<div class="tabs">
<div class="tab"></div>
<div class="tab"></div>
</div>
<div class="box-container">
</div>
.box-container{
position: absolute;
top:72px;
left:4em;
tansform: translate(0,-50%);
height: 50%;
width:60%;
border: 2px solid #ddd;
z-index:0;
background: #fff;
filter:drop-shadow(2px 2px 5px #555)
}
.tabs{
position: absolute;
display:flex;
left:4em;
top:1.5em;
justify-content: space-between;
z-index:999;
}
.tab{
height:50px;
width:150px;
border:1px solid #ddd;
border-bottom:0;
background-color: #fff;
margin-right: 10px;
box-shadow: 0 -5px 18px -5px #555;
box-shadow: 18px 0 18px -5px #555;
box-shadow: -5px 0 18px -5px #555;
}
I need to make box-shadow for each table cell using :before pseudo element. It works perfect in all browsers except firefox.
CSS
table {
border-collapse: collapse;
}
.box2 .c-table {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
border-left: 1px solid #e5e3d5;
border-top: 1px solid #e5e3d5;
border-bottom: 1px solid #ebe8da;
border-right: 1px solid #ebe8da;
}
.box .c-table {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
border-left: 1px solid #e0ded1;
border-top: 1px solid #e0ded1;
border-bottom: 1px solid #e6e4d6;
border-right: 1px solid #e6e4d6;
}
.inbox .c-table {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
border-left: 1px solid #e0ded1;
border-top: 1px solid #e0ded1;
border-bottom: 1px solid #e6e4d6;
border-right: 1px solid #e6e4d6;
}
.c-table tr > td {
position: relative;
padding: 5px;
}
.c-table tr + tr {
border-top: 1px solid #f0eee0;
}
.c-table td + td {
border-left: 1px solid #f0eee0;
}
.c-table td:before {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
content: '';
-moz-box-shadow: inset 0 0 4px rgba(0,0,0,0.15);
-webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.15);
box-shadow: inset 0 0 4px rgba(0,0,0,0.15);
}
.inbox {
display: inline-block;
font-family: 'Open Sans', sans-serif;
font-size: 12px;
color: #444444;
padding: 5px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
background-color: #d3d2c5;
border: 1px solid #f0eee0;
text-shadow: -1px -1px rgba(240,238,224,1), 1px 1px rgba(240,238,224,1);
-moz-box-shadow: inset 0 0 4px rgba(0,0,0,0.15);
-webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.15);
box-shadow: inset 0 0 4px rgba(0,0,0,0.15);
}
.box2 .inbox {
border-left: 1px solid #e5e3d5;
border-top: 1px solid #e5e3d5;
border-bottom: 1px solid #ebe8da;
border-right: 1px solid #ebe8da;
}
HTML
<div class="inbox margin-space">
<table class="c-table ">
<tbody>
<tr class="th">
<td>column1</td>
<td>column2</td>
<td>column3</td>
</tr>
<tr>
<td>row1</td>
<td>row2</td>
<td>row3</td>
</tr>
<tr>
<td>row4</td>
<td>row5</td>
<td>row6</td>
</tr>
<tr>
<td>row7</td>
<td>row8</td>
<td>row9</td>
</tr>
<tr>
<td>row10</td>
<td>row11</td>
<td>row12</td>
</tr>
</tbody>
</table>
</div>
I want to use pseudo for .c-table td because it makes a visual diffrence. ( visible in chrome )
http://fiddle.jshell.net/UXeBj/10/
Temporary solution
#-moz-document url-prefix() {
.c-table td:before {
content: none;
}
.c-table td {
box-shadow: inset 0 0 4px rgba(0,0,0,0.15);
}
}
apparently this bug report causes the same issue:
https://bugzilla.mozilla.org/show_bug.cgi?id=63895
Any idea why my search box comes out all buggy looking like this:
Instead of like this:
Here is my HTML code:
<form class="searchform">
<input class="searchfield" type="text" value="Search..." onfocus="if (this.value == 'Search...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search...';}" />
<input class="searchbutton" type="button" value="Go" />
</form>
CSS
#header {
background-color: #F1F1F1;
height: 50px;
border-bottom:1px solid #E1E1E1;
margin: 0px auto;
}
#header_content {
width: 980px;
margin: 0px auto;
padding-top: 8px;
}
#header_logo {
padding-right: 20px;
float:left;
}
.searchform {
display: inline-block;
zoom: 1; /* ie7 hack for display:inline-block */
*display: inline;
border: solid 1px #d2d2d2;
padding: 3px 5px;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
-webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1);
-moz-box-shadow: 0 1px 0px rgba(0,0,0,.1);
box-shadow: 0 1px 0px rgba(0,0,0,.1);
background: #f1f1f1;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
background: -moz-linear-gradient(top, #fff, #ededed);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie7 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie8 */
}
.searchform input {
font: normal 12px/100% Arial, Helvetica, sans-serif;
}
.searchform, .searchfield {
background: #fff;
padding: 6px 6px 6px 8px;
width: 202px;
border: solid 1px #bcbbbb;
outline: none;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
}
.searchform .searchbutton {
color: #fff;
border: solid 1px #494949;
font-size: 11px;
height: 27px;
width: 27px;
text-shadow: 0 1px 1px rgba(0,0,0,.6);
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
background: #5f5f5f;
background: -webkit-gradient(linear, left top, left bottom, from(#9e9e9e), to(#454545));
background: -moz-linear-gradient(top, #9e9e9e, #454545);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie7 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie8 */
}
Full demo at: http://jsfiddle.net/FBVL2/
.searchform is not wide enough.
.searchform {
width: 250px;
}
http://jsfiddle.net/FBVL2/3/
Reason has something to do with CSS box model.
You're setting the container to be the same size as the search field. This means there's no space for anything else. You need to have a the input be box padding + input margin + button margin + button width.
Set the #searchform to 250px wide, and the input to 200px wide.
demo
The search form input takes up the whole box, this came out what I'd call perfect.
.searchform input {
font: normal 12px/100% Arial, Helvetica, sans-serif;
width: 75%;
}
The problem is just this:
.searchform, .searchfield
background: #fff;
padding: 6px 6px 6px 8px;
width: 202px;
border: solid 1px #bcbbbb;
outline: none;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
}
Just remove .searchform
.searchfield {
background: #fff;
padding: 6px 6px 6px 8px;
width: 202px;
border: solid 1px #bcbbbb;
outline: none;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
}
For me with this changes is working well.
I have the following css:
fieldset ul li input {
width: 96%;
margin: 0;
padding: 6px;
font-size: 13px;
border: 1px solid #CCC;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0 2px 2px white, inset 0 1px 3px #EEE;
-webkit-box-shadow: 0 2px 2px white, inset 0 1px 3px #EEE;
box-shadow: 0 2px 2px white, inset 0 1px 3px #EEE;
}
Which is working under Firefox and Chrome. However in IE9, when I insert some text, I can't see it completely. As you can see is hidden in the half of it:
Either increase the height or the padding.
input {
padding: 10px;
}
We are using posts and gets, which out-of-the box appear as links (gets) and buttons (posts). In an effort to provide a pleasant and consistent look to the UI, we have button themed all UI click interactions to look the same using css:
.minimal
{
background: #e3e3e3;
border: 1px solid #bbb;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: inset 0 0 1px 1px #f6f6f6;
-moz-box-shadow: inset 0 0 1px 1px #f6f6f6;
box-shadow: inset 0 0 1px 1px #f6f6f6;
color: #333;
font: bold 12px "helvetica neue" , helvetica, arial, sans-serif;
padding: 5px 20px 5px 20px;
text-align: center;
text-shadow: 0 1px 0 #fff;
text-decoration: none;
}
.minimal:hover
{
background: #d9d9d9;
-webkit-box-shadow: inset 0 0 1px 1px #eaeaea;
-moz-box-shadow: inset 0 0 1px 1px #eaeaea;
box-shadow: inset 0 0 1px 1px #eaeaea;
color: #222;
cursor: pointer;
}
.minimal:active
{
background: #d0d0d0;
-webkit-box-shadow: inset 0 0 1px 1px #e3e3e3;
-moz-box-shadow: inset 0 0 1px 1px #e3e3e3;
box-shadow: inset 0 0 1px 1px #e3e3e3;
color: #000;
}
...and used this way:
#Html.ActionLink("Edit", "Edit", new { id = Model.ID }, new {#class = "minimal"})
<input type="submit" class = "minimal" value="submit" />
The problem is with the padding statement in .minimal, it seems that depending on the length of text contained in the ActionLink you will get a longer or shorter button. I would use the 'width' tag but in only has effect on the posts... not on the ActionLinks. Has anyone successfully addressed this issue?
width only works on block elements. Try to add this:
a.minimal {
display: inline-block;
padding: 5px 0;
width: 198px; /* subtract border */
}
and add width to .minimal:
width: 200px;
(or style for links in general and treat the submit button in a special way)
For better cross-browser compatibility you might also need to do some trickery according to this (old) article:
a.minimal {
display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
padding: 5px 0;
width: 198px; /* subtract border */
}
You need to try what works for your target browsers. I tried the first (simpler) solution and it works on all current browsers and IE7 + IE8.