line after IFRAME is not visible in both IE and FF. refer the below code and let me know whether I am doing anything wrong.
<html>
<body>
line before iframe <br />
<iframe src="about:blank" />
<br /> line after iframe
</body>
</html>
you need to close the iframe tag. otherwise the content that comes after it is considered "things to show" when iframe is not supported.
(by the way, i think if you use XHTML to write the <iframe ... /> then IE will take it as HTML instead. IE doesn't understand XHTML as XHTML. It understands it as HTML.)
create the iframe with a separate close tag:
<html>
<body>
line before iframe <br />
<iframe src="about:blank"></iframe>
<br /> line after iframe
</body>
</html>
There are some tags (iframe and textarea come to mind) which don't like it when you use their compact form.
I was integrating Facebook Connect in my webpage via iFrame tag, like this:
<iframe src="..." style="..."></iframe>
It worked in all browsers except IE8.
Now I found out, that YOU HAVE to provide a text as content of the tags. Then it works perfectly!
Example:
<iframe src="..." style="...">Your browser does not support iFrames</iframe>
or what I am using now is the following (display just a space):
Solution:
<iframe src="..." style="..."> </iframe>
Related
I'm trying to set up a website to display a twitch channel. For this, I embedded the channel, and the chat. I also put the logo. However, because the chat reaches down farther than the player, the logo can't go directly below the player. I know you could allow the logo to go below with tables, but those are a big headache, so I was wondering if there was another way to put the logo directly below the player. Website: https://katamonia--449243.repl.co/
<!DOCTYPE html>
<html>
<head>
<title>Katamonia</title>
</head>
<body style="background-color:#333">
<center>
<iframe align="top" src="https://player.twitch.tv/?channel=katamonia" frameborder="0" allowfullscreen="true" scrolling="no" height="582" width=74%>
<iframe frameborder="2"
scrolling="no"
src="https://www.twitch.tv/embed/katamonia/chat"
height="100"
width="100">
</iframe>
<iframe src="https://www.twitch.tv/embed/katamonia/chat?darkpopout" frameborder="0" scrolling="yes" height="758" width=24%></iframe>
</center>
</br>
<img align="top" src="https://static-cdn.jtvnw.net/emoticons/v1/778094/2.0" height="200" width="200">
</body>
</html>
So you forgot to close the first <iframe> tag with </iframe>. Then you can wrap different contents with <div></div> containers to create a clear structure and add proper alignment. I made a fiddle for you that shows you how you could do it:
https://jsfiddle.net/NicolasDurant/xp9wf8t6/
It also would be great, if you can extract your stylings out of your HTML file into a seperate CSS file, so you have all the stylings in one place.
There are alot of possibilities to align containers. I used flexbox. Here is a complete guide about that: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
One of the most used libraries for arrangement and default components is bootstrap, you should give it a try:
https://getbootstrap.com/
I have a website with AMP pages that allow editors to add images to the page. The images are displayed using an amp-img element and render in any normal browser.
When either user a reader view or being crawled by a site such as Embedly the amp-img elements are not displayed.
I assume this is caused by the amp-img element not being a valid HTML element so is ignored. Is there anyway to get around this issue?
You can add a noscript element for renderers not using javascript:
<amp-img src="welcome.jpg" alt="Welcome" height="400" width="800">
<noscript>
<img src="welcome.jpg" alt="Welcome" height="400" width="800" />
</noscript>
</amp-img>
I had left out the head tag of <script async src="https://cdn.ampproject.org/v0.js"></script> as listed in the documentation. Including that fixed it.
The web page is not displayed when the following was inserted in the html. Neither was this working for any other link. Please tell me what is the problem in this?
<!DOCTYPE html>
<html>
<body>
<h2>HTML Iframes</h2>
<p>You can also use the CSS height and width properties to specify the size of the iframe:</p>
<iframe src="https://www.w3schools.com" style="height:500px;width:900px"></iframe>
</body>
</html>
Per the console:
Refused to display 'https://www.w3schools.com/' in a frame because it
set 'X-Frame-Options' to 'sameorigin'.
This means that W3 Schools will not allow you to display its pages in an external iframe.
No need to have the style attribute.
<iframe height="500px" width="800px" src="https://www.google.com" ></iframe>
That should fix it.
I'm working on a webpage where I need to be able to click on buttons that change iframes with in a parent page. I thought this would be a simple task but no matter what I do, the button keeps opening a new window rather than opening the page inside the iframe. The page looks perfect and the iframe loads up but when I click the button in the parent window to change the page it opens in a new tab. Here is the complete code I'm using (minus the changed webpage names) if someone could point out what I'm doing wrong please.
<head>
<style>
body
{
background-image:url(bg4.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:top;
background-size:100%;
}
p.pos_fixed
{
position:fixed;
top:98px;
right:298px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Stupid webpage that dont work</title>
</head>
<body>
<p class="pos_fixed">
<iframe id="MSL" src="http://www.yahoo.com" width="975" height="800">
</iframe>
<center>
<a href="http://www.google.com" target="MSL">
<img src="MSL.jpg" alt="MSL" width="42" height="42"></a>
</center>
</p>
</body>
</html>
In order for your link to target the iframe, you must add the "name" attribute to such frame, nothing to do with "id"
<iframe id="MSL" name="MSL" src="http://www.yahoo.com" width="975" height="800">
</iframe>
Also, your DOM structure is very bad, you should not nest iFrames inside paragraphs. In short, the target attribute in anchor elements need to match the name attribute in the iFrame unless it is a reserved one such as "_blank", "_self", "_parent", or "_top".
I have this test html page, I tried it in both chrome and firefox.
<html>
<body>
before iframe
<iframe width="300" height="300" src="http://www.yahoo.com"/>
after iframe
</body>
</html>
But what i see is I see the text 'before iframe', but I don't see the text 'after iframe'.
Can you please tell how can I fix it?
Thank you.
An iframe is not a self closing element, specify the end tag.
<iframe src="" width="" height=""></iframe>
Iframes can't be self-closing, they need a closing tag. One of the oddities of HTML.
In other words, do this: <iframe src="blah"></iframe>, not this: <iframe src="blah" />
Same goes for script and textarea tags and probably others I'm forgetting at the moment.