i created the table with empty span tags with padding giving them a box shadow.
its simple html structure is as follow.
<table>
<tr>
<td><span class="tokenHolder" data-ans="5" style="padding: 2px 53.5px;"></span></td>
<td><span class="tokenHolder" data-ans="5" style="padding: 2px 53.5px;"></span></td>
</tr>
<tr>
<td><span class="tokenHolder" data-ans="5" style="padding: 2px 53.5px;"></td></span>
<td><span class="tokenHolder" data-ans="5" style="padding: 2px 53.5px;"></span></td>
</tr>
</table>
with css code as below..
th {
font-size: 20px;
background-color: #cccccc;
padding: 5px 8px;
}
td {
padding: 5px 5px 10px 5px;
font-size: 18px;
background-color: #ececec;
}
th,td {
border-right: 2px solid #dedcdd;
}
table {
margin-top: 25px;
border: 2px solid #dedcdd;
position: relative;
border-collapse: collapse;
}
.tokenHolder {
background-color: white;
cursor: pointer;
position: relative;
color: transparent;
background-size: 100% 100%;
background-repeat: no-repeat;
box-shadow: 2px 2px 2px gray;
border-radius: 2px;
}
the respective js fiddle is at http://jsfiddle.net/Pank/4A9BM/
here in after using border-collapse:collapse at the table removes the box shadow for the span inside it..
otherwise hole code is running fine in all browsers..
Please help for this ie related quirk..
Just add
<!doctype html>
in the top of your HTML document. It will work fine. Tested in IE10
updated answer.
screen shot: When i use
http://www.image-share.com/ijpg-2440-42.html
Screen shot: without using
http://www.image-share.com/ijpg-2440-43.html
http://www.image-share.com/ijpg-2440-44.html
here is the link to it. just read it.
w3schools
Related
This question already has answers here:
Chrome render bug with border-collapse
(1 answer)
Chrome bug with colspan and border?
(2 answers)
Closed 3 years ago.
What I'm basically doing is to reproduce a pre-formatted table in HTML/CSS. However, it's displayed differently in different browsers.
Firefox and IE shows it as it's intended. Chrome, however, draws a bogus line that's not there even by inspecting the HTML. In the original file, Chromium Embedded (CEF1) has additional differences.
I made a snippet to demonstrate the problem:
<html>
<head>
<style type="text/css" media="all">
#media all {
TABLE {
border-collapse: collapse;
border-spacing: 0;
margin: 0;
padding: 0;
border: none;
table-layout: fixed;
empty-cells: show;
}
TR {
page-break-inside: avoid;
}
TD {
font-size: 11pt;
font-family: "Times New Roman", Times, serif;
text-align: center;
vertical-align: middle;
padding: 1px;
}
TD.S1 {
border-left: 1px solid black;
border-right: 1px solid black;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
TD.S2 {
border: none;
}
TD.S3 {
border-left: none;
border-right: none;
border-top: none;
border-bottom: 1px dotted black;
}
}
</style>
</head>
<body>
<table>
<tr>
<td class="S1">A</td>
<td class="S2">B</td>
</tr>
<tr>
<td colspan="2" class="S3">C</td>
</tr>
</table>
</body>
</html>
So the question is: Is there a problem with the above CSS, or anything that should be used in a different way? I doubt such a basic thing could be a Chrome bug. Still, I don't want that line below cell "B".
Browsers have some leverage in how they interpret things, and Chrome can be ...different... and intractable sometimes.
In any case, I don't think you can reset the border color or size (it ignores transparent and 0), but you can override it with a color that will blend into your background. Removing border-collapse may work, but seems like the opposite of what you really want.
As a bonus, putting the border on all sides corrects a jog downward that Chrome was giving 'B' because it lacked a border. (Other browsers didn't do this.)
<html>
<head>
<style type="text/css" media="all">
#media all {
TABLE {
border-collapse: collapse;
border-spacing: 0;
margin: 0;
padding: 0;
border: none;
table-layout: fixed;
empty-cells: show;
}
TR {
page-break-inside: avoid;
}
TD {
font-size: 11pt;
font-family: "Times New Roman", Times, serif;
text-align: center;
vertical-align: middle;
padding: 1px;
}
TD.S1 {
border-left: 1px solid black;
border-right: 1px solid black;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
TD.S2 {
border: 1px solid white;
}
TD.S3 {
border-left: none;
border-right: none;
border-top: none;
border-bottom: 1px dotted black;
}
}
</style>
</head>
<body>
<table>
<tr>
<td class="S1">A</td>
<td class="S2">B</td>
</tr>
<tr>
<td colspan="2" class="S3">C</td>
</tr>
</table>
</body>
</html>
The border-collapse was causing the issue in Chrome. Not sure if needed?
https://jsfiddle.net/mayjr9dL/
#media all {
TABLE {
border-spacing: 0;
margin: 0;
padding: 0;
border: none;
table-layout: fixed;
empty-cells: show;
}
TR {
page-break-inside: avoid;
}
TD {
font-size: 11pt;
font-family: "Times New Roman", Times, serif;
text-align: center;
vertical-align: middle;
padding: 1px;
}
TD.S1 {
border-left: 1px solid black;
border-right: 1px solid black;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
TD.S2 {
border: none;
}
TD.S3 {
border-left: none;
border-right: none;
border-top: none;
border-bottom: 1px dotted black;
}
}
You just need to remove border-collapse:collapse to remove underline from cell "B".
<html>
<head>
<style type="text/css" media="all">
#media all {
TABLE {
border-spacing: 0;
margin: 0;
padding: 0;
border: none;
table-layout: fixed;
empty-cells: show;
}
TR {
page-break-inside: avoid;
}
TD {
font-size: 11pt;
font-family: "Times New Roman", Times, serif;
text-align: center;
vertical-align: middle;
padding: 1px;
}
TD.S1 {
border-left: 1px solid black;
border-right: 1px solid black;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
TD.S2 {
border: none;
}
TD.S3 {
border-left: none;
border-right: none;
border-top: none;
border-bottom: 1px dotted black;
}
}
</style>
</head>
<body>
<table>
<tr>
<td class="S1">A</td>
<td class="S2">B</td>
</tr>
<tr>
<td colspan="2" class="S3">C</td>
</tr>
</table>
</body>
</html>
I think this is happening because of your border-collapse property. If you remove it you will see the line vanishes from underneath the B. Sometimes browsers interpret CSS properties differently because there is no set rules. You can try out websites like caniuse to find out the difference in CSS properties or Pleeease, which is a Node.js application that easily processes your CSS. It simplifies the use of preprocessors and combines them with best postprocessors. It helps create clean stylesheets, support older browsers and offers better maintainability.
I've recently been attempting to insert music into a blog page using the Billy audio player. I've done this before several times, but this time the player isn't showing up on the completed page (I looked on both FireFox and Google Chrome) and I cannot for the life of me figure out why.
Here's a sample of the code I've written:
<html>
<head>
<title>Playlists</title>
<style>
/* --- MAIN FORMATTING --- */
body
{
background: #888888;
margin: 0px;
padding: 75px;
word-wrap: break-word;
}
h1
{
margin: -26px 0px -4px 10px;
font-size: 30px;
line-height: 30px;
font-style: italic;
color: #f9f9f9;
text-shadow: -1px 0 #000000, 0 1px #000000, 1px 0 #000000, 0 -1px #000000;
}
/* --- CONTENT --- */
.content
{
width: 620px;
background-color: #202020;
border: 1px solid rgba(249,249,249,0.1);
border-radius: 10px;
padding: 8px 10px;
margin: 0px;
color: rgba(255,255,255,0.7);
}
/* --- MUSIC PLAYER --- */
.musicplayer
{
color: black;
text-decoration: none;
background-color: #ffffff;
border: 0px solid black;
border-radius: 25px;
padding: 5px 8px;
margin: -26px 0px 2px 420px;
width: 200px;
height: 12px;
}
/* --- TABLE --- */
table
{
border-collapse: collapse;
color: rgba(255,255,255,0.5);
line-height: 130%;
}
tr
{
border-bottom: 1px solid rgba(255,255,255,0.1);
}
td
{
padding: 2px 5px;
}
</style>
</head>
<body>
<h1>Playlist</h1>
<div class="musicplayer"><embed src="http://www.sheepproductions.com/billy/billy.swf?autoplay=false&f0=http://k007.kiwi6.com/hotlink/2w46d4u3sh/Citizen_Soldiers.mp3&t0=Citizen Soldiers&f1=http://k003.kiwi6.com/hotlink/8kun7qcg5t/Immortals.mp3&t1=Immortals&f2=http://k003.kiwi6.com/hotlink/3rzujskuoo/Rewind.mp3&t2=Rewind&f3=http://k003.kiwi6.com/hotlink/oyl9ee9xsw/No_End_No_Beginning.mp3&t3=No End, No Beginning&f4=http://k003.kiwi6.com/hotlink/xgpyq94ryc/Sound_the_Bugle.mp3&t4=Sound the Bugle&total=5" quality="high" wmode="transparent" width="200px" height="10px" name="billy" align="middle" type="application/x-shockwave-flash"/></div>
<div class="content">
<table>
<tr>
<td width=15px>1.</td>
<td width=200px>
"Citizen Soldiers"</a></td>
<td width=400px>3 Doors Down</td>
</tr>
<tr>
<td>2.</td>
<td>
"Immortals"</a></td>
<td>Fall Out Boy</td>
</tr>
<tr>
<td>3.</td>
<td>
"Rewind"</a></td>
<td>Poets of the Fall</td>
</tr>
<tr>
<td>4.</td>
<td>
"No End, No Beginning"</a></td>
<td>Poets of the Fall</td>
</tr>
<tr style="border: 0px;">
<td>5.</td>
<td>
"Sound the Bugle"</a></td>
<td>Bryan Adams</td>
</tr>
</table>
</div>
</body>
</html>
Can anyone tell me what it is I might be forgetting/doing wrong?
EDIT: This is going on a custom Tumblr page, if that makes any difference.
I pulled your code in notepad++ and it is working in for chrome and firefox. If you are trying to insert into a blog or forum they might have their own syntax on html posts.
I managed to figure out the problem. There was nothing wrong with my code: as it turns out, Tumblr's option to serve blogs over SSL was interfering with the embed. I turned the option off, and the music player now appears as intended.
I have a css which works perfectly:
.border
{
border: 1px solid black;
font-size: 12px;
padding: 2px;
vertical-align: top;
text-align: left;
}
.clean
{
border: none;
font-size: 14px;
}
No problem. But to create a table with border I will have to do:
<table class="border">
<tr>
<td class="border"></td>
<td class="border"></td>
</tr>
I find this brutally tedious. Isn't there a way to go:
<table class="border">
<tr><td></td><td></td></tr>
with the same result as the above?
I want an "excel-like" square grid, not only a border around the table (second example).
Pls help.
Yes there is:
.border { /* matches all element with that class */
border-collapse: collapse; /* excel like (collapse cells border together) */
border:1px solid black;
font-size: 12px;
padding: 2px;
vertical-align: top;
text-align: left;
}
.border td { /* matches all td which have "border" in a parent class element */
border:1px solid black;
font-size: 12px;
padding: 2px;
vertical-align: top;
text-align: left;
}
`
You don't need to apply the class inside all your tds. Just use like this:
table.border,table.border td{//Applying border in table html
border: 1px solid black;
}
I have a table cell with text in it but how can I make the text flush to the top or bottom of the cell (with no padding above it)? I've tried vertical-align, but it's still not quite to the top 'edge'.
My code
<table>
<tr>
<td class="foo">3.2325</td>
<td class="bar">4.5931</td>
</tr>
</table>
table {
border-bottom: 2px solid black;
border-collapse: collapse;
}
table td {
border-top: 1px solid black;
border-collapse: collapse;
background-color: pink;
padding: 0 10px 10px;
}
.foo {
font: bold 30px arial;
border-right: 1px solid black;
vertical-align: top;
}
.bar {
font: normal 16px arial;
}
JSfiddle example: http://jsfiddle.net/KznxN/2/
depending on whether you wish more above or below, you adjust the "line-height" depending
example:
. {foo
font: bold 30px arial;
border-right: 1px solid black;
vertical-align: top;
line-height: 24px;
}
But beware, it would be better fix the height size of your cell
In the snippet http://jsfiddle.net/hXMLF/3/ you see a small border on the corners between the white border of the cells and the page background. How can I prevent it?
HTML
<table cellspacing="0" cellpadding="0">
<tr>
<td>Test</td>
<td>Test</td>
</tr>
</table>
CSS
body {
background-color: #efefef;
}
table {
margin: 10px;
border-collapse: separate;
border-spacing: 0px;
}
td {
border-radius: 5px;
background-color: #369;
color: white;
border: 5px solid white;
}
There are two solutions I came up with. Use solution 2 but I'm keeping solution 1 here as well because it may come in handy in some other situation to someone else.
Solution 1: Display
Changing td display to inline-block does the trick but may impact your actual content elsewhere...
td {
display: inline-block; /* this has been added */
border-radius: 5px;
background-color: #369;
color: white;
border: 5px solid white;
}
Here's your changed JSFiddle for solution 1.
Solution 2: Background clip (recommended)
But since you're using CSS3 anyway this is an even better solution:
td {
background-clip: padding-box; /* this has been added */
border-radius: 5px;
background-color: #369;
color: white;
border: 5px solid white;
}
Here's your changed JSFiddle for solution 2.
If it doesn't work on all browsers, you should be aware that there are browser specific settings as -moz-background-clip and -webkit-background-clip that use a different set of values (they basically omit box from border-box, padding-box and content-box)
This happens because
border-collapse: separate;
makes it like that. Tables aren't exactly the prima donna at styling, I recommend You try to use <div> tags instead.
TRY THIS: http://jsfiddle.net/hXMLF/9/
Check this link. You can generate CSS for round corner cell.
http://cssround.com/
Example:
<div
style="
width:400px;
height:300px;
-webkit-border-radius: 0px 26px 0px 0px;
-moz-border-radius: 0px 26px 0px 0px;
border-radius: 0px 26px 0px 0px;
background-color:#C2E3BF;
-webkit-box-shadow: #B3B3B3 2px 2px 2px;
-moz-box-shadow: #B3B3B3 2px 2px 2px;
box-shadow: #B3B3B3 2px 2px 2px;
">
Just modify width and height values to get what you need...
</div>