HTML - Website Looks Good In Chrome/safari But Not Mozilla
there is my code. any reason why it looks good in chrome/safari but it looks bad in mozilla? in mozilla it has a bunch of lines going through it and the images are all seperated. any help would be much appreciated. Thanks, George
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> <title>share</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <style type="text/css"> body { background-color: #ffffff; background-image: url(../background-for-website.png); background-repeat: repeat-x; } #apDiv1 { z-index:1; } </style> </head> <body> <!-- Save for Web Slices (share.psd) --> <center> <table id="Table_01" width="792" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="5"> <img id="share_01" src="images4/share_01.png" width="791" height="155" alt="" /></td> <td> <img src="images4/spacer.gif" width="1" height="155" alt="" /></td> </tr> <tr> <td colspan="5"> <img id="share_02" src="images4/share_02.png" width="791" height="137" alt="" /></td> <td> <img src="images4/spacer.gif" width="1" height="137" alt="" /></td> </tr> <tr> <td colspan="5"> <img id="share_03" src="images4/share_03.png" width="791" height="142" alt="" /></td> <td> <img src="images4/spacer.gif" width="1" height="142" alt="" /></td> </tr> <tr> <td colspan="3" rowspan="2"> <img id="share_04" src="images4/share_04.png" width="544" height="70" alt="" /></td> <td> <div class="apDiv" id="apDiv"><a href="http://www.facebook.com/sharer.php?u=https://www.facebook.com/pages/itunes-cards-for-free/200510223345141" target="_blank"> <img id="share_05" src="images4/share_05.png" width="137" height="21" alt="" /> </a></div> </td> <td rowspan="4"> <img id="share_06" src="images4/share_06.png" width="110" height="257" alt="" /></td> <td> <img src="images4/spacer.gif" width="1" height="21" alt="" /></td> </tr> <tr> <td rowspan="3"> <img id="share_07" src="images4/share_07.png" width="137" height="236" alt="" /></td> <td> <img src="images4/spacer.gif" width="1" height="49" alt="" /></td> </tr> <tr> <td rowspan="2"> <img id="share_08" src="images4/share_08.png" width="319" height="187" alt="" /></td> <td><a href="../page 5/redeem.html"><img src="images4/button.png" onmouseover="this.src='images4/button-3.png'" onmouseout="this.src='images4/button.png'"/></a> </td> <td rowspan="2"> <img id="share_10" src="images4/share_10.png" width="75" height="187" alt="" /></td> <td> <img src="images4/spacer.gif" width="1" height="30" alt="" /></td> </tr> <tr> <td> <img id="share_11" src="images4/share_11.png" width="150" height="157" alt="" /></td> <td> <img src="images4/spacer.gif" width="1" height="157" alt="" /></td> </tr> </table> </center> <!-- End Save for Web Slices --> </body> </html> Similar TutorialsI've made a lot of progress on my website: Bands 4 Babes but I'm still struggling with getting everything to look the same on all the different browsers. Basically what I'm finding is: Chrome and Safari (PC) - Displays exactly as I want it to Firefox 3.5.2 (PC) - Displays properly except for the Home link in the purple bar is a few PX too far left and the --- above home is a line too high Firefox and Safari on Mac - FF exhibit the same problem as above, but most fonts (sizes and faces) are off on the mac versions. This also throws off alignments of other stuff. IE8 - Two solid lines on top and bottom of page are a few pixels too low which ruins the continuity of the box frame I created. If somebody could take a look at my code and give me some thoughts on what the problem is I would really appreciate it. Thanks. help!!! i have been making my site mozilla friendly (for weeks now... tedious!) and it FINALLY looks decent in mozilla. but for some reason 8 of my 10 blog pages don't look right when viewed in mozilla. i added a small 5 pixel wide image that acts as a cellpadding -- and all pages look great in IE... FOR EXAMPLE in mozilla, this pages look fine: http://leilanimunter.com/blog9.htm while this one does not: http://leilanimunter.com/blog8.htm if i take out the image -- Images/banners/blogpadding.jpg then everything returns to normal. for some reason it is not lining up along my "previous entries" as it does on the other page. i cannot find where the code is different. anybody have any ideas? i really appreciate the help, thank you!!!!!!!!!!!! Hello The company I am with has recently launched a website. I am very new to HTML code. I have been teaching myself over the last month or so. Here is the code I am having trouble with: <div style="float:left"<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com/xxxxxxxxxxxamp;width=292&colorscheme=light&show_faces=true&stream=true&header=true&a mp;height=427" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:427px;" allowTransparency="true"></iframe></div> <div style="float:right"<script src="http://widgets.twimg.com/j/2/widget.js"></script> <script> new TWTR.Widget({ version: 2, type: 'profile', rpp: 5, interval: 6000, width: 250, height: 290, theme: { shell: { background: '#2b779a', color: '#e6eaf2' }, tweets: { background: '#eee2b9', color: '#2b779a', links: '#2a9c13' } }, features: { scrollbar: true, loop: false, live: true, hashtags: true, timestamp: true, avatars: true, behavior: 'all' } }).render().setUser('xxxxxxxxx').start(); </script></div><div style="clear:both"></div> The images show up on Mozilla but not IE or Chrome. These are just codes I copied from FB and Twitter. I then added in the <div> so that they would line up side by side. Obviously I am a beginner, please be gentle. Thanks so much in advance. Nvm im an idiot I've been doing some html newsletters for a company for a while. I use simple html with tables and this template that the other graphic designer put together. The focus of teh email is made up of spliced images, assembled in a table and then each image is linked to the appropriate website location. The problem I have, is in mozilla and in safari (two of the three browsers I test on) make the <tr> part of the table split? It separates the <tr> cells and causes white lines between the images. This only happens after the email has been sent out, not when I test it in a browser before submitting it to the email newsletter server. I'm trying to figure out ways around it or to fix up the html. Anyone who is willing to help me, I will send you the newsletter so you can see what I am talking about as well as post the code up in this thread. Thank you, -Allie Hello, I have a strange spacing issue that I am having trouble correcting. I have some weird spacing that shows up in Safari and Chrome. Doesn't show up in FF or IE. Look he http://www.digitalsomething.com Under the links in the header you'll see a white gap between the links and the search bar. The odd thing is if you look at the forums, the gap is gone: http://www.digitalsomething.com/forum Any ideas as to what is causing this? My site here is working in FF v3.5.9 but when I just recently loaded it in Safari and Chrome the page just doesn't work. I don't understand why because I developed it and tested it when using Safari and Chrome is built on Webkit too. http://www.meta.projectmio.com/sss.html It seems like a recent thing, but it still works in FireFox so I don't know what's going on? Any ideas? PROBLEM SOLVED Hi Guys, This is my first post on this forum. Basically, Ive agreed to turn someone website, into a joomla template, and then format articles and such until it looks exactly like the original site. This would give them the ability to add their own content without my help(I offered to redo the site, but they like their current one even though its quite bad). All was going well, and I sent out an email to check the progress of the site to the client, and he replied to me that the site was all distorted in Safari. Being a windows programmer, I was used to IE/firefox, Safari and the other browsers never really crossed my mind. Anyway, I downloaded safari, chrome and opera, and tested the sites out. Opera they were fine, but chrome and Safari, some things align WAYYY to the left, almost off screen. I'm guessing it may be a CSS issue, but Ive checked, rechecked, deleted, restored almost everything and its still messed up in those browsers! This is a paying client, so I need to get this sorted out as soon as possible. The pages in question are he http://www.longboardcapital.net/inde......7&Itemid=27 http://www.longboardcapital.net/inde......48&Itemid=2 Ive paused on content creation, as this is a big problem. Have any of you ever experienced the same or similar problem? can you all offer any suggestions? Thank you so much for your help, -Tim Greetings, If you access the following website http://www.chrisnieratko.com/ in IE / Firefox, you can view the site perfectly. However, with Chrome / Safari, you can't. You just see a bunch of code with ascii question marks. I know it's missing the doctype declaration, but is it the question marks that make it not visible for those browsers? (Chrome / Safari) When the site's pages are opened in notepad, textpad and notepad++, the question marks aren't there... so how do you eliminate them? Does anybody know of another editor that will view / edit these? Does anybody know if that's even the problem? How did they just appear out of nowhere? Most importantly; How would YOU fix this problem in the easiest way possible? (I'm guessing a certain type of text editor with a search function, then search / eliminate them and re-save the file?) Any help is MUCH appreciated! Thank you so much in advance for your time! well my issue comes when you try to use ctrl-mouswheel to zoom in or out on my page. works fine in ie8 and ff3, but not in chrome and safari. there isnt really a need for this to work, except the fact that no professional website should have such a major error. http:www. fab-tennis .com click the book a lesson tab, its the easiest way to tell since its the longest page i have. sorry for the bright colors. when you zoom in or out, the iframe which is usually fits exactly between my header and footer, shrinks to a small box maybe 500px in height instead of having height:100% of the table cell that it is in. i would reccomend trying the zoom on ff then try it on chrome or safari to see what im talking about. HTML Code: <html> <body topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0" bgcolor="#FFFF00" style="overflow-x: hidden; overflow-y: hidden;"> <link rel="stylesheet" type="text/css" href="css/basic.css" /> <!--[START HEADER]--> <div style="position:absolute; top:0px; left:0px; width:100%;"> <table align="center" class="Header" cellspacing="0" cellpadding="5" style="height:40px"> <tr align="center"> <td width="20%" class="headerLeft" id="1" onMouseOver="mouseOver(id)" onMouseOut="mouseOut(id)" onClick="onClick(id)"> home </td> <td width="20%" id="2" onMouseOver="mouseOver(id)" onMouseOut="mouseOut(id)" onClick="onClick(id)"> book a lesson </td> <td width="20%" id="3" onMouseOver="mouseOver(id)" onMouseOut="mouseOut(id)" onClick="onClick(id)"> biography </td> <td width="20%" id="4" onMouseOver="mouseOver(id)" onMouseOut="mouseOut(id)" onClick="onClick(id)"> qualifications </td> <td width="20%" class="headerRight" id="5" onMouseOver="mouseOver(id)" onMouseOut="mouseOut(id)" onClick="onClick(id)"> photos </td> </tr> </table> </div> <!--[END HEADER]--> <!--[START BODY]--> <table align="center" cellspacing="0" cellpadding="0" class="Body"><tr height="40px"><td></td></tr> <tr><td valign="middle" align="center"> <iframe name="iBody" id="iBody" marginheight="0px" marginwidth="0px" frameborder="0" scrolling="auto" allowtransparency="true" src="home.html" style="width:100%; height:100%; border:0px;"> BODY </iframe> </td></tr> <tr height="40px"><td></td></tr></table> <!--[END BODY]--> <!--[START FOOTER]--> <div style="position:absolute; bottom:0px; left:0px; width:100%"> <table align="center" class="Footer" cellspacing="0" cellpadding="5" style="height:40px"> <tr align="center"> <td width="20%" class="footerLeft" id="6" onMouseOver="mouseOver(id)" onMouseOut="mouseOut(id)" onClick="onClick(id)"> cancel lesson </td> <td width="20%" id="7" onMouseOver="mouseOver(id)" onMouseOut="mouseOut(id)" onClick="onClick(id)"> seven </td> <td width="20%" id="8" onMouseOver="mouseOver(id)" onMouseOut="mouseOut(id)" onClick="onClick(id)"> eight </td> <td width="20%" id="9" onMouseOver="mouseOver(id)" onMouseOut="mouseOut(id)" onClick="onClick(id)"> nine </td> <td width="20%" class="footerRight" id="10" onMouseOver="mouseOver(id)" onMouseOut="mouseOut(id)" onClick="onClick(id)"> ten </td> </tr> </table> </div> <!--[END FOOTER]--> <script type="text/javascript" src="javascript/basic.js"></script> </body> </html> Hi everyone, I have been working on a website here www.ds-installations.co.uk/examples.html. I am nearing the end of design/development but I have a weird display bug in Chrome and Safari. For some reason, the content displays off to the right of the main page? I have checked all the code through the W3C CSS and HTML validators and it all seems fine. I have tested in IE6+, FF and Opera which seem to work fine? I would really appreciate any help on this, I have been looking and tweaking for hours to try and fix it and I can't see anything obvious? Thanks very much in advance for any help! Dan I am working on a website and so far it is coming together the way I intended. Looks good on Chrome, and Safari. IE is not right yet but it looks as expected since I haven't done the IE style sheet yet. However, Firefox is producing a completely unexpected problem. http://nickbogatin.com I will post code but I don't even have an idea as to where the error is yet. Help would be appreciated. Nick It works great in Firefox, IE, and even on my iPhone (Safari), but it's having problems in Chrome and on my friend's Mac (Safari). I have a form with 2 tables inside. The first table is aligned left at 47% of the width. The second table is aligned right at 47% of the width. It should look like this: But instead looks like this in Chrome and Safari...it appears that it's centering both tables instead of aligning them left and right to give 2 separate columns. Any ideas? Here is some of my stripped down code: ----------------------------------- <div id="FormLayer" style="position:absolute; width:680px; height:455px; z-index:3; left: 65px; top: 330px; border:0"> <form action="form.php" method="post" name="orderform" id="orderform"> <input type="hidden" name="recipients" value="email.com"> <input type="hidden" name="required" value="actor:Actor's Name, email:Your Email=confirm:The emails you entered did not match, show:Name of the Show, episode:Your Episode|date:Air Date, character: Character's Name, description: Description of Scenes"> <input type="hidden" name="good_url" value="success.htm"> <table width="47%" align="left" border="0" cellspacing="0" cellpadding="5"> <tr> <td><div align="left" class="style3"> <label for="actor"><span class="style2"> Actor's Name:</span></label> </div> </td> </tr> <tr> <td><input name="actor" type="text" id="actor" size="40" maxlength="50"></td> </tr> <table width="47%" align="right" border="0" cellspacing="0" cellpadding="5"> <tr> <td><div align="left" class="style3"> <label for="character"><span class="style2"> Character's Name:</span></label> </div> </td> </tr> <tr> <td><input name="character" type="text" id="character" size="40" maxlength="50"></td> </tr> </table> </form> Hi, I need some help please? I have bought/made a simple html page on internet. The problem is that when i uploaded it to my ftp server which is on www.one.com and tried it in IE it did not work as it should. It works perfectly in any other webbrowser like Safari, Mozilla, GoogleChrome, Opera. Why not IE? Is there anybody out there who can help me? Somebody please tell me what's wrong? Best regards Pete index.html HTML Code: <!DOCTYPE html> <html lang="en"> <head> <title>RUSSEUKEN.no</title> <meta charset="utf-8"> <meta name="description" content="Russeuken"> <meta name="keywords" content="russ, russefeiring, bergen, uken, russeuken, norge, 17. mai, fest "> <meta name="author" content="Russeuken"> <[if IE]><link href="css/ie_style.css" rel="stylesheet" type="text/css" /><[endif]> <[if lt IE 9]><script type="text/javascript" src="js/html5.js"></script><[endif]> <[if lt IE 7]><script type="text/javascript" src="http://info.template-help.com/files/ie6_warning/ie6_script_other.js"></script><[endif]> <link rel="stylesheet" href="css/reset.css" type="text/css" media="all"> <link rel="stylesheet" href="css/grid.css" type="text/css" media="all"> <link rel="stylesheet" href="css/style.css" type="text/css" media="all"> <link href="css/jbgallery-2.0.css" id="jbgallery-css" rel="stylesheet" media="javascript-screen" /> <!-- styles for prettyPhoto --> <link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="all"> <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="js/script.js"></script> <script type="text/javascript" src="js/cufon-yui.js"></script> <script type="text/javascript" src="js/Myriad_Pro_400.font.js"></script> <script type="text/javascript" src="js/Myriad_Pro_900.font.js"></script> <script type="text/javascript" src="js/Myriad_Pro_400r.font.js"></script> <script type="text/javascript" src="js/cufon-replace.js"></script> <script src="js/jbgallery-2.0jbgallery-2.0.js" type="text/javascript"></script> <script type="text/javascript"><!-- jQuery(document).ready(function(){ jQuery(".jbgallery").jbgallery({ menu : "numbers", style: "zoom", slideshow : true, caption : false }); }); --></script> </head> <iframe id="ytplayer" type="text/html" width="0" height="0" hidden="1" src="http://www.youtube.com/embed/BpJhT4yzWyo?autoplay=1" frameborder="0"/></iframe> <body> <div class="extra"></div> <div class="extra1"> <div id="main"> <!-- header --> <header class="head"> <div class="jbgallery"> <ul> <li><a href="images/1.jpg"> </a></li> <li><a href="images/4.jpg"> </a></li> <li><a href="images/2.jpg"> </a></li> <li><a href="images/3.jpg"> </a></li> <!--<li><a href="images/5.jpg"> </a></li>--> </ul> </div> <div class="block-2"> <div class="logo"><a href="http://www.exodus.no"><img src="images/logo.png" alt=""></a></div> <nav> <ul class="sf-menu"> <li><a href="russeuken.html">RUSSEUKEN</a></li> <li><a href="arrangement.html">PROGRAM2012</a></li> <li><a href="russ.html">RUSS</a></li> <li><a href="bilder.html">BILDER</a></li> <li class="last"><a href="kontakt.html">KONTAKT OSS</a></li> </ul> </nav> </div> <div class="text-1">change bg</div> </header> </div> <!-- footer --> <footer> <div class="container"> <div class="indent"> <div class="wrapper"> <div class="fright"> <span>RUSSEUKEN.no</span> © 2012 </div> <div class="fleft"><!-- {%FOOTER_LINK} --></div> </div> </div> </div> </footer> </div> </body> </html> ie_style.css Code: .link-1,.link-2,.block-1,.block-2,.sf-menu a:hover,.sf-menu a.current,.sf-menu a,.content-box,.main-banner,.sf-menu li ul,#advanced{behavior:url(js/PIE.htc); z-index:100;} .link-1,.link-2,.block-1,.block-2,.content-box,.main-banner,.content-box,.content-box-1{behavior:url(js/PIE.htc); z-index:100; position:relative} ie7.css Code: /* IE7 specific styles */ #constuction-box {display:inline;} #intro-box {display:inline;} .tabs code { overflow:visible !important;} #contact-form { height:580px;} .block-1{behavior:url(js/PIE.htc); z-index:100; position:relative} html5.js PHP Code: // Create new HTML5 elements =================================================== // ----------------------------------------------------------------------------- // This script should load before any others. We want the new elements to be // parsed before pretty much anything happens. // Plus, IE does not behave otherwise. The cost of being progressive... // ----------------------------------------------------------------------------- document.createElement("article"); document.createElement("aside"); document.createElement("audio"); document.createElement("canvas"); document.createElement("command"); document.createElement("datalist"); document.createElement("details"); document.createElement("embed"); document.createElement("figcaption"); document.createElement("figure"); document.createElement("footer"); document.createElement("header"); document.createElement("hgroup"); document.createElement("keygen"); document.createElement("mark"); document.createElement("meter"); document.createElement("nav"); document.createElement("output"); document.createElement("progress"); document.createElement("rp"); document.createElement("rt"); document.createElement("ruby"); document.createElement("section"); document.createElement("source"); document.createElement("summary"); document.createElement("time"); document.createElement("video"); Hello, I'm new to the forums =) I'm currently having a problem with my navigation which involves images. Initally I used the traditional image map method using area maps and the usemap function but it only worked in the webpage itself, and when the webpage shows in an iframe the links are nonexistent. So I sliced my navigation to give the sliced images the url link instead. As usual, they work on their own but when the page is shown in an iframe, some of the links disappear (you can't even hover on them) only in Firefox, Chrome and Safari. But some of the links are also still intact. In IE and Opera they work perfectly fine. Below is the code for the page which contains the navigation and links aforementioned, which will be displayed in an iframe of another page: Code: <!-- ImageReady Slices (mainframe.jpg) --> <table id="Table_01" width="971" height="565" border="0" cellpadding="0" cellspacing="0"> <tr> <td rowspan="4"> <img src="images/mainframe_01.gif" width="200" height="531" alt=""" style="z-index:-3;"></td> <td> <a href="defence.html" target="_parent" onmouseover="window.status='STET Defence'; return true;" onmouseout="window.status=''; return true;"> <img src="images/mainframe_02.gif" width="332" height="163" border="0" alt="" style="z-index:1;"></a></td> <td rowspan="4"> <img src="images/mainframe_03.gif" width="438" height="531" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="163" alt=""></td> </tr> <tr> <td> <a href="maritime.html" target="_parent" onmouseover="window.status='STET Maritime'; return true;" onmouseout="window.status=''; return true;"> <img src="images/mainframe_04.gif" width="332" height="134" border="0" alt="" style="z-index:1;"></a></td> <td> <img src="images/spacer.gif" width="1" height="134" alt=""></td> </tr> <tr> <td> <a href="homelandsec.html" target="_parent" onmouseover="window.status='STET Homeland Security'; return true;" onmouseout="window.status=''; return true;"> <img src="images/mainframe_05.gif" width="332" height="138" border="0" alt="" style="z-index:1;"></a></td> <td> <img src="images/spacer.gif" width="1" height="138" alt=""></td> </tr> <tr> <td rowspan="2"> <a href="centre.html" target="_parent" onmouseover="window.status='STET Centre'; return true;" onmouseout="window.status=''; return true;"> <img src="images/mainframe_06.gif" width="332" height="130" border="0" alt="" style="z-index:1;"></a></td> <td> <img src="images/spacer.gif" width="1" height="96" alt=""></td> </tr> <tr> <td> <a href="https://mail.stet.com.sg/owa/auth/logon.aspx?url=https://mail.stet.com.sg/owa&reason=0" target="_parent" onmouseover="window.status='Login to Intranet'; return true;" onmouseout="window.status=''; return true;"> <img src="images/mainframe_07.gif" width="200" height="34" border="0" alt="" style="z-index:1;"></a></td> <td> <a href="sitemap.php" target="mainframe" onmouseover="window.status='Lost?'; return true;" onmouseout="window.status=''; return true;"> <img src="images/mainframe_08.gif" width="438" height="34" border="0" alt=""></a></td> <td> <img src="images/spacer.gif" width="1" height="34" alt=""></td> </tr> </table> <!-- End ImageReady Slices --> <div id="pict" style="position:absolute;top:200px;left:10px;z-index:0;"> <iframe name="news" src="news.php" FRAMEBORDER=no name="frame" allowTransparency scrolling=auto style="filter:chroma (color=#FFFFFF)" width="185" height="90"></iframe> </div> There is another iframe in this page which I wonder might be causing the problem. However even when I removed it the problem remains. Any ideas how to fix it? Would really appreciate the help, thanks! http://www.yandina.com/JIndex.htm Open in Firefox, Chrome or Safari - - - that is what it is supposed to look like. Open in IE and the last table get overlaid on top of the previous table. What sort of things can cause that? Additional (unrelated I think) problem, IE is not accessing cookies but others are fine. What can cause that? I need some serious help, I have no idea what to check: www.enviral-design.com go to th galleries page, and see what I mean. if you are in Safari or Chrome, it loads exactly like it's supposed to(for me at least) However, on IE or Firefox the gallery page loads all stretched, and as soon as you click on any thumbnails or spry accordion tabs the page just explodes!! what gives?? I've replaced the css for the accordion spry panels with deault DW css, no luck. same with the .js file that the accordions use, also no luck.... I have no idea what to do, or where to start.... anyone?? please help me out!! thanks for your time, Lucas Hi Guys, I have owned one website, Can anyone Get me some good Tips for get traffic to my website ?? My website is: www.gstteam.co.nr My main problem is the Rosters. If I open the Rosters in IE7 it looks good but when I open it on Firefox it looks terrible, the images are all over the place and cant even see some of the text that I have under the images. I am using PageBreeze (Free Version). Can somebody please help me how I can fix the problem, I will greatly appreciate it. Thanks |