HTML - Iframes And Transparency

Greetings to you all,

Today's question I have is this:

Does anyone know how to achieve transparency with svg files in Safari?

I have an orange colored circle graphic in svg format. I want to display it on a colored background, maybe even an image background but in Safari it shows a white square around the circle. I have tried using the embed tag and the object tag and both show the white square. Both embed and object seem to be fine for Firefox and Opera. I have used img src and this displays the graphic as it should be in Safari but doesn't show at all in Firefox.

I have spent the last three hours searching the net for an answer but there doesn't seem to be a solution out there.

I would really appreciate some help. I'm sure there must be other people with the same problem.

Thanks very much.

Here is the problem
Ordus Inferi Guild Forums

top left banner, there is a no image display on top of my transparency.

Here is the code, I know it has to be wrong...so what do I change:

<a href="index.php"> <img <DIV ID="oDiv" STYLE="position:absolute; left:; height:180; width:526;
filter:progid:(nospace here, but it made happy face)DXImageTransform.Microsoft.AlphaImageLoader(
src='/forums/styles/StarCraft/theme/images/id_logo.png")</div></img></a>

Thank you much.

On firefox, the banner is not viewable at all, while on IE it is viewable...BUT it has a no image [x] layered ontop of the image.

Okay, I have table backgrounds. I want to use a transparency effect on them. However, if I use .gif, it only works in IE, and if I use a .png, it only works in FF. How can I make it so that it will display my .gif file for IE viewers, and my .png file for FF viewers?

Hi, I am working on a wordpress theme and I have made a horizontal drop down menu. For some reason the drop down part has transparency and the text is almost unreadable as it mixes with the text in the main container. Each of the submenus is a list nested in the list item above. Here is the full code for the menu:
HTML Code:

<ul class="menu">
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar() ) : else : ?>
	<ul id="nav" class="menu"> 
    <li><a href="<?php bloginfo('url'); ?>">Home<img src="<?php bloginfo('template_url'); ?>/images/icons/home.png" class="menu_icon" alt="Home" border="0" /></a> </li> 
    
    <li><a href="#">Facilitators<img src="<?php bloginfo('template_url'); ?>/images/icons/people.png" class="menu_icon" alt="Facilitators" border="0" /><img src="<?php bloginfo('template_url'); ?>/images/icons/arrow.png" class="arrow" alt="Contact Us" border="0" /></a> 
      <ul> 
        <li><a href="<?php bloginfo('url'); ?>/narelle-nelles">Narelle Nelles</a></li> 
        <li><a href="<?php bloginfo('url'); ?>/susan-gregory">Susan Gregory</a></li>
      </ul> 
    </li> 
        <li><a href="#">Courses<img src="<?php bloginfo('template_url'); ?>/images/icons/courses.png" class="menu_icon" alt="Courses" border="0" /><img src="<?php bloginfo('template_url'); ?>/images/icons/arrow.png" class="arrow" alt="Contact Us" border="0" /></a> 
      <ul> 
        <li><a href="<?php bloginfo('url'); ?>/parenting-course">Parenting Course</a></li> 
        <li><a href="<?php bloginfo('url'); ?>/beyond-behaviour">Beyond Behaviour</a></li>
        <li><a href="<?php bloginfo('url'); ?>/staff-training">Staff Training</a></li>
        <li><a href="<?php bloginfo('url'); ?>/upcoming-courses">Upcoming Courses</a></li>
      </ul> 
    </li>
    
            <li><a href="#">Register<img src="<?php bloginfo('template_url'); ?>/images/icons/register.png" class="menu_icon" alt="Register" border="0" /><img src="<?php bloginfo('template_url'); ?>/images/icons/arrow.png" class="arrow" border="0" /></a> 
      <ul> 
        <li><a href="<?php bloginfo('template_url'); ?>/registration.html" title="Register Online" rel="gb_page_center[390, 490]">Register Online</a></li> 
        <li><a href="<?php bloginfo('template_url'); ?>/AARCRegistrationForm.doc">Register By Post</a></li>
        <li><a href="<?php bloginfo('url'); ?>/registration-terms">Registration Terms</a></li>
      </ul> 
    </li> 
    <li><a href="<?php bloginfo('template_url'); ?>/photo_gallery.php" rel="gb_page_fs[500, 500]">Photo Gallery<img src="<?php bloginfo('template_url'); ?>/images/icons/photo.png" class="menu_icon" alt="Photo Gallery" border="0" /></a></li>
    
    <li><a href="<?php bloginfo('template_url'); ?>/contact.html" rel="gb_page[280, 380]">Contact Us<img src="<?php bloginfo('template_url'); ?>/images/icons/email.png" class="menu_icon" alt="Contact Us" border="0" /></a></li>
