HTML - Ie Transparency Issue
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. Similar Tutorialshttp://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 " ???? Hi All, I'm trying to figure out the best way to achieve <div> transparency. Right now I've got the following working: CSS: Code: #content {filter: alpha(opacity=85); opacity:0.85;} But that is causing the entire <div> to fade - I'd only like the BACKGROUND to do so, and not the CONTENT on top. I'm considering just using another <div> as the background, and then a content <div> on top of that with a 'none' background - but does anyone know if there is a better option for this? The homepage of my website has a PNG image with transparency. The reason that I'm using PNG is that I was having trouble matching the image background color to the page background color. On some browsers like Safari it matched perfectly but on IE it did not (not sure why). The PNG image is displaying fine with transparency on both Safari and Google Chrome in my OS X machine but when I test it on a Windows machine under IE the transparency does not work and I see a white box around the image area. I'm really new to all this and would really appreciate any help. This is my website homepage with the problem image: www.buccianti.net Thanks so much! 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 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> 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 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. 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? 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. I have been trying to research hacks to for internet explorer 5.5 and 6 to allow .png images to show transparent backgrounds (rather than showing with a blue/gray background color behind them.) As I understand it internet explorer allows for binary transparency (which is default in .gif files) but you have to do a work around in order to display alpha transparency. I am using a 24bit png file with a transparent background and it displays properly in firefox. I cannot use a .gif or 8bit png because the image has too much detail loss if I do so. For what I am trying to do I really only need binary transparency because I want the background to be completely transparent. So my question is whether there is a way to use a 24bit .png file in binary transparency and just disable the alpha transparency channels? Is there a way to save the .png with only binary transparency to begin with for that matter? I created the file using photoshop. 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? 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. Hey friends, I'm having a little issue with my photos on my site. I want to use the img tag that uses [img] /img] this style but can only seem to get this <img > style to work. If I use the [img] style I just get font showing up. How can I fix this? I hope this makes sense. Thank you in advance. Hello. I'm a new user. I've done a couple different sites and I'm working on completing this one. There are a couple issues. In FireFox everything appears to be how I want it. I had to do the logo in an odd way. The top part is a background to the div that the Donate button appears in. The bottom part is an actual image. I did it this way because I couldn't use spans to get part of the image on the left and then have the Donate button align to the right. The only issue with it is when the user makes the font insanely large(Using the font resizer), there gets to be a gap, but then again when the user makes the font that large everything starts to become odd. In IE, this logo is split with quite a large gap. Also in IE, the top of the site is a little banner, which also has a large gap between that and the next bit of the site. It does not currently validate, throwing issues that the document does not allow <ul> where it is. I am not too sure why it won't let me. I have the unordered list nested within a span, nested within a div in order to get the site to flow properly. Another reason it does not validate is because apparently the W3 validater doesn't like SSI. Any help here would be appreciated. http://www.lilacblind.org/testing/NewSite im having an issue with this code im trying to get going in my css file... i put in the code below in the .css file and call the file in hte header using the link to my css file and then i use the command that should activate the script im wondering if im doing something wrong that maby i dont see, because when i put hte code directly in the header and call it it works perfectly... call :: <link rel="stylesheet" type="text/css" href="MyStyle.css" /> .css function :: .hr2 { border: 0; color: limegreen; background-color: limegreen; height: 2px; border-top:1px; border-style: solid; } Action :: <hr class=hr2> am i using the right way t o call the .css ? should i have more code in my .css to close it off properlly? I have recently updated a site that i am working on and everything works fine in safari and fire fox, but in IE7 the image on the left side is being droped down and causing the page as a whole to look diffrent.....please help, not sure whats going on. http://www.mdmoms.com/products/babybasics.html here is the html: HTML Code: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Untitled Document</title> <style type="text/css"> <!-- body { background-color: #80452E; } --> </style></head> <body> <div align="center"> <table width="800" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF"> <tr> <td colspan="4"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="800" height="130"> <param name="movie" value="../../flash/header2.swf"> <param name="quality" value="high"> <embed src="../../flash/header2.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="800" height="130"></embed> </object> <script type="text/javascript" src="ieupdate.js"></script></td> </tr> <tr> <td width="269"><img src="../../gifs/babybasics1234.gif" width="269" height="53" border="0"></td> <td colspan="3" rowspan="2"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="532" height="322"> <param name="movie" value="../../flash/babybasics.swf"> <param name="quality" value="high"> <embed src="../../flash/babybasics.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="532" height="322"></embed> </object> <script type="text/javascript" src="ieupdate.js"></script></script> </td> </tr> <tr> <td rowspan="3"><img src="../../gifs/babybasics1234.jpg" width="268" height="473" border="0"></td> </tr> <tr> <td width="69" bgcolor="#FFFFFF"><img src="baby009/images/spaah_r15_c2.jpg" width="69" height="56" border="0"></td> <td width="377" bgcolor="#FFFFFF"><form name="buy" method="post" action="http://cart.novapointe.com/0635/novacart.pl"> <input name="cart_id" type="hidden" value="164"> <input name="sku" type="hidden" value="6004"> <input name="command" type="hidden" value="add"> <input name="view" type="hidden" value="cart"> <div align="center" class="style1"> <div align="left"> <input name="image" type="image" src="images/buy.jpg" width="111" height="26" border="0"> </div> </div> <input type=hidden name=.autodone value="http://www.mdmoms.com/product/babybasics.html"> </form></td> <td width="87" bgcolor="#FFFFFF"> </td> </tr> <tr> <td colspan="2" bgcolor="#FFFFFF"><img src="../../gifs/producstthree.gif" width="414" height="173" border="0" usemap="#Map"></td> <td bgcolor="#FFFFFF"> </td> </tr> <tr> <td colspan="4"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="800" height="22"> <param name="movie" value="../../flash/footer2.swf"> <param name="quality" value="high"> <embed src="../../flash/footer2.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="800" height="22"></embed> </object> <script type="text/javascript" src="ieupdate.js"></script></td> </tr> </table> </div> <map name="Map"><area shape="rect" coords="26,31,126,144" href="http://www.mdmoms.com/products/baby003/index.htm"><area shape="rect" coords="162,26,278,143" href="http://www.mdmoms.com/products/baby007/index.htm"><area shape="rect" coords="302,23,391,144" href="http://www.mdmoms.com/products/baby005/index.htm"> </map></body> </html> Thanks in advance Hello! I am having an issue with an unordered list resting beside an img. For some reason the bullet dots for the ul are inside the img instead of beside the text. I realise that my error is most likely something simple, but I have been staring at this darn thing for over week (it's a homework assignment) and I still cannot figure out what I have done wrong. Sadly my instructor's only advice is "Re-check your html and css files.", which was not helpful in any way as obviously I had already been doing that and still cannot find my mistake. I am not sure however if the error is with my html coding, or the css. I hope I don't get into trouble for it, but I am going to post this same question in the CSS forum, only with the code my css instead of the html. Here is my html code: HTML 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" lang="en" xml:lang="en"> <head> <title>Prime Properties :: Listings</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <link rel="stylesheet" href="prime.css" type="text/css" /> </head> <body> <div id="wrapper"> <h1 id="logo"><img src="primelogo.gif" alt="Prime Properties" width="680" height="86" /></h1> <div id="button"> <div id="leftcolumn"> <ul> <li><a href="index.html">Home</a></li> <li><a href="listings.html">Listings</a></li> <li><a href="financing.html">Financing</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div> </div> <div id="rightcolumn"> <h2>Listings</h2> <h3>Schaumburg Colonial</h3> <p>This single family home is a two-story colonial on a large lot.</p> <a href="schaumburg.jpg"> <img class="property" src="schaumburgthumb.jpg" alt="Schaumburg" align="left" /> </a> <ul> <li>Four bedrooms</li> <li>Two and 1/2 baths</li> <li>Finished family room</li> <li>Two car garage</li> <li>Listing #3432535</li> </ul> <br /> <h3>Libertyville Condo</h3> <p>New construction condo in downtown Libertyville.</p> <a href="libertyville.jpg"> <img class="property" src="libertyvillethumb.jpg" alt="Libertyville" align="left" /> </a> <ul> <li>Close to train</li> <li>Two bedrooms</li> <li>Two baths</li> <li>Two indoor parking spaces</li> <li>Listing #3432432</li> </ul> <br /> <div id="nav"> <ul> <li><a href="index.html">Home</a></li> <li><a href="listings.html">Listings</a></li> <li><a href="financing.html">Financing</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div> <div id="footer">Copyright © 2011 Prime Properties<br /> <a href="mailto:Airamith@gmail.com">Mandi Adkins</a></div> </div> </div> </body> </html> And here is a link to the active site: Listings I'm sure there are other issue's in the code, I am still learning after all. My most pressing issue right now though concerns the bullets being inside the images. I would like to thank you in advance for any help you can offer, I really do appreciate it! Edit: I forgot to mention that I am required to use IE 8 or 9 for this class. Also, all of my coding validated through the W3C, both the html and the CSS. Also, I just noticed that the bullets are much closer to the text when it is viewed in Google Chrome instead of IE 9. Hi, I'm very new to website design, just starting building my first site. My site is asbestos-claim.org.uk. I've managed to get most things with the layout working okay, but having issues with my footer-right section (About Us page links etc). In IE8, IE9, FF, Chrome, Safari and Opera the site looks fine, however in IE6 and IE7, the footer-right section appears under the centre content section, right under the "simply complete the online form on this page for a free assessment and callback. This is a completely free service." text. Sorry, not sure if this issue needs posting in the HTML or CSS forum! Thanks, Freeze. Hey first post, been around for a while but never actually joined. Anyway, client has a site that was built recently by another crowd. Works well in IE7, IE8, Firefox, Opera etc etc but the home page doesnt in IE6. This is an issue because the sites target viewers are apparently mostly using IE6. The issue is the home page doesnt format correctly, the others are fine so I'm thinking its got to be to do with the embedded login form. I've tried to sort it but its making me Any help much appreciated! http://www.freightmanagers.co.nz/index.html Hey guys, Im currently working on a project for university and something is bothering me with this nav bar that i have created. I guess you can class this as CSS as well as HTML but i was wondering who could help me out. As you can see with image one things are looking alright, buttons are consistent with no gaps. This is because i have the images within a div and the background colour set as the same to look consistent. With image 3 you can see what would happen if the background colour was removed. Now the problem that i have is within image 2, when you stretch the window it stretches the background colour, the thing i want to do is wrap the div around the images so the colour stays behind them and only them as well as having the buttons centred. Any help would be great thanks. |