HTML - Ie: Animation Displays Incorrectly Without Flash
Using the following code, if flash is not installed on a computer, while using IE a white box is shown instead of the alternate nested code:
HTML Code: <object type="application/x-shockwave-flash" data="Theme/source.swf" width="647" height="61"> <param name="movie" value="source.swf" /> <a href="index.html"><img src="Theme/Banner/Name.gif" /></a><!-- --><a href="index.html"><img src="Theme/Banner/Spacer.gif" /></a><!-- --><a href="http://cart.source-entertainment.net"><img src="Theme/Banner/Logo.gif" /></a> </object> With IE and Flash it displays the flash animation fine, and with Firefox it displays the nested links and images correctly when not using flash, and also displays the flash animation correctly when flash is installs. The only issue is no flash installed on IE. Can anyone explain why this might be happening? Am I missing some IE-specific code? Or is it a problem with my animation? Any help would be appreciated. Similar TutorialsHi, I've been working on this page for quite a while: http://www.mymusiclair.com/supporter It displays correctly in Chrome, IE, and FF on my hard drive, but once i upload it it displays wrong in everything except IE. I used FrontPage 2003 to make it... any suggestions? Thanks, Vicky Hello, so basically this summer I took the liberty of making a personal website for myself. I wanted to get to know XHTML and CSS a little bit more over the summer. Getting to my question though, I made a rollover menubar (using photoshop) and everything was going swell until I wanted to get it up and running in my html file. I made a table inserting the non and rollover images and instead of using the massive javascript code block Dreamweaver gave me I decided to use simple "onmouseover/onmouseout" code snippets. When I view it in Firefox it is fully functional but for some reason the rollover images are a little shifted, correct size, but shifted, so there is white space in between the non rollover images. Here's what is looks like: Here is the code for the table/banner (3 rows and 9 columns): Code: -------------------------------------------------------------------------------------------------------- banner_01: large blue block (3 rows merged) left of home banner_02: blue rectangle above home banner_03: vertical blue in between home/blog (3 rows merged) banner_04: blue rectangle above blog banner_05: vertical blue in between blog/misc (3 rows merged) banner_06: blue rectangle above misc banner_07: vertical blue in between misc/contact (3 rows merged) banner_08: blue rectangle above contact banner_09: vertical blue right of contact (3 rows merged) banner_10/banner1_10: home (regular)/home (hover) banner_11/banner1_11: blog (regular)/blog (hover) banner_12/banner1_12: misc (regular)/misc (hover) banner_13/banner1_13: contact (regular)/contact (hover) banner_14: blue rectangle under home banner_15: blue rectangle under blog banner_16: blue rectangle under misc banner_17: blue rectangle under contact -------------------------------------------------------------------------------------------------------- <table align="center" width="925" height="140" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="283" rowspan="3"><img border="0" src="banner_01.gif" width="283" height="140"></td> <td width="134"><img border="0" src="banner_02.gif" width="134" height="16"></td> <td width="23" rowspan="3"><img border="0" src="banner_03.gif" width="23" height="140"></td> <td width="134"><img border="0" src="banner_04.gif" width="134" height="16"></td> <td width="23" rowspan="3"><img border="0" src="banner_05.gif" width="23" height="140"></td> <td width="134"><img border="0" src="banner_06.gif" width="134" height="16"></td> <td width="23" rowspan="3"><img border="0" src="banner_07.gif" width="23" height="140"></td> <td width="134"><img border="0" src="banner_08.gif" width="134" height="16"></td> <td width="37" rowspan="3"><img border="0" src="banner_09.gif" width="37" height="140"></td> </tr> <tr> <td><!---HOME BUTTON---> <a href="home.html"><img border="0" width="134" height="112" src="banner_10.gif" onmouseover="this.src='banner1_10.gif';" onmouseout="this.src='banner_10.gif';"/> </a> </td> <td><!---BLOG BUTTON---> <a href="blog.html"><img border="0" width="134" height="112" src="banner_11.gif" onmouseover="this.src='banner1_11.gif';" onmouseout="this.src='banner_11.gif';"/> </a> </td> <td><!---MISC BUTTON---> <a href="misc.html"><img border="0" width="134" height="112" src="banner_12.gif" onmouseover="this.src='banner1_12.gif';" onmouseout="this.src='banner_12.gif';"/> </a> </td> <td><!---CONTACT BUTTON---> <a href="contact.html"><img border="0" width="134" height="112" src="banner_13.gif" onmouseover="this.src='banner1_13.gif';" onmouseout="this.src='banner_13.gif';"/> </a> </td> </tr> <tr> <td><img border="0" src="banner_14.gif" width="134" height="12"></td> <td><img border="0" src="banner_15.gif" width="134" height="12"></td> <td><img border="0" src="banner_16.gif" width="134" height="12"></td> <td><img border="0" src="banner_17.gif" width="134" height="12"></td> </tr> </table> I hope that the content didn't frazzle anyone, I would just like to fix the display of the menubar as it is fully functional. Thank you very much, JP EDIT: I would also like to make the banner the whole width of the browser but it breaks up the images when I try to do so, just wondering if anyone can figure that out too. Thanks! I made a site using dreamweaver and then embedded three flash animations in it but when I move the page from one place to another on the server it causes the animation to disappear even though i move the animations themselves along with the original html page. I refer to them in dreamweaver as relative to the page they are one. any ideas as to why they dissapear? the page is http://nychandymanondemand.com/ the animations are slideshows that should appear on the right side of the page. on the original page before I moved it they worked fine: http://nycmaidondemand.com/Handyman.html in the dreamweaver preview it shows up fine. the path is correct and the file is upload...but for some reason, I just get a blank space? http://yesplsnothnx.com/index2.html flash animation: http://yesplsnothnx.com/images/ass.swf what am i doing wrong?! Hi, can anybody tell me why the flash animation is not correctly displayed in Firefox ? (and only the second time I visit the website) http://lancelmaat.nl/ thanks I have a jailbroken iPhone 4 and I am trying to get a flash embed to display on it but I am having a lot of trouble. i have successfully used and enabled different flash objects elsewhere but this is the only one that wont run. so I know it will work. HTML Code: <head> <title>iSwim</title> </head> <body> <div style="width: 320px; height: 356px; margin-top: 80px; margin-bottom: 44px;"> <object width="320" height="356"> <param name="movie" value="http://listen.grooveshark.com/widget.swf" /> <param name="wmode" value="opaque" /> <param name="allowScriptAccess" value="always" /> <param name="flashvars" value="hostname=cowbell.grooveshark.com&widgetID=22770693&style=metal&bbg=000000&bfg=046cc7&bt=FFFFFF&bth=000000&pbg=FFFFFF&pbgh=046cc7&pfg=000000&pfgh=FFFFFF&si=FFFFFF&lbg=FFFFFF&lbgh=046cc7&lfg=000000&lfgh=FFFFFF&sb=FFFFFF&sbh=046cc7&p=0" /> <embed src="http://listen.grooveshark.com/widget.swf" type="application/x-shockwave-flash" width="320" height="356" flashvars="hostname=cowbell.grooveshark.com&widgetID=22770693&style=metal&bbg=000000&bfg=046cc7&bt=FFFFFF&bth=000000&pbg=FFFFFF&pbgh=046cc7&pfg=000000&pfgh=FFFFFF&si=FFFFFF&lbg=FFFFFF&lbgh=046cc7&lfg=000000&lfgh=FFFFFF&sb=FFFFFF&sbh=046cc7&p=0" allowScriptAccess="always" wmode="opaque" /></object> </div> </body> Can anyone help me to make sure the flash displays right? what happens is the player loader displays at the top instead of the center and the control buttons are present before it loads. then after the loader fails it shows a "cannot connect" error. so I think the flash object is resizing inside its self. can anyone help me clean up this script so it will display correctly in iPhone safari (with flash enabled)? website is he smalldotdesign.zxq.net/iSwim.html that is where the HTML file is located that I am trying to get corrected. thanks in advance. i have a feeling this is going to be a tough fix. hey guys I was told to make another thread so u can help me with my problem... my site is opened wrongly in IE and mozilla...so here is css and html in attachments...but i didn't send u pics... Hi All I am very new to HTML, and have employed the services of a junior designer to come up with a site for me. It can be seen at www.360ukproperty.co.uk, please excuse some of the pages are not completed yet. When clicking on the menu items, the relevant page loads in the faded out frame. This works on most computers, but for some reason it forces a new window to open up on my PC at home. It wirks fine on my designers's PC, my work PC and my laptop. This problem is on IE6, IE7 and Firefox. Very weird! The code for the homepage is pasted below: Hopefully its something simple.....~? <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>360 UK Properties</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="frame" align="center"> <div id="main"> <iframe style="padding-top:94px; float:left;" src="title.html" name="mainFrame" scrolling="no" id="mainFrame" marginwidth="0" marginheight="0" frameborder="0" width="659" height="506"> </iframe> <div id="menu" align="left"> <p><a href="index.html">Home</a></p> <p><a href="why.html" target="mainFrame">Why 360?</a></p> <p><a href="how.html" target="mainFrame">How it Works</a></p> <p><a href="gallery.html" target="mainFrame">Gallery</a></p> <p><a href="faq.html" target="mainFrame">FAQ</a></p> <p><a href="price.html" target="mainFrame"> Prices</a></p> <p><a href="contact.html" target="mainFrame">Contact</a></p> <div id="bottom"> <p><a href="mailto:gustavbasch@yahoo.co.uk">info@360ukproperty.co.uk</a><br /> phone: +44 7875374689</p> </div> </div> </div> </div> </body> </html> Just wondering if someone out there is able to quickly spot the horrible quirk in the HTML on this page: www.vergola.co.nz/contact.htm It renders fine in Firefox and Safari, (ie the page content is at the top of the window) but in IE the content appears way down the page with a large white space above it. ( I hate IE so much) The page has been edited by numerous people of varying degrees of knowledge so the whole page is a bit of a mess... Thanks so much! I'm having problems with the blocks on the left hand side. They show up fine in Firefox but incorrectly in Internet Explorer. Can someone explain this to me please. The blocks are wider in IE than in FF http://aspekt.blogdns.com/ahs/layout2/test/index4.php Thanks hi guys. I am trying to get rounded edges to appear around my tables when displayed in Firefox. However, while it does display rounded edges, it also displays an angular border, which takes whatever colour the text has. here is the code. Quote: <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- TemplateBeginEditable name="doctitle" --> <title>Untitled Document</title> <!-- TemplateEndEditable --> <style type="text/css"> <!-- #MainCell { border-top-color: #FFF; border-right-color: #FFF; border-bottom-color: #FFF; border-left-color: #FFF; width: 800px; background-color: #FFF; height: 1000px; } .whitebackground { } #LogoCell { background-color: #006; height: 15px; } #LinksCell { background-color: transparent; border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent; width: 77%; } #ContentCells { text-align: center; } #BottomLinksCell { } table { -moz-border-radius: 30px; border: #cc2800; } body { background-color: #006; color: #0F0; border: transparent; } .TableBackground { border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent; } --> </style> <!-- TemplateBeginEditable name="head" --> <!-- TemplateEndEditable --> <link rel="stylesheet" href="../ajxmenu.css" type="text/css" /> <script src="../ajxmenu.js" type="text/javascript"></script> </head> <body> <table width="100%" border="1" align="center" id="MainCell"> <tr> <th scope="row"><table width="100%" border="1" id="LogoCell"> <tr> <th class="whitebackground" scope="row">LogoCell - I'll see if my guy will do something for you or if you can get a mate to, if not I'd go to a professional</th> </tr> </table> <table width="78%" border="1" align="center" id="LinksCell"> <tr> <th scope="row"><div class="AJXCSSMenueDFaTFD"><!-- AJXFILE:../ajxmenu.css --> <div class="ajxmw1"> <div class="ajxmw2"> <ul> <li><a href="#"><b>Home</b></a></li> <li><a class="ajxsub" href="#"><b>Gallery</b></a> <ul> <li class="sfirst slast"><a href="#">Slideshow</a></li> </ul> </li> <li><a class="ajxsub" href="#"><b>Corporate Work</b></a> <ul> <li class="sfirst slast"><a href="#">Testimonials</a></li> </ul> </li> <li><a class="ajxsub" href="#"><b>About Us</b></a> <ul> <li class="sfirst"><a href="#">Qualifications</a></li> <li class="slast"><a href="#">Business Associates</a></li> </ul> </li> <li class="tlast"><a href="#"><b>Contact Us</b></a></li> </ul> </div> </div> <br /> </div> </th> </tr> </table> <!-- TemplateBeginEditable name="ContentRegion" --> <table width="68%" border="1" align="center" id="ContentCells"> <tr> <th width="50%" height="113" scope="row"><p> </p></th> <td width="50%"> </td> </tr> <tr> <th height="135" scope="row"> </th> <td> </td> </tr> </table> <!-- TemplateEndEditable --> <table width="100%" border="1" id="BottomLinksCell"> <tr> <th scope="row">BottomLinksCell</th> </tr> </table> </th> </tr> </table> </body> </html> Can anyone tell me how I can get rid of the angular border, and just be left with the rounded one? Thanks! The code I am working with is actually inside of a .xls file. However, I am assuming that my problems are HTML-related. Here is a picture of how it is incorrectly displaying in Firefox: Here's a picture of it in IE, which is how I want it to look in Firefox: Does anyone know what the most likely cause of this is? If you would like to see some code I can post it, I just didn't want it to come off as too overwhelming. It's about 70 lines of code for the whole table. A huge thanks to anyone who can help me out with this. Hey, not sure where to put this but im wanting to make a website with so movies of animation clips that i have made except i need some advice on animation, what is the best program/software to use to make animations, should i use 2d animation or 3d, is 3d animation easy. Nevermind. This post can be deleted. Hello all, I have a bunch of rollover buttons on a page which I would love to sequentially animate so that when the page loads they rollover one at a time in a loop prior to any actual mouseover event. Other than making each button an animated .gif (and increasing the size of the image!) is there a way to script an event that will do the image flips? Hey all, I'm new here and I have a website i designed. The page appears fine when i go to IE but it's all messed up when I view it using Mozilla. I'm stumped. This is my website: www.secondhandoffroad.com Thanks, Hi I'm sure this is simple, but this page http://www.janitorman.net/blueskies/index-1.html shows up OK in IE but not in Firefox. Have I got something wrong? Newbie welcomes some help. Today I tried to display my website alittle bit differently. no major changes to it but I just made sure the website would be displayed nicely in the middle and that the sides of it would disapear (Click with either firefox or chrome on the link below, to see what I mean) however for some very annoying reason IE does not show the website correctly... while I didn't change the container box that holds the website, other than giving it a piece of the background to hold... and the rest of the code has been working perfectly before in the 3 common browsers (IE, FF, Chrome) Could somebody tell me what I did wrong, or what I should do to make IE display the website correctly? Thanks in advance for the help The website Adress is: http://www.swan10.nl/Test/index.htm Feel free to comment on any of the sourcefiles, regarding improvements, they would be gladly appriciated Help me out here, PLEASE SCROLL ALL THE WAY DOWN. ITS URGENT Im making a mail template. Firefox displays the picture, IE won't. It shows it as a empty square with a red X. I cant see what im doing wrong.. i bet its a tiny missing link in some code. Thanks HTML Code: <br /> <p align="center"><img src="koord.jpg" width="170" height="190" /> <br /> 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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Template</title> <style type="text/css"> /* MAAK HEM GECENTREERD Blokjes bovenaan de PSD toevoegen.. 3 onderdelen website maken - TOP - BLOKJES - BOTTOM */ #container{ position:absolute; margin:0 auto; } #pic {position:absolute; left:18px; top:55px; z-index:0;} #txt { font-size:16px; width:410px; position:absolute; text-align:left; font-family:Verdana; left:84px; top:194px; width:600px; z-index:1; } </style> </head> <body> <div id="pic"><img src="template.png" /></div> <div id="txt"> <p><strong><font color="#410d3e">Nieuwsbrief Februari 2010</font></strong> <br /> <br /> Beste Lezer van mijn eerste nieuwsbrief,<br /> <br /> Graag wil ik je opmerkzaam maken op de nieuwste activiteiten van Sessio Communications. <br /> <br /> <p align="center"><img src="koord.jpg" width="170" height="190" /> <br /> <a href="http://www..com">www..com</a></p> <br /> Ik nodig je van harte uit om <a href="http://www..com">mijn website</a> te bezoeken. <br /> Reacties zijn welkom. Doorsturen naar andere belangstellenden mag. <br /><br /> Mocht je geen belangstelling hebben om op de hoogte te blijven van mijn verschillende workshops en trainingen dan kun je dat via onderaan de pagina aangeven. Je e-mail adres wordt dan verwijderd. <br /><br /><br /> Met vriendelijke groet, <br /><br /> Jan M.M. Boesten<br /> <font size="2"><a href="http://www.sessio-communications.nl">www.sessio-communications.nl</a></font><br /> <br /> </div> </body> </html> I am an amateur website hack. I did everything in notepad pulling javascript from some free sites. My intention was to have the center image with "Lindsey Teefey" and the bottom page links vertically and horizontally centered on all the pages. I got the pages to look as intended in Firefox and IE, but they look very bad in Safari. I am sure my coding is very amateur and I would appreciate a clean up from an expert. The pages that I have up a http://www.littlebrindle.com/LT/index.html http://www.littlebrindle.com/LT/photos.html http://www.littlebrindle.com/LT/listen.html (no songs have been added yet) Thanks for any help you can give. Blessings. |