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.
Related
I have a table on the webpage which I am trying to make responsive(fit to the screen size) but unfortunately the table is going out of the screen in the mobile view for some reasons. The pictorial represenation of what I want in a mobile view is:
At this moment after inspection, I am able to get the following image in a mobile view (which is going out of the screen):
The div class = "section header single" points to the 1st ROW having the "Dependents" text. The HTML code for it is:
<div class="section header single">
<div class="inter">
<!-- ko i18n:'dependents' -->Dependents<!-- /ko -->
<div class="info header-sections" data-bind="popup: {
popupId: 'info-popup',
closeOnOutsideClick: true,
vm: {title: '', message: depend_info[locale.selected_locale()]}
}"></div>
</div>
</div>
The above image is in the inspect mode and in the mobile view(in between 320px and 767px) as well and it is going out of the screen which I am trying to resolve. The CSS(mobile view) and CSS(desktop view) which I am using for the above image are-
CSS Mobile View for the 1st row containing the text "Dependents":
#media screen and (max-width: 768px)
{
.default-body .section.header.single
{
background: none !important;
background-color:#656364 !important;
border: 1px solid #bfbfbf !important;
box-shadow: none !important;
top: 0 !important;
margin-top:0px !important;
}
}
.section.header
{
position: relative;
padding: 10px 0px !important;
width: 100%;
}
.section
{
height: auto;
display: table;
}
.default-body .section.header.single {
background: url(img/section-bg-BenPal.png) repeat-x scroll 0 0 #0359a6 !important;
border: 1px solid #bfbfbf !important;
box-shadow: none !important;
top: 0 !important;
margin-top: 40px !important;}
CSS Desktop View for the 1st row containing the text "Dependents":
.section.header.single {
top: 0;
}
.default-body .section.header {
background-color: #0a2f73;
border: 1px solid #0a2f73;
}
.section.header {
position: relative;
top: 20px;
padding: 10px 0px !important;
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
width: 100%;
}
.section.single {
margin-top: 0px;
}
.section {
box-shadow: 0 2px 3px #CCCCCC;
-moz-box-shadow: 0 2px 3px #CCCCCC;
-webkit-box-shadow: 0 2px 3px #CCCCCC;
width: 100%;
height: auto;
padding: 10px 0px;
display: table;
margin-top: 20px;
}
My task is to make the entire table fit to the mobile screen. I have tried using width: auto or 100% but still the table is going out of the screen for some reasons. In the parent classes as well, I have changed the width to 100% or auto but still the table is going out of the screen.
In order to make the things more clear, I am including the HTML and CSS codes for the content beneath the "Dependents" text row:
The HTML code for the content beneath the Dependents row is:
<div class="section single">
<div class="inter">
<table cellspacing="0" cellpadding="0" class="table title">
<tbody><tr>
<td class="cell1"><!-- ko i18n:'dependents.name' -->Name<!-- /ko --></td>
<td class="cell2"><!-- ko i18n:'dependents.type' -->Type<!-- /ko --></td>
<td class="cell3"><!-- ko i18n:'dependents.status' -->Status<!-- /ko --></td>
<td class="cell4 last"></td>
</tr>
</tbody><tbody data-bind="foreach: dependents"></tbody>
</table>
<!-- ko ifnot: pendingApproval || viewReadonlyBenefits-->
<table cellspacing="0" cellpadding="0" class="table">
<tbody><tr data-bind="css:{hidden: dependents().length != 0}" class=""><td colspan="3" class="cell-common"><!--ko i18n: 'dependents.no.dependent' -->There is no dependent registered in your file<!--/ko--></td></tr>
<tr>
<!-- ko if: showAddButton() --><!-- /ko -->
</tr>
</tbody></table>
<!-- /ko -->
</div>
</div>
The CSS code(Desktop view) for the content beneath the "Dependents" text row is:
.section.single {
margin-top: 0px;
}
.section {
box-shadow: 0 2px 3px #CCCCCC;
-moz-box-shadow: 0 2px 3px #CCCCCC;
-webkit-box-shadow: 0 2px 3px #CCCCCC;
width: 100%;
height: auto;
padding: 10px 0px;
display: table;
margin-top: 20px;
}
.section {
border-top: 0;
border-left: 1px solid #aecaea;
border-right: 1px solid #aecaea;
border-bottom: 1px solid #aecaea;
box-shadow: 0 2px 3px #CCCCCC !important;
-moz-box-shadow: 0 2px 3px #CCCCCC !important;
-webkit-box-shadow: 0 2px 3px #CCCCCC !important;
background-color: #fff;
}
I am also including the snapshot of the webpage corresponding to above HTML and CSS codes::
The CSS code for the mobile view corresponding to the content beneath the "Dependents" text row is:
#media screen and (max-width: 767px) and (min-width: 320px)
.section.single {
margin-top: 0px;
background-color: #EBEBEB;
}
.section.single {
margin-top: 0px;
}
.section {
box-shadow: 0 2px 3px #CCCCCC;
-moz-box-shadow: 0 2px 3px #CCCCCC;
-webkit-box-shadow: 0 2px 3px #CCCCCC;
width: 100%;
height: auto;
padding: 10px 0px;
display: table;
margin-top: 20px;
}
.section {
border-top: 0;
border-left: 1px solid #aecaea;
border-right: 1px solid #aecaea;
border-bottom: 1px solid #aecaea;
box-shadow: 0 2px 3px #CCCCCC !important;
-moz-box-shadow: 0 2px 3px #CCCCCC !important;
-webkit-box-shadow: 0 2px 3px #CCCCCC !important;
background-color: #fff;
}
In this code -
<style>
#boxx{
box-shadow: 0 0 5px 0 rgba(0,0,0,0.3);
border: 6px solid #fff;
background-color: #0e5b93;
min-height: 345px;
max-width: 745 px;
padding-left: 15px;
padding-right: 15px;
}
#ter {
text-align: center;
}
</style>
<div id="boxx">
<table>
<tr>
<td width="500px">
<p style="font-size: 28px; color: #FFF; padding-top: 27px;">Start earning money with your own blog like this one?</p>
<br>
<p style="font-size: 18px; color: #FFF;">This website was created with Thrive Themes and WordPress. Using the suite of tools provided by Thrive Themes is the fastest way for you to create your own website or blog that is <b>fully optimized for maximum conversions</b>. Click the button to get started.</p>
</td>
<td width="251">
<span id="ter" style="width:500px;background:white" onmouseover="this.style.background='gray';" onmouseout="this.style.background='white';">Click Here to Get Thrive Themes</span>
</td>
</tr>
</table>
</div>
I want "Click Here to Get Thrive Themes" box to look like the box on this webpage below-
http://zacjohnson.com/how-will-you-stand-out-from-the-crowd/
What changes I require to make?
I have modified your HTML and CSS a bit to replicate the button in that website you have posted for you.
You can adjust the CSS to suit your exact needs
#boxx {
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
border: 6px solid #fff;
background-color: #0e5b93;
min-height: 345px;
max-width: 745 px;
padding-left: 15px;
padding-right: 15px;
}
a {
color: white;
text-decoration: none;
}
button {
cursor: pointer;
text-align: center;
border-radius: 8px;
border: none;
background-color: #124463;
text-align: center;
-webkit-box-shadow: 0px 2px 0px black;
-moz-box-shadow: 0px 2px 0px black;
box-shadow: 0px 2px 0px black;
width: 150px;
height:80px;
font-weight: 500;
margin-top:150px;
margin-left:20px;
float: right;
font-size:14px;
}
button:hover {
opacity: 0.8;
}
<div id="boxx">
<table>
<tr>
<td width="500px">
<p style="font-size: 28px; color: #FFF; padding-top: 27px;">Start earning money with your own blog like this one?</p>
<p style="font-size: 18px; color: #FFF;">This website was created with Thrive Themes and WordPress. Using the suite of tools provided by Thrive Themes is the fastest way for you to create your own website or blog that is <b>fully optimized for maximum conversions</b>. Click the button
to get started.</p>
</td>
<td>
<button id="ter">Click Here to Get Thrive Themes
</button>
</td>
</tr>
</table>
</div>
The problem is, that I have table for content with 3 td's, side td is 200px wide and the middle one width isn't defined, everything seems great on computer browsers (even internet explorer), but when it comes to testing on windows phone browser, in middle td text is much bigger, I'd would say twice as big as it should be and nothing seems to fix that, yes I tried writing font-size value to it in css, but that didn't seem to make any difference.
Sorry that I can't supply a screenshot from my windows phone because of broken power button, I'm using standard windows phone 8.1 internet explorer.
CSS of the table
#content_table {
width: 1024px;
border-spacing: 0;
margin-bottom: 30px;
border-collapse: collapse;
table-layout: fixed;
}
#content_table td:not(:last-child) {
padding: 0 15px 0 0;
}
#content_table #side_content {
width: 200px;
vertical-align:top;
}
#content_table #main_content {
width: 100%;
vertical-align:top;
font-size: 16px;
}
.side_content_title {
background: #c9cbce;
border-top: solid 2px #535f7c;
border-bottom: solid 2px #535f7c;
text-align:center;
width: 200px;
color: #353c4c;
padding: 2px 0;
}
.side_content {
background: rgba(243,243,243,1);
-moz-box-shadow: inset 0 0 30px rgba(0,0,0,0.1);
-webkit-box-shadow: inset 0 0 30px rgba(0,0,0,0.1);
box-shadow: inset 0 0 30px rgba(0,0,0,0.1);
width: 190px;
padding: 5px;
border-bottom: solid 2px #535f7c;
color: #535f7c;
}
.main_content_title {
background: #c9cbce;
border-top: solid 2px #535f7c;
border-bottom: solid 2px #535f7c;
padding: 2px 0 2px 30px;
color: #353c4c;
}
.main_content {
background: rgba(243,243,243,1);
-moz-box-shadow: inset 0 0 30px rgba(0,0,0,0.1);
-webkit-box-shadow: inset 0 0 30px rgba(0,0,0,0.1);
box-shadow: inset 0 0 30px rgba(0,0,0,0.1);
padding: 5px;
border-bottom: solid 2px #535f7c;
color: #535f7c;
}
HTML part
<table id="content_table">
<tbody>
<tr>
<td id="side_content">
<div class="side_content_title">title</div>
<div class="side_content"><br/><br/></div>
</td>
<td id="main_content">
<div class="main_content_title">title</div>
<div class="main_content">
Lorem ipsum<br/><br/>
</div>
</td>
<td id="side_content">
<div class="side_content_title">title</div>
<div class="side_content"><br/><br/></div>
</td>
</tr>
</tbody>
</table>
Thanks Mousey for helping, and pointing out to previously answered question. Setting view-port for device width could help if I wouldn't used few fixed position objects, but adding
-ms-text-size-adjust: none;
to body fixed text-size problem without messing up with anything else.
Use belo code in the body tag or to the main table
-ms-text-size-adjust: none;
Removing the line font-size: 16px; from this code should render will all <td> using the same font size
#content_table #main_content {
width: 100%;
vertical-align:top;
}
I think you are finding the phone automatically shrinks the font on smaller devices - except when it is manually specified in the code. 16px will look large on a mobile.
Setting the view-port may also help - see HTML CSS - Font size oversized when shown on windows phone for font-size issues on windows phone
Edit from the link above, using this fixed the problem as EDWcode stated.
-ms-text-size-adjust: none;
I have CSS codes which is good at IE11 but seemingly not good in IE8. I already tried using:
<!DOCTYPE html>
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" />
but it didn't work fine. Margins, borders and the ribbon class is not working.
To add some info, here is the CSS:
body{
background-image:url(images/bg4.jpg);
background-repeat:no-repeat;
font-family: 'Montserrat', Arial;
font-size: 1em;
background-size:100%;
}
.all{
right: 100px;
bottom: 20px;
position: absolute;
}
h2{
text-align: center;
color: #F1F2F4;
text-shadow: 0 1px 0 #000;
}
a{
text-decoration: none; color: #EC5C93;
}
.ribbon{
background: rgba(200,200,200,.5);
width: 50px;
height: 70px;
margin: 0 auto;
position: relative;
top: 19px;
border: 1px solid rgba(255,255,255,.3);
border-top: 2px solid rgba(255,255,255,.5);
border-bottom: 0;
border-radius: 5px 5px 0 0;
box-shadow: 0 0 3px rgba(0,0,0,.7);
}
.ribbon:before{
content:"";
display: block;
width: 15px;
height: 15px;
background: #4E535B;
border: 4px solid #cfd0d1;
margin: 18px auto;
box-shadow: inset 0 0 5px #000, 0 0 2px #000, 0 1px 1px 1px #A7A8AB;
border-radius: 100%;
}
.login{
background: #F1F2F4;
border-bottom: 2px solid #C5C5C8;
border-radius: 5px;
text-align: center;
color: #36383C;
text-shadow: 0 1px 0 #FFF;
max-width: 400px;
padding: 10px 40px 5px 40px;
box-shadow: 0 0 5px #000;
}
.login:before{
content:"";
display: block;
width: 70px;
height: 4px;
background: #4E535B;
border-radius: 5px;
border-bottom: 1px solid #FFFFFF;
border-top: 2px solid #CBCBCD;
margin: 0 auto;
}
.font{
font-size: 1.4em;
margin-top: 5px;
margin-bottom: 10px;
color: #191970;
font-weight: bold;
}
p{
font-family:'Helvetica Neue';
font-weight: 300;
color: #7B808A;
margin-top: 0;
margin-bottom: 30px;
}
input{
height: 30px;
background: transparent;
border: 2px solid gray;
box-sizing: border-box;
color: #71747A;
text-shadow: 0 1px 0 #FFF;
border-radius: 5px;
}
input:focus{
outline: none;
}
button{
margin-top: 20px;
display: block;
width: 30%;
line-height: 1.1em;
background: #0066FF;
border-radius: 5px;
border:0;
border-top: 1px solid #0066FF;
box-shadow: 0 0 0 1px #0066FF, 0 2px 2px #0066FF;
color: #FFFFFF;
font-size: 1em;
text-shadow: 0 1px 2px #21756A;
margin-left:155px;
}
While the HTML is here:
<?php
session_start();
?>
<html>
<head>
<title>Optis Appraisal System</title>
<link href='login.css' rel='stylesheet' type='text/css'>
</head>
<script src="Plugins/placeholders.jquery.min.js"></script>
<body>
<div class="all">
<div class="ribbon"></div>
<div class="login">
<br/><img src="images/optis3.jpg"/> <div class="font">Appraisal System</div>
<p>Please login to start</p>
<form method="post" action="login.php">
<table width=100%>
<tr>
<td>Username</td>
<td><input type="text" name="login"></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="password"></td>
</tr>
</table>
<center>
<button name=commit>Login</button>
</center>
</form>
</div>
<footer>
<center>
<font size="2" color="black"><br/>
Developed by: <br/>
anjomarc_topacio | mark.adriane | nica.dizon <br>
Copyright 2014 © Management Information System
</font>
</center>
</footer>
</div>
</body>
</html>
Do you have any idea on how to solve this? I badly need your help. Thanks!
there are two ways to handle it (css3 properties like box-shadow, border-radius won't be supported in ie8).
1) you can use hacks for ie8 :
To target Internet Explorer 8 and below in CSS, append “9” to the end of the style you want to apply. e.g.
div {
border: 2px solid #aaa; /* for all browsers */
border: 2px solid #f009; /* IE8 and below - red border */
}
.element {
margin-bottom: 20px;
margin-bottom: 10px\9; /* IE8 */
}
2) using conditional statements from within your HTML :
<!--[if lte IE 9]>
Your IE8 and below HTML code here.
Perhaps importing a specific style sheet.
<![endif]-->
e.g :
<!--[if lte IE 7]> <html class="ie7"> <![endif]-->
<!--[if IE 8]> <html class="ie8"> <![endif]-->
<!--[if IE 9]> <html class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html> <!--<![endif]-->
styles :
.element {
margin-bottom: 20px;
}
.ie7 .element {
margin-bottom: 10px;
}
.ie8 .element {
margin-bottom: 15px;
}
For starters, IE8 does not support border-radius or box-shadow.
caniuse.com is your friend.
if you are really looking for a alternative for css3 attributes in IE8 , you could probably use an image to give the curved corner effect and shadow, at the cost of increased bandwidth and messy code.
Other alternative is
- http://css3pie.com/
- try border-radius.htc can download the code from https://code.google.com/p/curved-corner/downloads/detail?name=border-radius-demo.zip and test it.
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