Hi I just added cellspacing to get space between the cell, but this has cut out the border of the cell an the left hand side.
This is happening because of the use of border-collapse:collapse for all tables, but I read on the net that this is to standardize for cross browser.
If this is true.
Should I keep border-collapse:collapse for all tables? if so what fix there is for this.
Sorry.
I am using IE7, but it has to be cross browser.
CSS example
/*Universal selector:
This rule set will be applied to every element in a document:*/
*
{
margin:auto;
padding:auto;
/*text-align:center;*/
}
/*The folowing rule will help to minimaze the differences between browesers*/
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th {font-size:1em; font-weight:normal; font-style:normal;}
ul,ol {list-style:none;}
img {border:none;}
caption,th {text-align:left;}
table {border-collapse:collapse ;border-spacing:0;font-size:1em; font-weight:normal; font-style:normal; font-family:Times New Roman;}
.divTitle{
margin:10px;
}
}
.title
{
font-weight:bold;
color:#0076BF;
font-size:1.4em;
font-family:Times New Roman;
}
.divContainer
{
margin:10px;
background-color:#C7D8EE;
border:2px solid #0076BF;
text-align:left;
}
.tableContainer1
{
color:#0076BF;
margin:10px;
border-spacing: 15px;
empty-cells:show;
}
.tableContainer1 tbody tr td
{
background-color:white;
border:2px solid #0076BF;
border-collapse:separate;
}
border-collapse is to remove all spacing between cells. If you want cellspacing, you could use the border-spacing css property. It doesn't work in IE7 and below, but all other browsers will ignore the cellspacing attribute if border-spacing is present, so you can use both to get it working in all browsers.
Do not use border-collapse:collapse; if you want to have space...
Related
I'm looking to overlap the same texts right on top of each other for an interesting idea I had on syntax highlighting.
I'm trying to do it with the textarea in the foreground, and the div in the background.
After setting the same position of the elements as well as the same font size, they still do not overlap perfectly. What am I missing, exactly?
Fiddle
div,textarea{
position:absolute;
top:0;
left:0;
background:transparent;
font-size:1em;
line-height:1em;
}
set a same font-family for both
textarea has 1px border so you can add border:1px solid transparent to div which has the text so that it aligns
* {
margin: 0;
padding: 0;
}
div{
border:1px solid transparent
}
div,
textarea {
position: absolute;
top: 0;
left: 0;
background: transparent;
font-size: 1em;
line-height: 1em;
font-family: arial;
}
<div>Hello, world!</div>
<textarea>Hello, world!</textarea>
Try setting the font-family, padding, and border-width explicitly:
div,textarea{
position:absolute;
top:0;
left:0;
background:transparent;
font-size:1em;
line-height:1em;
font-family:sans-serif;
padding:0;
border-width:0;
}
Two comments:
Browsers define a default style for textarea elements, so the trick is to figure out what properties are being set by the browser and override those explicitly. It's best to override the properties on both the div and the textarea. If you only change the div to accommodate for the browser's default style of the textarea, you'll get varying results in different browsers. For example, in Chrome the default border width for a textarea is 1 pixel, while in Firefox, it's 2 pixels.
Due to the way font anti-aliasing works, you'll always get a slightly bold effect. Probably best to set one of the two font colors to white or transparent.
Try this :-
Link
div,textarea{
position:absolute;
top:0;
left:0;
background:transparent;
font-size:1em;
line-height:1em;
font-family:arial /*add same font-family */
}
and
div{
padding:3px 3px 0
}
I have a error message to be displayed
i can center it using text-align center if there was no background. but now its clearly visible that it occupies the whole width of the container it being a <p>.
so i gave width and margin:0 auto;
but i cant give its class to every other error message because width changes.
so is there any way to center it without giving width.
here is what i currently have JSFIDDLE
HTML:
<p class="error"><b>Error:</b> Dont select corners, select edges!</p>
CSS:
.error{
padding:15px;
border:1px solid #ebccd1;
border-radius:4px;
background-color: #f2dede;
margin:0 auto;
font-family:consolas;
font-size:17px;
color:#a94442;
width:370px;
}
Change the display of the p element to inline-block and then add text-align:center to the parent element to center it.
UPDATED EXAMPLE HERE
.parent {
text-align:center;
}
.error {
padding:15px;
border:1px solid #ebccd1;
border-radius:4px;
background-color: #f2dede;
font-family:consolas;
font-size:17px;
color:#a94442;
display:inline-block;
}
Alternatively, you could change the display of the p element to table as King King points out.
It's worth noting that this approach wouldn't work in IE7 though.
You can use display:table for the p:
.error {
...
display:table;
}
Demo.
I'm using a theme that has a really nice grid-like effect. The normal amount of td's is 5. But for some sections I only need two, and for others I need more. I'd like to be able to have them all the same size, because whats happening is when I put the proper amount that I require, it will sometimes stretch the boxes too big or too small. Here's the CSS, and if you need anything else, just let me know.
body {background-color:#cccccc; color:#000000; font:16px Arial, sans-serif; word-wrap:break-word; width:100%; height:100%; margin:0; padding:0;}
a {text-decoration:underline; color:black;}
a:hover {text-decoration:none;}
#wrappper {background-color:#ffffff; width:600px; margin:60px auto; padding:0 50px 50px;}
#title {background-color:#000000; color:#ffffff; text-align:center; text-transform:uppercase; padding:20px 0; margin:0 -50px 20px;}
table {width:100%; border-collapse:collapse;}
table th {font-size:20px; padding:24px 0 8px; text-transform:uppercase; text-align:left;}
table td {vertical-align:center; padding:4px 1px;}
table table {width:300px; height:50px;}
table table td {border:solid 1px #000000; width:50px; height:50px; padding:0;}
table table td img {display:block; border:0; max-width:30px; max-height:30px; width:auto; height:auto; margin:auto;}
#credit {border-top:solid 2px black; margin-top:40px; padding-top:20px; text-align:center; font-size:12px;}
And then heres the colspan I believe...
<table>
<col width="auto"><col width="150px"><col width="150px">
<tr><th colspan="2">
jsFiddle: http://jsfiddle.net/Zorabelle/sYJKt/
Add empty <td></td>s where you have less than 5 in a given <tr>. Alternatively, if you want to 'join' <td>s, use colspan.
EDIT: How about using hidden <td>s to maintain the layout, like in this jsFiddle:
td.hidden {
visibility: hidden;
}
I have a table and 2 columns in a row. In the first one I have a text input and in the other one I have a container div with a margin in em and 2 inline-block elements inside it.
Everything's fine in Firefox, Safari and even in Opera. But in Chrome the second inline-block element is shifted below. The interesting thing is, if I set the margin(left) of the container in pixels, this doesn't happen.
Here's a fiddle: http://jsfiddle.net/inhan/bttBs/
Here's the structure:
<table>
<tr>
<td><input type="text" /></td>
<td>
<div class="buttons">
<span>Reset</span>
<span>Submit</span>
</div>
</td>
</tr>
</table>
And here's the rough CSS
body {
font-size:0.8em;
font-family:Arial, Helvetica, sans-serif;
color:#2E2E2E;
}
table,tbody,tr,td {
border-spacing:0;
margin:0;
padding:0;
}
input[type="text"] {
width:11em;
border:1px solid #BBB;
padding:4px 3px;
margin:2px;
}
.buttons {margin-left:1em} /* set this to 13px */
a.button {
text-decoration:none;
outline:none;
display:inline-block;
*display:inline; zoom:1; /* IE 6/7 */
width:65px;
height:26px;
margin:0 1px;
font-family:'Open Sans';
font-size:0.9em;
text-align:center;
color:#333;
cursor:pointer;
border-style:none;
/* there's a bg image here */
background-color:lightgray;
}
a.button span {
display:block;
margin:4px 0;
}
Does anybody know what's happening there?
A little advice that may work, is to use CSS reset from the meyerweb, it can be easily searched on Google.
Remove the class from the <div class="buttons">
jsfiddle.net
Apparently this was a bug with that version of Chrome at the time I asked this question. The issue does not exist anymore and the layout in the fiddle I provided looks just fine in the current version (23.0.1271.101) of Chrome in mac.
I need to pad just one cell in my table. I gave the td element a class and defined the class in my CSS file like this
.itemQuantity
{
padding-right:30px;
text-align:right;
background-color: #EEE;
}
Padding-right does not seem to be doing anything.
I changed the css to
td.itemQuantity
{
padding-right:30px;
text-align:right;
background-color: #EEE;
}
Now it works.