HTML - Svg Transparency In Safari . . .

Cant figure out how to do this effect, the image is the layout in photoshop, what im trying to do is, I have a Background image, with wood texture and I have a div over it where content goes. In photoshop i cut the bg, set it as my bg with html, and now im trying to over lay the content area that in photoshop is Black with about 60% transparency so you can still see the wood grain but also still have the edges to mimmick the content header so i cant just use a 50% square transparency

any ideas will greatly be appreciated.

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

So I sliced a template that I made in photoshop and where my content box is I have an image in the template. I want to have a content box overtop of this image using iframes, but whenever I do that my image dissappears. Is it possible to set the background of an iframe to be an image, or to make it transparent and have an image beneath it?

I am not much of a web developer, so I am using Go Daddy Website Tonight tool to create a quick page. I have a PNG with a transparent background on my website, and it works fine except for users with IE6 or below (IE6 and below don't support transparency on PNG). I tried doing a GIF, but it looked crappy.

So, I have researched and found out that you can use the AlphaImageLoader filter in your code to make PNG work for IE6. With the Website Tonight tool, you can only edit HTML for certain sections (blocks) of the site. So, for the section (block) that has the PNG, the following HTML is available to edit:

HTML Code:

<img alt="" wstxclass="Image" 
src="http://app4.websitetonight.com/projects/1/2/3/8/1238972/image/title1_4hon.png" 
mainsrc="http://app4.websitetonight.com/projects/1/2/3/8/1238972/images/title1_4hon.png" 
uid="419bfda3-0aa3-46c4-84be-7b459f64c09d" />
<br />

So, what I need help with is if I can put the AlphaImageLoader filter on this code and hopefully have it work.

The MS Knowledge Base provides the following code example for the AlphaImageLoader, but I can't quite figure out the syntax with the HTML code above.

http://support.microsoft.com/kb/294714

HTML Code:

<html>
<head></head>
<body bgColor="blue">
<!-- This DIV is the target container for the image.  -->
<DIV ID="oDiv" STYLE="position:absolute; left:140px; height:400; width:400;
     filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
     src='image.png', sizingMethod='scale');" >
</DIV>
</body>
</html>

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 " ????

Can anyone tell me why all the content jumps to the right in Safaria for page of my website?

It looks fine in all other major browsers...

http://www.kasedesign.co.uk/ysm/business.htm

Thanks in advance…

Ok, this might be simple, but I can't figure it out!

I have created a table, which looks great in Safari/Firefox but looks horrid in IE.

This screen shot is Safari-
http://i239.photobucket.com/albums/f...Picture4-2.png

This is IE (looks rubbish, and jumbled up)
http://i239.photobucket.com/albums/f...od4/table1.jpg

This is the code:

<div class="boxout">
<h2><font size="3" face="Verdana" color="white"><i>Drivers Standings</i></font></h2>
<br />
<font color="white" size="2" face="verdana">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;<u>W&nbsp;&nbsp;&nbsp;P</u>
<table border="1" RULES=NONE FRAME=VOID>
<TABLE CELLPADDING=5 CLASS="tealtable">
<tr>
<td>01&nbsp;</td>
<td>Lewis Hamilton&nbsp;</td>
<td>0&nbsp;&nbsp;&nbsp;</td>
<td>0</td>
</tr>

<tr>
<td>02&nbsp;</td
<td>Felipe Massa&nbsp;</td>
<td>0&nbsp;&nbsp;&nbsp;</td>
<td>0</td>
</tr>

<tr>
<td>03&nbsp;</td
<td>Kimi Raikkonen&nbsp;</td>
<td>0&nbsp;&nbsp;&nbsp;</td>
<td>0</td>
</tr>
<tr>
<td>04&nbsp;</td
<td>Robert Kubica&nbsp;</td>
<td>0&nbsp;&nbsp;&nbsp;</td>
<td>0</td>
</tr>
<tr>
<td>05&nbsp;</td
<td>Fernando Alonso&nbsp;</td>
<td>0&nbsp;&nbsp;&nbsp;</td>
<td>0</td>
</tr>
<tr>
<td>06&nbsp;</td
<td>Nick Heidfeld&nbsp;</td>
<td>0&nbsp;&nbsp;&nbsp;</td>
<td>0</td>
</tr>
<tr>
<td>07&nbsp;</td
<td>Heikki Kovalainen&nbsp;</td>
<td>0&nbsp;&nbsp;&nbsp;</td>
<td>0</td>
</tr>
<tr>
<td>08&nbsp;</td
<td>Sebastian Vettel&nbsp;</td>
<td>0&nbsp;&nbsp;&nbsp;</td>
<td>0</td>
</tr>
<tr>
<td>09&nbsp;</td
<td>Jarno Trulli&nbsp;</td>
<td>0&nbsp;&nbsp;&nbsp;</td>
<td>0</td>
</tr>
<tr>
<td>10&nbsp;</td
<td>Timo Glock&nbsp;</td>
<td>0&nbsp;&nbsp;&nbsp;</td>
<td>0</td>
</tr>
</table>
<br />
<p><a href="#"><font color="white" size="2" face="Verdana">Click to see whole table</font></a></p>
<font color="white" size="2" face="verdana">W = Wins | P = Points
</div>