</ul>

CSS Code:

ul {
	margin-right: 10px;
	padding: 0;
	list-style: none;
	font-size: 12px;
	width: 160px;
	border-bottom: 1px solid #ccc;
	}
 ul li {
	position: relative;
	}
 li ul {
	position: absolute;
	left: 159px;
	top: 0;
	display: none;
	}
	
.sidebar a{
	color: #8b645a;}
 ul li a {
	display: block;
	text-decoration: none;
	background: #f1f9e6;
	padding: 5px;
	border: 1px solid #ccc;
	border-bottom: 0;
	}
	
 ul li a:hover{
	background: url(images/menu_bg.png) bottom repeat-x;
	color: #43951e;}
 ul li li a:hover{
	background: url(images/menu_bg.png) bottom repeat-x;
	color: #43951e;}
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

 li:hover ul, li.over ul { 
	display: block; }

I tried defining opacity to full but that does nothing. The problem happens in firefox, ie7, opera, and safari beta 3 for windows.

If you could help it would be great!,

Ricky

okay, im kinda new to the forum and in a way kinda new to html because i haven't written in weeks. anyway, i know the code HTML Code:

<img src="./file.GIF"></img>

, but how do i make the image by the bottom-left pixel transparent please help. ty

I've used a code for a layout on my blog at blogger.com, and I've tweaked it to my likeness except for the fact that the photos on my blog all are semi transparent. Does anyone know what I should look for to change so the photos appear as solid? Thanks for any help. If anyone wants to see the code in it's entirety I can post it.

http://www.mohler.cz/radim/segeta/al...lkodlaci6.html

Hi all I have encountred problem while using transparent swf on site I am developing.. The problem is only with firefox...when I try to click the link it starts to blink and is unclicable...well I figured out that when I place a small picture just below that div containing my swf it works correct.... well, well, but the other problem emerges when I would like to use second swf with transparency at the bottom .....well I would like to scroll the content like the entire page not an iframe or whatever , but I cant place there this workaround because it 1, doesnt work when its in a div
2, without div it is just an element and the iframe where I load my content aligns beneath it so it is off the screen....

Is there a problem using the background the way I do ??

Does also anyone know how to get rid of that flickering in firefox when I scroll content with images for example in "fotogalerie " ????

Okay, well this is the raw website: http://www.shuushuubuttons.com/index2.html
I have three iframes there...but when you bring the browser window in and out (using your mouse) the top frame gets eaten up by the bottom ones. Is there any way to 'lock' the top and left frame so it doesn't change size. I put in the 'noresize' tag, but that didn't seem to make any difference. Any help would be appreciated! Take a look at my html, maybe I've done the tags wrong.

Thanks!

Hi,
this is my first post here.

I uploaded my webpage http://inferno.comxa.com to the server of 000webhost.com

When I tried to view them through various browsers, I found that the height attribute of the iframe tag was not responding in any browser except Chrome (12.0).
I used the following browsers for checking:
IE 8, Firefox 5.0, Opera 11, Chrome 12.0

This is my code
Code:

<body>
<iframe src = "top-right.html" height = "23%" width = "15%"></iframe>
<iframe src = "top.html" height = "23%" width = "83%"></iframe><br>
<iframe src = "topics.html" height = "77%" width = "15%"></iframe>
<iframe src = "home.html" height = "77%" width = "83%" name = "main"></iframe>
</body>

This is what I was able to see


However when I ran a similar code on the editor of w3schools.com, it came out fine in all browsers.
This is what I see in w3schools editor


What is happening ? why such anomaly ?
Help is appreciated.

I also tried to replace the attributes of the iframe tag with CSS, but i found the same thing. Looks fine with Chrome but the height was not being registered with any other browser.

This is my exact html code
Code:

<!doctype html>
<html>
   <head>
      <link rel="stylesheet" type="text/css" href="default.css" />
      <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
   </head>
   
   <body style="height:100%;background-color:black;" >
   <iframe src="" style="height:25%; width:15%;"></iframe>
   <iframe src="" style="height:25%; width:83%;"></iframe><br>
   <iframe src="" style="height:75%; width:15%;"></iframe>
   <iframe src="" style="height:75%; width:83%;" name = "main"></iframe>
   </body>
</html>

and this is my stylesheet
Code:

*{background-color:black;color:white;}
html{background-color:black;color:white;}
h1{font-size:250%;text-align:center;color:yellow;background-color:black;}
h2{font-size:175%;text-align:left;background-color:black;color:white;}
body{background-color:black;color:white;font-size:120%;}
p:first-letter{font-size:150%;color:red;background-color:black;}
a:link{color:blue;background-color:black;}
a:visited{color:blue;background-color:black;}
a:hover{color:yellow;background-color:black;}
a:active{color:white;background-color:black;}

this is what I saw in IE8
http://html.net/forums/download/file.php?id=55
By the way, in IE8 i get a white space in the frames whereas in Firefox/Chrome/Opera , it comes out black. Anything with CSS compatibility?

does anyone know an IE compatible way to disable x-scrolling in iframes? i made a style that had no x-scroll and applied it to the iframe, but that only worked in mozilla. help would be appreciated
-james

Hi,

I have a dynamic table which is updated on a form submission. I am trying to update the table without a page refresh so that the form doesn't reset itself back to its default settings thus avoiding the user constantly having to change the fields each time they enter a record. I was thinking of using an iFrame as this looks like a good and relatively easy way to achieve this.

Can someone please tell me how I can place a table within an iFrame and refresh just the Iframe contents on the form submission.

I hope someone can please help with the code.

Thanks

Simon

I used div aligns to put my Iframes where I want them and whenever I maximize the window it doesn't look like how it's supposed to. My friend doesn't have internet explorer, so is there some "universal" code I can use instead? Can anyone help? Thanks.

Can you make me 3 frames? 1. On the left side[Want it to be 20% of the site's width] which will have the general links.
2. One on the right side[80% of the width]
3. One on the top[20% of the height]

They can be totally blank, I'll enter the content myself. Thank you.

Here... I don't know how to explain this, but I'm having a problem with IFrames.

Check out the link:
http://www.freewebs.com/noeylani94/index.htm

I want all three of them lined up horizontally

I'm using frames now and I really don't like it. Can you change it to iframes? The problem is, at the top row, when some one clicks a link button it takes you to the link but only keeps in it on the top page.


Here's the frameset notepad:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>PokeCosmo -The future of pokemon</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<frameset rows="20%,80%">
<frame img border="0" src="column.html">
<frameset cols="20%,80%">
<frame src="framerow.html">
<frame src="column6.html">
</frameset>
<noframes>
<p>This frameset document contains:</p>
<ul>
<li><a href="#">Row_1 contents</a></li>
<li><a href="#">Row_2 column_1 contents</a></li>
<li><a href="#">Row_2 column_2 contents</a></li>
</ul>
</noframes>
</frameset>

<div id="footer">
<div>PokйCosmo.com &copy; 2007. All rights reserved.</div>


The second column:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "" >

<html lang="en">
<head>
<title>PokCosmo</title>
<base href="http://www.pokecosmo.com/">
<meta name="keywords" content="pokemon, online pokemon, pokemon articles, netbattle tutorials, pokemon projects, pokemon forums, pokemon community, pokemon pokedex, battle competitor, netbattle, pokemon netbattle, pokemon art, pokemon fanart, pokemon diamond and pearl,free, pokemon ruby and saphire, pokemon emerald, pokemon ruby, pokemon saphire, pokemon cheat codes, pokemon hacks.">
<meta name="robots" content="PokйCosmo Front Page 4.0">
<link rel="stylesheet" media="all" type="text/css" href="default.css">
<link rel="alternate stylesheet" type="text/css" media="all" title="style1" href="style1.css">
<link rel="alternate stylesheet" type="text/css" media="all" title="style2" href="style2.css">
<style type='text/css'>
body
{
background-image : url('!--Post link here--!');
}
</style>
<script src="styleswitch.js" type="text/javascript">
</script>
<body bgcolor="black">

<head>
<style type="text/css">
h1 {color: silver}
</style>
</head>
<body>

<img align="top" src="http://img340.imageshack.us/img340/3342/diamondandpearlcs3.png"><h1> Pokemon Diamond and Pearl- In stores Now!!!

<img align="left" src="http://img249.imageshack.us/img249/953/diamondyr4.jpg">
<img align="right" src="http://img522.imageshack.us/img522/4228/pearlrd5.jpg">

<div>PokйCosmo.com &copy; 2007. All rights reserved.</div>
<a align="bottom" href="http://www.pokecosmo.com">Home</a> | <a href="http://www.pokecosmo.com/forums">Forums</a> | <a href="netbattle">Pokemon Netbattle</a> | <a href="pokemonol>Online RPG</a> | <a href="pokedex">PokeDex</a> | <a href="contact">Contact Us</a> | <a href="affiliates">Affiliates</a>| <a href="copyright">Copyright</a>|<a href="content">Content rating</a>
</div>

<!--Affiliation partners=pokeelite2000,psypokes.com-->

The sucky first column:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "" >

<html lang="en">
<head>
<title>PokCosmo</title>
<base href="http://www.pokecosmo.com/">
<meta name="keywords" content="pokemon, online pokemon, pokemon articles, netbattle tutorials, pokemon projects, pokemon forums, pokemon community, pokemon pokedex, battle competitor, netbattle, pokemon netbattle, pokemon art, pokemon fanart, pokemon diamond and pearl,free, pokemon ruby and saphire, pokemon emerald, pokemon ruby, pokemon saphire, pokemon cheat codes, pokemon hacks.">
<meta name="robots" content="PokйCosmo Front Page 4.0">
<link rel="stylesheet" media="all" type="text/css" href="default.css">
<link rel="alternate stylesheet" type="text/css" media="all" title="style1" href="style1.css">
<link rel="alternate stylesheet" type="text/css" media="all" title="style2" href="style2.css">
<style type='text/css'>
body
{
background-image : url('http://img294.imageshack.us/img294/7408/siteiz8');
}
</style>
<script src="styleswitch.js" type="text/javascript">
</script>

<body bgcolor="gray" text="red">

<div id="left_side">

<div id="left_side_menus">

<img src="http://img238.imageshack.us/img238/3926/sitefv0.png">
<ul>
<li><a href="contact">Contact</a></li>
<li><a href="history">History</a></li>
<li><a href="main">Main</a></li>
</ul>
<img src="http://img265.imageshack.us/img265/2431/projectsxy3.png">
<ul>
<li><a href="pokemononline">POL RPG</a></li>
<li><a href="netbattle">Competitor</a></li>
<li><a href="graphics">Graphic Projects</a></li>
</ul>
<img src="http://img299.imageshack.us/img299/6435/downloadswk7.png">
<ul>
<li><a href="downloadrpg">POL RPG</a></li>
<li><a href="downloadnetbattle">Netbattle</a></li>
</ul>
<img src="http://img293.imageshack.us/img293/395/communityuo0.png">
<ul>
<li><a href="forum/Login.php">Login</a></li>
<li><a href="forum/register.php">Free Registration</a></li>
<li><a href="forum/showthread.php?p=thread.php">Forum Rules</a></li>
<li><a href="forum/reportabuse.php">Report Abuse</a></li>
</ul>

The crappy row:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>A simple two rows, two columns frameset document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="black"
<a href="www.pokecosmo.com"><img align="left"src="http://img152.imageshack.us/img152/5646/pokecosmosett2.png"></a>
<a align="right" href="www.pokecosmo.com/pokegames"><img border="0" src="http://img523.imageshack.us/img523/7470/pokemongamesfz9.gif"></a>
<a href="www.pokecosmo.com/projects"><img border="0"src="http://img511.imageshack.us/img511/6365/projectsjv5.gif"></a>
<a href="www.pokecosmo.com/pokedex"><img border="0"src="http://img525.imageshack.us/img525/1631/pokedexqc0.gif"></a>
<a href="www.pokecosmo.com/netbattle"><img border="0"src="http://img525.imageshack.us/img525/2083/netbattlemp1.gif"></a>
<a href="www.pokecosmo.com/forums"><img border="0"src="http://img153.imageshack.us/img153/3989/forumsgc0.gif"></a>


and if you could, for the second column could you change the text(expect for the heading) orange and much much smaller?