Are any of these methods better than using iframe?

HTML & CSS
1 

<iframe src=http://makeavoice.com/shoutcast/websitecodes/songhistory.php?ip=hi5.1980s.fm&port=8000&refresh=30&fontcolor=0059dd&bgcolor=black&linkcolor=orange&uselinks=3 width=600 height=200 frameborder=0 scrolling=yes></iframe>

<object data="http://makeavoice.com/shoutcast/websitecodes/songhistory.php?ip=hi5.1980s.fm&port=8000&refresh=30&fontcolor=0059dd&bgcolor=black&linkcolor=orange&uselinks=3" frameborder=0 scrolling=yes width="600" height="200">
    <embed src="http://makeavoice.com/shoutcast/websitecodes/songhistory.php?ip=hi5.1980s.fm&port=8000&refresh=30&fontcolor=0059dd&bgcolor=black&linkcolor=orange&uselinks=3" width="600" height="200"> </embed>
</object>

<object data="http://makeavoice.com/shoutcast/websitecodes/songhistory.php?ip=hi5.1980s.fm&port=8000&refresh=30&fontcolor=0059dd&bgcolor=black&linkcolor=orange&uselinks=3" width="600" height="200" type="text/html">
    Alternative Content
</object>

<embed src="http://makeavoice.com/shoutcast/websitecodes/songhistory.php?ip=hi5.1980s.fm&port=8000&refresh=30&fontcolor=0059dd&bgcolor=black&linkcolor=orange&uselinks=3" width=600 height=200 />
2

Probably going to stick with iframe, unless you tell me I shouldn’t.

Just made this.

<iframe width="600" height="300" frameborder="0" scrolling="no" src="http://makeavoice.com/shoutcast/websitecodes/songhistory.php?ip=hi5.1980s.fm&port=8000&refresh=30&fontcolor=0059dd&bgcolor=black" style="display:block; width: 600px; height: 300px; border: 20px solid; border-image:linear-gradient(to right, #f0f 0px, #f0f 450px,#fff 0px, #fff 480px, #0ff 0px, #0ff 0 ); border-image-slice: 1;"></iframe>
3

A friendly reminder… fixed dimension boxes, such as iframes, do not adapt to the user’s font-size. Without scrollbars, content can become inaccessible. Even turning the computer screen upside down will not make the content fall so the bottom is visible.

Your call, of course.

4

What are you suggesting?

I should do this:


<iframe frameborder="0" scrolling="yes" src="http://makeavoice.com/shoutcast/websitecodes/songhistory.php?ip=hi5.1980s.fm&port=8000&refresh=30&fontcolor=0059dd&bgcolor=black" style="display:block; width: 600px; height: 150px; border: 15px solid; border-image:linear-gradient(to right, #f0f 0px, #f0f 450px,#fff 0px, #fff 480px, #0ff 0px, #0ff 0 ); border-image-slice: 1;"></iframe>
5

I can do it like this:

<style>
#iFrame {
  display: block;
  width: 600px;
  height: 155px;
  border: 15px solid;
  background: black;
  border-image: linear-gradient(to right, #f0f 0px, #f0f 450px, #fff 0px, #fff 480px, #0ff 0px, #0ff 100%);
  border-image-slice: 1;
}

</style>

<iframe id="iFrame" frameborder="0" scrolling="yes" src="http://makeavoice.com/shoutcast/websitecodes/songhistory.php?ip=hi5.1980s.fm&port=8000&refresh=30&fontcolor=0059dd"
</iframe>
6

am I allowed to change the font color in the css part?

I was allowed to move the background color to the top.

If I’m allowed to change the font-color from the html part, shouldn’t I be allowed to do it from the css part also?

7

Am I allowed to change the font color via the css, or not?

and why?

Code:
http://www.cssdesk.com/DDsqR

8

Not easlily nor reliably. You need to be able to modify the CSS for the source site from within the iframe.

Because that’s the way it works.

An iframe is a window with very thick glass. The best way to change the contents of the iframe is to go to the site that is being viewed in the iframe and change THAT page.

The overflowing text that I showed you earlier could be avoided IF the page being viewed had been designed to be responsive… if it had been designed to adapt to the width viewing device. A successful iframe depends on the source that is being viewed because you cannot easily change anything from the viewer’s side of the window.

If you want more information, try the following search string “modify iframe content”.

9

You say: Not easily nor reliably,

What would be the hard way to do it then?

How came it lets me modify the background color in css then?

Why background color, but not font color, what’s the difference?

I removed bgcolor=black from the html and moved it to the css.

10

The background you changed was the background of the frame, which is an element in the parent document.
You did not change the background of page that is being viewed in the frame. Its background is set to transparent, so the frame’s background shows.

4 Likes
11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.