Any ideas?

http://www.vancouver4condos.com/test/
In the top-left corner of my map (under the "Downtown" tab) there should be a navigation menu with four buttons showing. This menu looks fine in Firefox, IE and Opera, but not in Safari. When I open this page in Safari, that menu loads underneath my map image. I have no clue what is causing it.

on my website's guestbook page http://ryanhollis.webs.com/guestbook.html the guestbook is put on the page by javascript that was given to me by Freewebs, i dont have the JS or edit it freewebs takes care of that, its mostly external
the guestbook page loads just like it should in Safari and Google Chrome, but in Firefox and Internet Explorer the HTML loads, but not the guestbook JS
i really have no idea why its doing this, because the HTML and CSS have both been validated and I don't see anything wrong with the code (as if my opinion on that means anything)
one of my friends recently told me it wasnt working, i dont know how it started i didnt even notice because i only use safari, and recently switched to Chrome, but originally it was working in all browsers
code for the main part of the guestbook page including the js:
HTML Code:

<div id="body">
	<img src="icons/body1.png" alt="" width="642" height="64"/>
	<h1>Guestbook!</h1>
	<p>
		BLA BLA
	</p>
	<div id="guestbook">
		<script src="http://link.members.freewebs.com/JS/checkLogin.jsp" type="text/javascript" />
		<script type="text/javascript" src="http://images.freewebs.com/JS/fw.js" />
		<script type="text/javascript" src="http://images.freewebs.com/JS/fwComments.js" />
		<script type="text/javascript">
		<!--
			new fwComments('myguestbook', 8468750, 31154415,  {requireLogin:false, alignNavRight:true, showLowerPaging:true, showHideLink:false, commentCountText:' Signatures', isGuestbook:true, limit:20, showRatings:false, duration:0, showDate:true, startPostClosed:false, showLogin:true, showIP:true, postText:'Sign Guestbook'});
		// -->
		</script>
	</div>
	<img src="icons/body3.png" alt="" width="642" height="70"/>
</div>

code for the CSS that hits this (doubt thats the prob but just in case)
Code:

#guestbook{
margin:0px 30px 0px 30px;
text-align:right;
}
#body{
position:absolute;
margin:239px 0px 0px 192px;
background:#ff0000 url('http://ryanhollis.webs.com/icons/body2.png');
width:642px;
}

Can you tell me why this is not working?
Thanks guys!

Hi,

I recently put up a new website at http://oubeta.org/ . I just realized that it works just fine in Firefox, but not in Safari. Would someone mind taking a peek at the source code of index2.htm (the page you go to after clicking on the main logo, or just he http://oubeta.org/index2.htm). Only the background image shows up in Safari, and none of the other content.

Thanks

I have a simple slide over menu for navigation in a div. Safari and Firefox both work. ON IE it's shifted over to the right a little more and the slide over menus wont appear. Any options?

Hi all! Quick question about the two different browsers, IE and Safari. . . On my home page at www.rentxotic.com I have two buttons programed to be in the top right corner, IE doesn't load this 100% of times, but safari always has it no matter what page your on. Does anyone know what the compatibility issue is with this? How can I fix it?

THANKS
- Ryan

PS all you guys have been such a great help, your time is much appreciated!

Hi,

I have a site that loads fine on Chrome and IE.

Don't see a section of it on Safari or Firefox. Page comes up blank. its supposed to show flash object.

The site is

kidsooda.com

The section page that does not work in Safari and FF is

kidsooda.com/inside/#/contact

If you have any ideas I'd really appreciate it.


THANK YOU !!