I've added a tab to my facebook page using Static Html: iframes tab app.
Works fine in chrome but in IE I get "Only secure content is displayed" notification.
The background image is linked with SSL and there is no other outer content linked to the page, only html with text so I have no idea about the cause...
Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
direction: rtl;
background-image: url('https://lh3.googleusercontent.com/-8GcYUqtmItc/UDc8OSEOdZI/AAAAAAAAD_g/denZSy7Be_0/s800/bg.jpg');
margin: 0;
padding: 0;
border: none;
overflow: hidden;
font: Arial;
font-size: 18px;
color: #00000;
}
#header {
padding: 0;
margin: 0 auto;
border: none;
width: 100%;
height: 190px;
}
</style>
<title>Page Title</title>
</head>
<body>
<div id="header"></div>
<div id="content">
<table width="90%" cellpadding="10" border="0" align="center">
<tr>
<td align="right" dir="rtl">
<p>
Some text...
</p>
</td>
</tr>
</table>
</div><!-- content -->
</body></html>
Here is the actual page link: http://facebook.com/#!/GioraSalz/app_349708898445501
Thanks in advance.
In facebook tab apps, the secure content is everything on https://facebook.com. Since your site is probably not secured with SSL, IE will not show it because somewhere deep in the bowels of IE settings is a "only show secure content." if you want to remove this, just get a ssl certificate. they're pretty cheap
Related
I'm trying to build an email template based on https://www.muicss.com/docs/v1/example-layouts/html-email.
On top of what they offer, I'd like to have a two solid color background: color A for the top fixed height (say 200px), and color B for the rest of the content, and the table (cards) floating across the two colors, similar to This.
I tried different options using linear-background, but it doesn't show at all, the gradient starts from the bottom of the card, or the card's color becomes transparent when copied to Gmail web client (even after I inlined styles)
This is what I have for now:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width" />
<!-- NOTE: external links are for testing only -->
<style>
body {
width: 100% !important;
min-width: 100%;
margin: 0;
padding: 0;
background-color: #FFF;
}
.mui-body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
color: #212121;
font-family: "Helvetica Neue", Helvetica, Arial, Verdana, "Trebuchet MS";
font-weight: 400;
font-size: 14px;
line-height: 1.429;
letter-spacing: 0.001em;
background-color: #FFF;
}
.mui-container, .mui-container-fixed {
max-width: 600px;
display: block;
margin: 0 auto;
clear: both;
text-align: left;
padding-left: 15px;
padding-right: 15px;
}
.mui-container-fixed {
width: 600px;
}
.mui-panel {
padding: 15px;
border-radius: 0;
background-color: #FFF;
border-top: 1px solid #ededed;
border-left: 1px solid #e6e6e6;
border-right: 1px solid #e6e6e6;
border-bottom: 2px solid #d4d4d4;
}
</style>
</head>
<body>
<table class="mui-body" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<center>
<!--[if mso]><table><tr><td class="mui-container-fixed"><![endif]-->
<div class="mui-container">
<table cellspacing="0" border="0" width="100%">
<tr>
<td class="mui-panel">
<table id="content-wrapper" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td>
<p>random</p>
<p>text</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</div>
<!--[if mso]></td></tr></table><![endif]-->
</center>
</td>
</tr>
</table>
</body>
</html>
Can someone help me with this please?
If only email clients decided to sit down and strictly follow the RFCs... If only they would use the same html css parsing engine...
The question isn't so much HOW but rather, WHAT type of html and css most email clients support consistently across the board. You will find most clients just do their own thing when it comes to parsing your emails and you could end up writing many templates from scratch for the same email.
To save you some time search Foundation for Emails on Google. See direct Link below.
Foundation for Emails | Responsive Email Templates
Foundation for emails is a framework that helps you develop your own custom email templates from templates they already have. Fluid & Responsive for any device. Very clean.
In the process, you will learn which CSS and HTML tags you can use and which aren't supported. Many aren't supported.. To give you an idea, html layouts in emails are created using <table></table> instead of <div></div>. The DOCTYPE you're using is also not ideal; think early 2000's.
Example of correct doctype for all universal emails you will ever write:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Email clients does not support all the css properties. So in short better you use images for linear gradient.
Recently I have created my own html website for first time by learning from http://www.w3schools.com/ and http://www.tizag.com/htmlT/, however I am having trouble viewing my webpages in firefox and mobile devices. I really do not know where I am going wrong. Please suggest me how should I post my queries here, do I need to print my html texts here ? I am afraid it will be long total of 8 pages.
Many thanks in advance.
Riz
This is my Banner.html code and in Firefox, marquee creates malfunctioning, I guess there is lot of mistakes in my code, please advice me accordingly, thanks.
<!DOCTYPE html>
<html lang="en-US">
<head>
body {
background-color: #696969;
margin: 0px;
padding: 0px;
}
#banner {
width: 75%;
height: 170px;
display: block;
float: right;
}
h1 {
position: absolute;
color: #ffffff;
left: 20px;
top: 0px;
letter-spacing: 5px;
font-size: 50px;
float:left;
}
h3 {
position: absolute;
color: #ffffff;
text-shadow: 0 0 10px #ffd700;
left: 20px;
top: 78px;
letter-spacing: 2.4px;
float: left;
}
span {color: #ffd700;}
span.g {color:#ffffff; text-shadow: 0 0 10px #ffd700;}
</style>
</head>
<body>
<marquee loop="true" direction="up" scrollamount="2"><img id="banner" src="handshake1.jpg" alt="BannerImage"><img id="banner" src="web.jpg" alt="BannerImage"><img id="banner" src="art.jpg" alt="BannerImage"><img id="banner" src="flower.jpg" alt="BannerImage" style="height:230px"><img id="banner" src="apple.jpg" alt="BannerImage" style="height:230px"><img id="banner" src="green.jpg" alt="Banner Image"><img id="banner" src="ocean.jpg" alt="BannerImage" style="height:250px"></marquee>
<h1><span>Stack</span><span class="g">Overflow</span></h1>
<h3>Online & Communications</h3>
</body>
</html>
A typical mobile-optimized site contains something like the following:
<meta name="viewport" content="width=device-width, initial-scale=1">
For pages that set an initial or maximum scale, this means the width property actually translates into a minimum viewport width. For example, if your layout needs at least 500 pixels of width then you can use the following markup. When the screen is more than 500 pixels wide, the browser will expand the viewport (rather than zoom in) to fit the screen:
<meta name="viewport" content="width=500, initial-scale=1">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html lang="en-US">
<head>
<title>Stack Overflow Forums</title>
<meta name="google-site-verification" content="y4IbEwKh_krYR4qU0TDeK_R28IJCVCApOIuAm1w1n9c">
<meta name="viewport" content ="width=device-width,initial-scale=1,user-scalable=yes">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
<meta content="Learning HTML, Website Tutorials" name="Keywords">
<meta content="Website Tutorials" name="keywords">
<meta content="HTML Training, etc.." name="description">
<meta http-equiv="refresh" content="1800">
</head>
<frameset rows="30%,70%">
<frame name="banner" src="banner.html" noresize scrolling="no">
<frame name="home" src="home.html">
</frameset>
</html>
You should be marking up your page properly, using body tags and getting away from framesets.
You'll get a much better output across mobile browsers and other browsers if it's all kept to strict HTML standards.
For example, a basic HTML page layout:
<html>
<head>
<title>Stackoverflow Forums</title>
</head>
<body>
<div id="banner">
// Your banner HTML
</div>
<div id="content">
// Your main content HTML
</div>
</body>
</html>
You can still use all of the things you had inside your head tag, but these will create divs that can be seen as 'blocks' that help separate sections of code.
This page is quite good to take a read through - http://www.w3schools.com/html/html_intro.asp
I have started a website with a redbackground and i want a little bit of white at the top.
i have this code:
CSS:
body {
background-color: #ff4d4d;
}
#header {
background-color: #ffffff;
height: 20px;
}
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Fat Oblongs</title>
<link href="css/stylesheet.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="header"></div>
</body>
</html>
Which produces:
You should make sure your body and html elements have no margin and padding:
html, body {
padding: 0;
margin: 0;
}
Sidenote: you also really should not use XHTML 1.0 Transitional as your doctype. If possible, simply use HTML5 (this has no influence over your borders, but still, don't use transitional doctypes unless you have a very good reason to do so)
<!doctype html>
body, html {
border: 0;
padding: 0;
margin: 0;
}
Browsers tend to have a few pixels of padding/margins around the window edges. The above CSS removes that all.
you need to reset margin:padding of the body to zero
body {margin:0;padding:0;}
http://jsfiddle.net/79w9Y/
For the life of me I cannot get these social media share buttons to line-up with my inline list. I nearly had it with a vertical-align: top; on the <li> but Chrome didn't like that.
Page can be seen here: http://206.72.114.49/sharelinkstest.htm
Full HTML/CSS below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.share-links {
margin: 8px 0 0 0;
padding-left: 0;
display: inline;
}
.share-links li {
margin-left: 0;
padding-right: 15px;
list-style: none;
display: inline;
}
</style>
</head>
<body>
<ul class="share-links">
<li><a title="Post to Google Buzz" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="small-count" data-url="$fqUrl$post.Url"#if ($macros.IsNotNull($post.ResolvedImageUrl)) data-imageurl="$fqUrl$post.ResolvedImageUrl"#end></a><script type="text/javascript" src="http://www.google.com/buzz/api/button.js"></script></li>
<li>Tweet<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></li>
<li><iframe src="http://www.facebook.com/plugins/like.php?href=$fqUrl$post.Url&layout=button_count&show_faces=false&width=80;&action=like&font&colorscheme=light&height=25" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:25px;" allowTransparency="true"></iframe></li>
</ul>
</body>
</html>
Setting the height of the Facebook iframe to 20px seems to do the trick.
In example bellow when you hover on icons cursor should be changed to different. It works except of IE 8. On IE 8 these icons turned to be unclikable, i.e. not only cursor are not changed, but also Jquery click event does not fire. Consider how the following html code works at FF, IE7 and eventually at IE8:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS IE 8 cursor test</title>
<style type="text/css" media="screen">
.icon-button {
float: left;
cursor: pointer;
}
.ui-icon { width: 15px; height: 10px; background-image: url(http://sstatic.net/so/img/replies-off.png); }
</style>
</head>
<body>
<div class="icon-button ui-icon"></div>
<div>Sample Text</div>
</body>
</html>
What migth be the root of problem? What could be possible workarrounds?
Thanks in advance.
P.S. Changing DOCTYPE is not really possible.
Also if I remove float: left on this example it seems like "fixed", but when I remove it on a website, besides broken design, it does not help also.
IE8 doesn't like empty divs. Putting a blank <img/> with a transparent pixel inside the div seems to fix it.
Demo: http://jsbin.com/asiju (Editable via http://jsbin.com/asiju/edit)
HTML source:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS IE 8 cursor test</title>
<style type="text/css" media="screen">
.icon-button { float: left; cursor: pointer; }
.ui-icon { width: 15px; height: 10px; background-image: url(http://sstatic.net/so/img/replies-off.png); }
.dummy-image { width: 15px; height: 10px; vertical-align: top; border: none; }
</style>
</head>
<body>
<div class="icon-button ui-icon"><img class="dummy-image" src="data:image/gif;base64,R0lGODlhAQABAJH/AP///wAAAMDAwAAAACH5BAEAAAIALAAAAAABAAEAQAICVAEAOw=="/></div>
<div>Sample Text</div>
</body>
</html>
I don't know any hack to beat it. But, if smth could be clicked it should be in a tag, so insert a and maybe display:block. href could be =#. That solution seems to be semantic and good for me :)
How about:
<a href="whatever.php">
<div class="BG IMAGE" style="cursor:The one you want"></div>
</a>
I use it myself and it works fine.
Take out the float:left and the css class looks like below.
.icon-button { cursor: pointer; }
It should work.
This just worked for me in IE8, super simple
cursor: pointer !important;