HTML - Very Exciting Browser Incompatibility Problem
Hi there,
Im sorry to be bringing up this rather well trodden topic, but after extensive searching through forums and trying everything I could find, I must admit I need some expert advice. Building a website, mostly html, with a small amount of css for text. Site works well in safari, firefox, chrome, but not IE. IE (7) displays the top navigation bar section, but ignores the rest of the site. Ive been trying to validate and fix all the problems, but some of the issues raised I cant fix without changing the site's appearance. I dont believe my css is complex, and other info sites have suggested what Ive used should be supported by IE7. The only thing I can now think is that for some reason ie7 doesnt recognise the second table onwards. I am sorry to be using tables - this may be my downfall - but my client wanted to have the site as accessible across the world (and so rubbish olf browsers etc) so I wanted to use as little css as possible. Any suggestions would be very much appreciated, Lindsay the url is: http://www.mosaiccreative.co.uk the css is as follows: @charset "UTF-8"; p { margin-left: 34px; margin-right: 30px; margin-top: 30px; font-family: verdana; font-size: 14px; font-weight: lighter; line-height: 16px; color: #333333; } h1 { margin-left: 161px; margin-top: 2px; font-size: 14px; font-family: verdana; font-weight: lighter; color: #333333; } h2 { margin-left: 30px; margin-top: 0px; font-family: verdana; font-size: 12px; color: #993300; font-weight: lighter } h3 { margin-left: 0px; margin-top: 6px; font-size: 12px; font-family: verdana; font-weight: lighter; line-height: 25px; color: #333333; } h4 { margin-left: 167px; margin-top: 0px; font-family: verdana; font-size: 12px; font-weight: lighter; color: #333333; } h5 { margin-left: 135px; margin-right: 30px; margin-top: 0px; font-size: 14px; font-family: verdana; font-weight: lighter; line-height: 16px; color: #333333; } h6 { margin-left: 34px; margin-right: 30px; margin-top: 0px; margin-bottom: 0px; font-family: verdana; font-size: 14px; font-weight: lighter; line-height: 16px; color: #333333; } .style2 { font-family: verdana; font-size: 12px; } .style3 { font-family: verdana; font-size: 14px; font-weight: bold; text-decoration: underline; } .style4 { font-family: verdana; font-size: 14px; font-weight: bold; } .style6 { font-family: verdana; font-size: 14px; font-weight: normal; text-decoration: underline; } Similar TutorialsHi all, I'm new to this site, I hope someone can help me figure out what on Earth I've done wrong. I've been editing this website to a new, CSS layout with DIVs instead of frames and tables. In my browser, IE6, it looks PERFECT, but in IE7, the DIV with the navigation text is overlapping the DIV with the header image, and in Firefox 2.0.0.16, the DIVs might as well not even be there--all the text runs right on top of the image! A screencap of what it looks like in my browser is he http://i44.photobucket.com/albums/f3...ta-browser.gif A screencap of how it's turning out in IE7: http://img.photobucket.com/albums/v6...IE7Version.jpg Firefox screencap: http://i44.photobucket.com/albums/f3...layout-cap.jpg I have no idea what I've done wrong, or why it shows up perfectly in one browser, but not in any other. The page used in the example is here, so you can see how it is on yours and peruse the code for mistakes: http://cityofdemons.com/lmr.html Thanks in advance for anything you can tell me! I've noticed this for awhile now, and it's driving me nuts. I've been working on a layout ofor my online costuming portfolio, and recently I added a scrolling table to post any site updates I make. As soon as I put in the coding for the scrolling table with the updates, the whole page went crazy in Firefox. In IE, it looks fine. Here's the coding I used for the whole layout.. HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Natalie's Cosplay</title> <link rel="stylesheet" href="style.css" type="text/css" charset="utf-8" /> </head> <body> <div id="wrapper"> <h1></h1> <div id="head-1" style="WIDTH: 401px; HEIGHT: 386px"></div> <div id="nav"> <ul> <li><a href="http://www.geocities.com/lnyworikkukenm//index.htm"><font size="1">HOME</font></a></li> <li><font color="#000000" size="1"><a href="http://www.geocities.com/lnyworikkukenm/Aboutme.html">ABOUT ME</font></a></li> <li><font color="#000000" size="1"><a href="http://www.geocities.com/lnyworikkukenm/completed.html">COMPLETED COSTUMES</font></a></li> <li><a href="http://www.geocities.com/lnyworikkukenm/inprogress.html"><font color="#000000" size="1">IN</font><font color="#000000" size=1>-PROGRESS COSTUMES</a></font> </li> <li><font color="#000000" size="1"><a href="http://www.geocities.com/lnyworikkukenm/planned.html">PLANNED COSTUMES</font></a></li> <li><font color="#000000" size="1"><a href="http://www.geocities.com/lnyworikkukenm/links.html">RECOMMENDED SITES</font></a></li> <li class="last"><a href="MAILTO:Chinesefightinyo@aol.com"><font color="#000000" size="1">CONTACT ME</font></a></li> </ul> </div> <div id="body-left"> <h2><font color="#000000"><em><font color=#000000>G</font></em>al</font>lery</h2> <div id="gallery"> <div class="gal" id="gzero"><a href="http://geocities.com/lnyworikkukenm/caterina.html"><img height="163" alt="Latest Costume: Caterina Sforza from Trinity Blood" src ="bigcat.jpg" width=221 ></a></div> <div class="gal" id="gone"><img height="41" src="1cat.jpg" width =57 ></a></div> <div class="gal" id="gtwo"><img height="41" src="2cat.jpg" width =57 ></a></div> <div class="gal" id="gthree"><img height="41" src="3cat.jpg" width =57 ></a></div> <div class="clear"></div> </div> <table width="133" border="0" cellspacing="0" cellpadding="3" align="center"><tr><td align="middle"><a href="http://www.website-hit-counters.com/" target="_blank"><img src="http://www.website-hit-counters.com/cgi-bin/image.pl?URL=8421-4416" alt="free website hit counters service" border="0" ></a></td></tr><tr><td align="middle"><font style="FONT-SIZE: 9px; COLOR: #24092c; FONT-FAMILY: Geneva, Arial, Helvetica, sans-serif; TEXT-DECORATION: none">Get a <a href="http://www.website-hit-counters.com" target="_blank" style="FONT-SIZE: 9px; COLOR: #444444; FONT-FAMILY: Geneva, Arial, Helvetica, sans-serif; TEXT-DECORATION: none" title="free website hit counter">free website hit counter</a> .</font></td></tr></table> </div> <div id="body-right"> <h2 align="left"><font color=#000000>W</font>elcome!</h2> <p align="center"> <br><font color="#000000" size="1">Please don't use any of my photos without asking! If you have any questions or comments, please send me an e-mail! <br>Thanks! ~Natalie</font></p> <h2></h2> <div style="OVERFLOW: auto; WIDTH: 400px; HEIGHT: 300px"> <table cellpadding="0" cellspacing="0" style="WIDTH: 350px"> <tr> <td> <font ><font size="1"><font color=#000000>~<u>UPDATES UPDATES UPDATES</font> </td> </tr> </table></font> </div> <div class="clear spacer"></div> </div> <div id="footer" align="center"> </div></a> <div></div></div> <p align="center"> c 2007 Natalie's Cosplay<br> Template from <a href="freewebsitetemplates.com">Free Website Templates</a><br><br></p> <div></div> </body> </html> hi guys ... i m developing a static web-page using HTML . When i run the page in IE, it works well but it is not supported at the same time by Mozilla . So, where might be a bug in the script? Hi all I'm new to html... I'he created one Html Page. Which comtains Frames. It is working fine in Firefox but in IE8 size is increased.. (Looking Like Zoom In) and Border of the Frame is not displaying in IE8. (You can see it in Images) so How to Make it look Similar on all Browser? Please help me to solve this.. I would like this banner to open in a new browser. I have tried placing target"_blank" in several different places with no luck. Any assistance would be appreciated! <a href="http://worldsluxurywatches.com"><img src="http://img843.imageshack.us/img843/1227/91075540858.jpg" border="0" width="274" height="184" alt="BannerFans.com" /></a> Thanks! Terry Hey guys, I have some questions regarding my recent school project. I'm working on a simple video-interface interaction that I'm having trouble with. http://www.autoquicktrade.com/voto/ However, it only works on firefox. If I use safari/google chrome to view it, it will bounce up and down. Also, how can i make sure my mouse cursor stays in the video so when i scroll it won't make the website scroll too? (I tried Iframe but it doesn't work)* Any ideas on how I can solve this? Please help! Thanks I have created a web page which is running acquratey on IE8 but not running acqurately on IE7 or other version. Goodnight, i don't know why i can't access to this website : www.moroccantrolls.co and other of my friends do !!!! some of them told me to shutdown adblock ??? plzz Help. how come i cant get my site to look the same in both browsers, im setting the margin, so the browser know then it changes between ie and firefox ie renders it how i want www.mynightclubs.co.uk css www.mynightclubs.co.uk/css/main.css I created a website with google pages http://jlandbirk.googlepages.com/cross It works fine in Explorer but some problems in Firefox. In Firefox the banners are spaced further apart. But when I click on them they grow closer together. Keep in mind google pages has some built in code. Any ideas? Hello! Please ceck: http://htlounge.net/testing Near to logo is a adsense banner.. 468x60. In IE and Opera is displaying ok! But in Firefox not.. It is a white space! What is the problem! Thank you! firefox ie what am i missing in the css to make firefox look like ie thanks Hey Guys I have a problem when viewing my website in firefox. However, It works in opera, safari and Quanta's preview window. I have unwanted gaps underneath buttons images that have rollovers. Wrong: Correct: The code is: Code: <TABLE border="0" cellpadding="0" cellspacing="0"> <TR><TD><IMG src="images/sidebar_top.gif"></TD></TR> <TR><TD><IMG src="images/sidebar.gif"></TD></TR> <TR><TD> <!-- Home Button --> <a href="" onmouseout="document.btn_home.src=btn_home_nm.src" onmouseover="document.btn_home.src=btn_home_hv.src" > <img src="images/btn_home_nm.gif" border="0" name="btn_home"> </a> </TD></TR> <TR><TD> <!-- Opening Times Button --> <a href="" onmouseout="document.btn_opening_times.src=btn_opening_times_nm.src" onmouseover="document.btn_opening_times.src=btn_opening_times_hv.src"> <img src="images/btn_opening_times_nm.gif" border="0" name="btn_opening_times"> </a> </TD></TR> I don't get these gaps on firefox if I remove the a tag like this: Code: <TABLE border="0" cellpadding="0" cellspacing="0"> <TR><TD><IMG src="images/sidebar_top.gif"></TD></TR> <TR><TD><IMG src="images/sidebar.gif"></TD></TR> <TR><TD> <!-- Home Button --> <img src="images/btn_home_nm.gif" border="0" name="btn_home"> </TD></TR> <TR><TD> <!-- Opening Times Button --> <img src="images/btn_opening_times_nm.gif" border="0" name="btn_opening_times"> </TD></TR> But then I don't have rollovers Does anyone know why this happens, and why it doesn't happen on opera or safari? Thank you Toshi Hey everyone, Hopefully someone can help me. One of the pages on my website goes all wonky when I view it in a browser, but it looks fine in Dreamweaver. I know the code is correct, and what's weird is that when I right click an image and view its properties, the page straightens out. I think it may be because I'm aligning a lot of the pics left or right as opposed to default, but I really don't want to change the look of the page. If you look he www.lovefresh.com/bath.html you'll see what I mean. I can also post the code if that helps...thanks for any help!! Tara Just like everyone else is seeming to have lately, I am apparently one of those lucky people anyways i am having a problem positioning my whole page between browsers. It works just how i want it in firefox (centered kind of), but in ie6, and ie7 its all scrunched to the left. anyways the link to my site is: http://uberwalla.110mb.com It would be greatly appreciated for some help also help on any other browser there might be problems with would be great. If anyone has safari, netscape and opera i mean. to help me format my template. well thanks a bunch! - uberwalla I am new to HTML coding. I am trying to create a form, which, automatically submits the form contents and finally automatically close the browser window. But I am not able to get the self form submissions and self window closing. The code that I have written is found below. Kindly advice on how to get it working. Thanks in advance. <html> <body> </form> <p><b>This form submits an HTTP POST request to url '/forms_example/post'</b></p> <form name="form1" form method="POST" action="http://localhost/forms_example/post"> <table> <tr> </tr><tr><td>Name</td><td><input type="Text" name="name" VALUE="roger"></td></tr> <tr><td>Address</td><td><input type="Text" name="address" VALUE="smith"></td></tr> <tr><td>Phone</td><td><input type="Text" name="phone" VALUE="25714988"></td></tr> <tr><td>E-Mail</td><td><input type="Text" name="email" VALUE="roger.smithatgmail.com"></td></tr> <tr><td><input type="Submit" VALUE="submit" > </td></tr> </table> </form> </script> function GO(){ setTimeout("subForm()",0) } function subForm(){ document.form1.submit() } t = null; function closeMe(){ t = setTimeout("self.close()",2000); } </script> </body onload="GO()";"closeMe()"> </html> Im in desperate need of some help ASAP , im a graphic designer and have bitten off a little more than i can chew. This was my first flash site and while i found actually making the site in flash wasnt too difficult im having a BIG problem getting it up and online in working order. the site is BodyBronzeTanning.net PROBLEM 1 : if you vist the link in ie or safari youll see nothing comes up . this is my first problem. whats wrong with my code and why isnt it working . dose anyone have a VERY simple html page for full screen flash with no mailware or virus's they wouldnt mind sharing or could someone just help me get my code running? PROBLEM 2 : The site has been flaged for MAILWARE!?!?!?!?! ... i know i dint put anything i meant to be harmful so why is it flagging me ? i have no clue why my site would have anything harmful. PROBLEM 3 : This is the least important of my problems, i have a AS3 CONTACT form that i bought from flashden that advertised . just drag,drop and change the email on the php....i did so and its still not working if anyone would be willing to take a look and help me with this i would even be willing to pay or trade resources in exchange with help . the link to the .fla and .php is http://rapidshare.com/files/26634912...nning.zip.html Hi All, I have tested my site in IE7, firefox and safari, but i've been told i have a problem with IE6. (Which i can't test without uninstalling IE7) www.lahayna.co.uk I'm told the problem is only with the homepage, and with the media page, I've been given a screenshot which i've attached, but i don't know where to go from here. I've tried checking my CSS to ensure my images, padding and margins don't exceed set widths etc, but i've not made any difference so far. Your help is really appreciated, as i'm not getting any further with this site. Thanks Laura I'm working on a site which requires a art images to be display centred, and I've been using CSS as much as I can. The content is displayed in a centred div of fixed width, with another div inside it to carry the content. Code: #container { width: 650px; position: relative; /*margin: 0 auto;*/ margin:0 auto; margin-top: -15px; margin-bottom: -15px; padding: 0px; border: 0px; background-image:url("images/basiclayoutimages/basicbackground.jpg"); background-repeat: repeat-y; background-color: #b6463a; display:block; z-index: 1; } #content { width: 630px; position: relative; margin: 20px; margin-bottom: 10px; margin-top: 10px; padding: none; border: none; background-image: url('images/basiclayoutimages/Page Top 2.jpg'); background-repeat: no-repeat; background-color: transparent; z-index: 0; display: block; } In Firefox, Internet Explorer, Opera and Konqueror on Windows and Linux the images display perfectly. However, in Mac Firefox, the images are shifting well to the right and refusing to be centred at all. Are there any specific Mac issues with image layout? The css for the images is this: Code: img { border: 2px solid #1D7155; /*margin-left: 70px;*/ margin: 15px; } img.display { position: relative; margin: 0 auto; text-align:center; display: block; } I've tried setting the old html align=center, along with absolute positioning and a number of other things, to no avail. Are there any tricks I can use to get the thing working? Any tips greatly appreciated. [edit] I should mention that there is a fixed banner of menus across the top of page, absolutely positioned, so the art images are not the only objects on any given page. There is a caption and "previous" "next" links beneath the images too. |