HTML - Firefox Vs Ie Display Issues
Hi guys,
I've been working on a website for a friend for a while now and thought I had it complete. That was until I opened it with IE! Things don't look right in IE - and also IE crashes when some pages are loaded. Any chance you could look at this page: http://www.flatvision.name/de/index.php in both IE & Firefox and offer some advice as to why it does what it does? Thanks very much - help and advice much appreciated. ! Leigh Similar TutorialsFirefox looks fine. Internet Explorer looks rather dumb. 1. Alignment is off 2. One of the links doesn't work 3. Within the site, the main content box adjusts itself according to text (please click reddish image to see) Does anyone know how I can fix this? (I'm sure many people have had this problem. I suppose I could use image map on the main page- that would solve #1 & 2. But I'm at a loss about #3.) Thank you very, very much! http://www.geocities.com/rk.grant/ So I'm not completely new to html website design, but I am building a site and was just going to throw up a banner and some text saying coming soon. So the text displays fine. But I cannot for the life of me figure out how to get the images to display. I have checked and double checked the source code and it should be fine. I manually logged into my ftp and the file is in the directory so it shouldn't be an issue of not being able to find it. Can I get any help at all? Here is the link: http://www.huntlink.net my code is as follows: <!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>Untitled Document</title> </head> <body> <table width="800" border="0" align="center"> <tr> <td><img src="images/mainbanner.png" width="800" height="150" /></td> </tr> <tr> <td align="center"><h2>Coming Soon!</h2></td> </tr> </table> </body> </html> Any help would be great. I don't know why the image isn't displaying. It works when I preview it in dreamweaver also. I modified text on a web page yesterday for a client and added an image to it as well. I simply copied existing code that was to be commented out, modified the text and image file name, commented out the previous code and then uploaded the file, via FTP, to the server. On my machine it looks terrible when I go to the client website and access the page via their link. All of the horizontal lines are at the top instead of between sections as it should be. However, if I just double click the HTML file directly it opens fine. It also opens fine on a co-workers machine regardless of how he does it. The client sees it fine too. I have not been able to find a reason why this is happening and I went back through the code twice more, redoing my work, to make sure I was not commenting something out that shouldn't be. I use I/E 8 and my co-worked uses I/E 6. I don't know about the client but since I can see it fine when I double-click the file itself I don't think that is the issue. Any assistance would be greatly appreciated as we do updates for this client pretty regularly. Thanks, Doug Hey guys. Having some issues on both my website and one I did for my Brother, the images not aligning properly. Both are fine in Firefox, but not in IE. www.michaelsingleton.co.uk www.ucba.co.uk If anyone would be so kind as to have a look over the code, it would be much appreciated! Thanks Mike. One of the pages on my website shows up differently in Firefox than it does in other web browsers. Here is what it looks like in the following browsers. Google Chrome, Safari: Firefox: One of the most noticeable problems is that in Firefox, the form's submit button is missing. If you would like to look at the html code, the url is Nmacro.com/Contact.html. Also, I used iWeb to create my website. Thanks so much. Hello, My website works fine in IE but when i open it in Firefox the small square images don't show up - can anyone give advice on what is causing this and a fix for it? http://www.turbulenceurbanwear.com/leilani.htm Thanks for your help Hello, Having issuse with the browsers. Firefox I am all good but when I look at IE7 one page stops reading my CSS. I have NO idea y. PLEASE HELP!!! I know that means I have some errors in my code, but Im having trouble spotting them. The background isnt working right in Firefox and Opera. Link: http://killinghookers.net (Code has been changed slightly. View the source on the page for the latest code) For some reason as well, the copyright information isnt staying at the bottom of the page but is floating left of the main content under the right nav column. After messing around this is what I have: HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <meta http-equiv="Title" content="RSGOD.NET HOME" /> <meta name="author" content="I Hate My User Name"> <title>RSGOD.NET HOME</title> <link href="master.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> <div id="page"> <div id="logo"></div> <div id="nav"> <ul> <li><a href="/" title="Home">Home</a></li> <li><a href="http://www.killinghookers.net/forum" title="Visit The Forum">Forum</a></li> <li><a href="#" title="#">Nav Item</a></li> <li><a href="#" title="#">Nav Item</a></li> <li><a href="#" title="#">Nav Item</a></li> <li><a href="#" title="#">Nav Item</a></li> </ul> </div> <div id="side_left"> <div id="side_cat_title"> Navigation </div> <font color="#000099"><p>Home</p></font><br /> <p><b>Other Important Sections:</b></p> <p> · <a href="http://www.killinghookers.net/forum" title="forum">Forum </a></p> </div> <div id="center"> <div id="cat_title"> News </div> Here's some news :) </div> <div id="side_right"> <div id="side_cat_title"> Useful Links </div> <p>· <a href="http://www.killinghookers.net/forum/index.php?act=Reg&CODE=00" title="Register to Enjoy the Benifits of Killing Hookers!"> Register </a></p> <p>· <a href="http://www.killinghookers.net/forum/index.php?act=UserCP&CODE=00" title="Visit Your Profile"> My Controls </a></p> <p>· <a href="http://www.killinghookers.net/forum" title="Visit the Forum"> Forum </a></p> <p>· <a href="http://www.killinghookers.net/forum/index.php?showforum=36" title="Need a Game? Visit the Games Section!"> Game Downloads </a></p> <p>· <a href="http://www.killinghookers.net/forum/index.php?showforum=39" title="Visit for the Best Movies!"> Movies </a></p> <p>· <a href="http://www.killinghookers.net/forum/index.php?autocom=market" title="Market"> Store </a></p> <p>· <a href="http://www.killinghookers.net/forum/index.php?autocom=sotw" title="Sig Of the Week"> Sig of the Week </a></p> <p>· <a href="http://www.killinghookers.net/forum/index.php?showforum=7" title="Visit for Awesome Music!"> Music Downloads </a></p> </div> <div id="footer"> <p> ©2007 Killing Hookers.net <br /> Coding Help (Lots!) by <a href="http://bbmodding.com/about.php" title="I Hate My User Name's Website">I Hate My User Name</a> <- Super Tech :) </p> </div> </div> </div> </body> </html> Code: /* +---------------------------------------------------------------+ | | | CSS and HTML Designed by I Hate My User Name | | Contact: ihatemyusername [at] hotmail.com | | Do not reuse without my permission! | | | +---------------------------------------------------------------+ */ body { margin: 0px; padding: 0px; height: 100%; /*Have to reset those terrible browser defaults*/ background-color: black; width: 940px; margin-left: auto; margin-right: auto; } #wrapper { width: 940px; height: 100%; margin-left: auto; margin-right: auto; /*Creates our fixed width and the margins center it*/ background-image: url("images/wrapper.png"); /*Borders*/ } #page { width: 922px; height: 100%; margin-left: auto; margin-right: auto; /*This has the actual page centered between the borders*/ background-color: black; font-family: verdana; font-size: 12px; color: white; } #logo { width: 922px; height: 200px; background: url("images/logo.png"); } #nav { width: 922px; height: 28px; background: url("images/nav_bg.png"); border-top: 1px solid #808080; border-bottom: 1px solid #808080; font-family: verdana; font-size: 12px; color: black; background-color: white; } #nav ul { margin: 0px; list-style: none; display: block; float: left; padding-left: 0px; margin-left: 0px; } #nav li { margin: 0px; list-style: none; display: block; float: left; width: 99px; height: 22px; padding-top: 6px; padding-left: 0px; margin-left: 0px; border-right: 1px solid #808080; text-align: center; } #nav a { color: #333333; text-decoration: none; } #nav a:hover { color: black; text-decoration: underline; } #side_left { float: left; width: 150px; height: auto; margin-top: 10px; margin-left: 5.5px; margin-right: 5.5px; background-color: white; color: black; } #center { float: left; width: 596px; height: auto; margin-top: 10px; background-color: white; color: black; } #side_right { float: left; width: 150px; height: auto; margin-top: 10px; margin-left: 5.5px; margin-right: 5.5px; background-color: white; color: black; } #cat_title { width: 591px; height: 19px; background: url("images/cat_title.png"); font-size: 12px; padding-top: 5px; padding-left: 5px; border-bottom: 1px solid #808080; } #side_cat_title { width: 150px; height: 19px; background: url("images/side_cat_title.png"); font-size: 12px; padding-top: 5px; border-bottom: 1px solid #808080; text-align: center; } #footer { width: 940px; height: 28px; margin-left: auto; margin-right: auto; /*Creates our fixed width and the margins center it*/ background-image: url("images/footer_bg.png"); } #footer p { text-align: center; font-family: verdana; font-size: 10px; color: white; /*Borders*/ vertical-align: bottom; height: 28px; } Help much appreciated. I was making the template for my friend and didnt realize the Firefox bug. Using the following code column within my datagrid. It gives me different results within firefox and IE. It should show some text and then the image should appear after the text. Within IE 7 it works fine but within firefox 3.6.10 the image is directly over the text. I'm not using a CSS file. This is a page I inherited and I'm asked to fix this. Any help would be appreciated. Code: <asp:templatecolumn headertext="Name" headerstyle-width="90px" sortexpression="varName"> <itemtemplate> <asp:label width="10" id="lblName" runat="server"> <%# DataBinder.Eval(Container.DataItem,"varName")%> </asp:label> <img src='/Images/Info16x16.gif' border=0 /> </itemtemplate> </asp:templatecolumn> Hi Everyone- I'm hoping someone out there might be able to solve a problem I've been having with my site for a number of years. The site was designed for IE but with the growing popularity of Firefox and Safari (to name a few), I want to insure that it works properly with those browsers. For the most part, it does -- except when displaying a background image in a table. For example - look at this page: http://www.cygnus-x1.net/links/rush/...anentwaves.php When viewed in I.E., the grey background image with the woman displays properly, as does the full image of the album cover within. However when viewed in Firefox or Safari, the background image repeats near the bottom for about 20 pixels. The problem also exists on a page like this one: http://www.cygnus-x1.net/links/rush/lyrics.php Where the brown background image which includes the words "Rush Lyrics" displays properly in I.E. but seems to repeat for 20 pixels in FF. This one's been driving me crazy for years and, due to some recent changes I've been making, it's come back to haunt me. If anyone has any suggestions as to why this is happening and what I can do to remedy it, I would greatly appreciate it... Thanks so much. Hi, I'm just learning html and I'm creating my website in Frontpage 2003. I looked in IE6 and my individual pages are exactly how I want them to look. However, viewing the same pages in Firefox presents me with a problem I'm not sure how to correct. It has to do with the center table. I originally copied and pasted the contents from Excel into the table (which I think was a mistake now). My workaround to this was copying and pasting the contents in the table into Notepad; and also shortening the length of each line; and then re-pasting the contents back into the table. It looks o.k. in Firefox but the alignment is no longer "justified". Can someone please tell me what I should be doing in the html code here? To see what I mean please open the link below in both IE and Firefox. http://www.prosperityteachers.com/ne...ew_thought.htm Much appreciated! Hey all, I was wondering if anybody had any pointers on this website I've been building. It looks alright so far in Firefox, but I've had some issues in IE. The link is: http://www.totaros.com/totaros new/index.html Specifically, -The image distortion on the menubar-what are the best types of images to save these as for compatibility in IE? -The menubar not resizing in IE with different resolutions -Aligning text next to pictures (such as on the Entertainment page). This works in FF, but not in IE. -Any other problems noticed. Thank you! Hi - I got a small issue with onmouseover and clickable area on images in Firefox. Things work fine in IE but don't work correctly in Firefox. With firefox there seems to be dead areas where there shouldn't be dead and detects mouseovers were it shouldn't. Same goes goes for clickable area of the button image. Go here and click on the one button - http://www.agile-x.com/bridgeway/ then try the buttons at the bottom of the window that pops up in Firefox and IE. Thanks. Hi, could somebody please explain to me why these pages look different in IE and firefox? http://www.vub.ac.be/ARCH/bachelor.html (something is terribly wrong with the layer "content" in IE) http://www.vub.ac.be/ARCH/ae-lab/home.html (the logo on the left is shifted down in IE) the layout in firefox is as i intended it to be!! thanks Hi, i am new to this forum and would really like to congratulate all of the administrators and people keeping up this very good work. I am trying to make a nested table in HTML, however i have some display issues. In Firefox, all the images and tables display well, however in IE, the bottom part (bootom image) does not display at all. The page link is http://www.carmelgcauchi.com/site/TE...R%20KOTBA.html There is also onother page wherby Firefox displays all the page correctly, while IE omits part of the table. The link is http://www.carmelgcauchi.com/site/dwari.html all help would be really appreciated. regards I did some searching, but have not found the exact probelm here, so I am starting new: I created a site using CSS/HTML for my layout (using Dreamweaver). Whenever I view it using IE7, it looks great and everything works. When I open it in Firefox, once again it looks good, except for the bottom of the divisions right above my footer, there is a 20px offset and blank space on the 2 side divisions, but not the center one. Lastly, when you view this in IE6 or IE5.5, the middle division is pushed down past the 2 side divisions so you see blank space between those and scroll down to see the middle division. It is only in the building stages and some links are not completed yet, and the main site is: http://dana.sportslineceramics.com I piggy-backed it off my own website so I can view it live and work on it. I have tried everything I can think of to get it to display right, and it just does not. I want to use an <iframe> in the middle division so that all links open on that same page instead of having 17 different pages. Thanks in advance for any suggestions! Dear All, As someone relatively novice in html I am currently redesigning my website and have got it to look exactly how I want it in Firefox. However, it does not display properly in IE. The url in question is www.adamwestmagic.com/home.php. The differences to note are the top right images of the 'heart' and bottom left images of the 'spade' show a small gap below them - I believe this is something to do with the 'overflow' option and have tried adding in a 'style' command to counter this but with no luck, and am not well versed in CSS to do it via that (yet). EDIT: This has been fixed - I was following standard coding procedure of indenting to aid reading, so was indenting my <tr><td> tags. Removing tabs (removing whitespace) around the <img> tags fixed the problem. Thank you IE! Another obvious discrepancy is the left hand 'gradient' image - IE seems to have rotated it by 90 degrees for no apparent reason. EDIT: This is now also fixed, by changing the 38 x 1 pixel png image for a jpg which magically remedied it. God knows why. This is turning into a bit of a soliloquy! The final, and perhaps more substantial difference is that IE does not dynamically resize the page, whereas Firefox does. I know this is perhaps unconventional in not picking a size for the page and leaving left and right space for higher resolutions, but I do not like that look on large screens. I have changed to a black background for the purpose of debugging - it would be very difficult to see the gradient images etc. with the standard grey/white background. Interestingly these issues vary compared to another computer. I am running XP and IE 7 and see the error with the gradient image, but resizing happens fine. Another computer (laptop) running Vista and IE 7 doesn't seem to have the gradient image problem, but does not resize properly. I am thoroughly confused! Any help is gratefully received, thank you. Adam My site works in Firefox and Safari just like I want it to, but when IE tries to read it, the divs and images get spaced out and wrapped around AND it is not centered on the page like it should be... what is my coding flaw? www.nativboardriding.com check it out in firefox or safari to see how it SHOULD be displayed, then open it with IE. Thanks, Levs I don't know how to even debug this because it works in firefox but not IE. I display a table and use PHP script to populate the table. In explorer, the "fellow" value gets SKIPPED and then the next value ("rcf_date") gets put into that td, so everything gets screwed up! Looking at the code I can't figure out what it is about it that explorer doesn't like. Why on earth would it skip the fellow field? Here;s the php code that displays the table: Here's a link to a screenshot of the table in IE: http://bp1.blogger.com/_cy0zia_bU_s/...screenshot.png Here is the code to display that table. Any help would be appreciated: Code: <?php require('secure.php'); include "dateheader.php"; include "connectdb.php"; ?> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Active consult patient list</title> <link href="stylesheets/simple.css" rel="stylesheet" type="text/css"> </head> <?php $query = "SELECT id_incr, patient_name, mrn, location, fellow, rcf_date, admission, consult_reason, impression, recs, comments ". "FROM active_consults WHERE signoff_status = 'a' ". "ORDER BY patient_name"; $results = mysql_query ($query) or die (mysql_error()); $num_pts = mysql_num_rows ($results); $consultheading =<<<EOD <table class="tablemargin" bgcolor="#CCCCFF" width = "98%" border = "1" cellpadding = "2" cellspacing = "2" align = "left"> <th> Name </th> <th> MRN </th> <th> Loc </th> <th> Fellow </th> <th> Date of Consult</th> <th> Reason for Admssion </th> <th> Reason for Consult </th> <th> Impression </th> <th> Recs </th> <th> Comments </th> <th> Update patient </th> </tr> EOD; echo $consultheading; while ($row = mysql_fetch_assoc ($results)) { ?> <tr> <td bgcolor="#FFFFFF" > <?php echo $row['patient_name'];?> </td> <td bgcolor="#FFFFFF" > <?php echo $row['mrn'];?> </td> <td bgcolor="#FFFFFF" > <?php echo $row['location'];?> </td> <td bgcolor="#FFFFFF" "> <?php echo $row['fellow'];?> </td> <td bgcolor="#FFFFFF" > <?php echo $row['rcf_date'];?> </td> <td bgcolor="#FFFFFF" > <?php echo $row['admission'];?> </td> <td bgcolor="#FFFFFF" > <?php echo $row['consult_reason'];?> </td> <td bgcolor="#FFFFFF" > <?php echo $row['impression'];?> </td> <td bgcolor="#FFFFFF" > <?php echo $row['recs'];?> </td> <td bgcolor="#FFFFFF" > <?php echo $row['comments'];?> </td> <td bgcolor="#FFFFFF" align="center"> <a href="editpatient.php?action=edit&id=<?php echo $row['id_incr']; ?>">[edit]</a> </td> </tr> <?php } ?> <td bgcolor="#CCCCCC" colspan=11 align="left" class="fineprint"> Total active patients: <?php echo $num_pts; ?></td></tr> <td></td> <tr> </tr> <tr><td align="center"><a href="newpatient.php">[ADD PATIENT]</a></td> <td align="center" COLSPAN=4><a href="displaysignoff.php">[DISPLAY SIGNED-OFF LIST]</a></td> <td align="center" colspan=3><a href="export.php">[EXPORT ALL PATIENTS (EXCEL)]</a></td> <td colspan=3 align="right"><a href="http://www.hfhpulm.com">[HFHPULM.COM]</a></td> </tr></table> Help!!!! I have been looking at this for almost 6 hours and I still can't explain why my horizontal menu wrapped using Firefox and not IE. I have firefox 3 installed and some of the categories (on the same tree) wrapped and some doesn't. But if i refresh it a few times, it become normal again. This make no sense. Maybe I need to get some fresh air because i am starting to see spots on the screen. http://208.84.114.15 |