HTML - Help! Ie8 Compatibility Problem.
I'm currently working on my site but I'm stuck on a IE8 compatibility error. Here is the link:
http://www.mym2webdesign.com/campustitle/shannon.html This is how IE shows the page: http://img338.imageshack.us/img338/10/iesucks.jpg In every other browser the page works fine, but when I tried it on IE8 the text overlaps. I've spent hours trying to look for a solution but no success. If anyone knows where the problem please let me know! Thank you for you time! Similar TutorialsHello, When i am viewing our site with IE9 compatibility mode or old versions of IE then the twitter feed at the bottom of the page is misplaced. http://www.greekconcierge.com/ Any ideas on how to fix this? many thanks, Andy Hello all, I've just made my first website, and tested it initially in IE 8 and then viewed in Safari, Chrome, and Firefox 3. It displays perfect in IE, Safari and Chrome, but Firefox has some quirks! Issue 1: My bordered pictures are displaying a blue border, which is yellow in the other browsers. Though they are also links, other non-bordered picture links don't have it, and I have set the links colours in the CSS to be yellow and grey anyway (which works fine for the text links). Issue 2: Small images next to each other won't sit side by side, they jump to the next line. Both these issues can be seen on this page (if viewed in Firefox, naturally!): http://www.swingcopation.co.uk/whatwecando.html Any ideas would be greatly appreciated! I can post the code for the page if required. Thanks, Nubbin. Hi everyone. New to the forums and thought I could get some help with regards to my personal website http://judyhuynh.ca Anyways, the problem is the browser compatibility. Just when I thought everything looked OK, I checked it out on my other browsers (Chrome, Firefox, Safari, Opera) but there was one problem with IE. I use Cutenews for blogging and it does not show the line breaks in between paragraphs and it does not show my .png profile picture on the left of the sidebar where there's the quick bio. http://browsershots.org/http://judyhuynh.ca/ Line breaks in Cutenews are generated automatically when typing paragraphs. So I don't know and the .png thumbnail on the left, nooo idea about that. It irritates me because it just looks so ugly on IE, ahha and some people still use that 'not-so-great' browser. Help is much appreciated!!! Hello, I'm new to webpage design and know very little HTML, but I am making a site with the help of a template and it seems to be working perfectly in Chrome, Firefox and Opera, but the moment I open the page in IE the frames are all broken and nothing is where it should be, could someone take a moment of there time and check the code below and maybe correct/clean it up it for me so I know where I have gone wrong, could you explain also why it works ok in those browsers and not IE? Thanks in advance. Code: <html lang="en"> <head> <title>Hotel </title> <meta charset="utf-8"> <meta name="description" content="Your description"> <meta name="keywords" content="Your keywords"> <meta name="author" content="Your name"> <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"> <!-- 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/maxheight.js"></script> <script type="text/javascript" src="js/cufon-yui.js"></script> <script type="text/javascript" src="js/Lane_-_Narrow_400.font.js"></script> <script type="text/javascript" src="js/cufon-replace.js"></script> <!--[if lt IE 9]> <script type="text/javascript" src="js/html5.js"></script> <link rel="stylesheet" href="css/ie.css" type="text/css" media="screen"> <![endif]--> <!--[if lt IE 7]> <script type="text/javascript" src="http://info.template-help.com/files/ie6_warning/ie6_script_other.js"></script> <![endif]--> </head> <body id="page1" onLoad="new ElementMaxHeight();"> <div class="main-extra1"> <!-- header --> <header> <div class="main"> <div class="extra-wrap"> <div class="logo"> <a href="index.html">The Hotel </a> </div> <div class="header-col"> <div class="wrapper"> <div class="socials"> <a href="" class="normaltip" title="Facebook"><img src="images/facebook.jpg" alt="" /></a><a href="" class="normaltip" title="Twitter"><img src="images/twitter.jpg" alt="" /></a> </div> </div> <div class="wrapper"> <form action="" id="search-form"> <fieldset> <label><input type="text" value="Site Search" onFocus="if(this.value=='Site Search'){this.value=''}" onBlur="if(this.value==''){this.value='Site Search'}" /></label><input type="image" src="images/search-form-input-img.png" alt="" /> </fieldset> </form> </div> <nav> <ul class="sf-menu"> <li><a href="index.html" class="current"><strong><strong>Home</strong></strong></a></li> <li><a href="singles.html"><strong><strong>Rooms</strong></strong></a> <ul> <li><a href="singles.html">Singles</a> <li><a href="doubles.html">Doubles</a></li> <li><a href="doublesd.html">Deluxe Doubles</a></li> <li><a href="twinfamily.html">Twin/Family Rooms</a></li> <li><a href="apparts.html">Appartments</a></ul></li> <li><a href="menus.html"><strong><strong>Services</strong></strong></a> <ul> <li><a href="restaurant.html">Restaurant</a> <ul> <li><a href="menus.html">Menu's</a></li> <li><a href="restaurant.html">Functions</a></li> </ul> </li> <li><a href="more.html">Bar/Quiz</a></li> <li><a href="more.html">Live Music Nights</a></li> </ul> </li> <li><a href=""><strong><strong>Reservations</strong></strong></a></li> <li><a href="index-4.html"><strong><strong>Find Us</strong></strong></a></li> </ul> </nav> </div> <div class="clear"></div> </div> <div class="faded-indent"> <div id="fade"> <div><img src="images/slide1.jpg" alt="" /><strong><img src="images/muse-img.png" alt="" /></strong></div> <div><img src="images/gardenflat.jpg" alt="" /><strong><img src="images/gardenflat.png" alt="" /></strong></div> <div><img src="images/room4.jpg" alt="" /><strong><img src="images/room14.png" alt="" /></strong></div> <div><img src="images/slide4.jpg" alt="" /><strong><img src="images/room9.png" alt="" /></strong></div> <div><img src="images/slide5.jpg" alt="" /><strong><img src="images/room12.png" alt="" /></strong></div> </div> <div class="pager"></div> </div> </div> </header> <div class="main"> <!-- content --> <section id="content"> <div class="wrapper"> <article class="alpha omega grid_4_1 maxheight"> <div class="box1 maxheight"> <div id="twitter"> <div><center><a href="" class="code-icon button1">Sign Guestbook</a></center></div> <div><br> <iframe src="http://?title=0&byline=0&portrait=0" width="320" height="190" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> </div> </article> <article class="omega alpha grid_8_1 maxheight"> <div class="box maxheight"> <div class="indent"> <h1 class="h1-pad"><strong>Welcome</strong></h1> <div class="wrapper"> <figure class="left"><a href="images/front.jpg" class="lightbox-image" rel="prettyphoto" title="Hotel Exterior" ><img src="images/front.jpg" alt="" /></a></figure> <div class="font"> <span class="title">A truly individual experience, full of innovative modern fittings and art that makes it a destination in itself.</span><br>The 14 boutique rooms in prime seafront location overlook the perfectly unspoilit Victorian seaside retreat. <p class="pad">We love our hotel and are very proud of it! Many of our guests return time and again and want to stay in a different one of our unique rooms every time! Come and see what 15 years of patient, continuous, development and passion for luxurious fittings and modern art can achieve - colourful, modern and deliberatley diffrent. </p> </div> <a href="more.html" class="button2">Read More</a> </div> </div> </div> </article> </div> <div class="indent"> <div class="container_12"> <div class="wrapper"> <article class="grid_4"> <h4><span><strong>Special</strong> Offer!</span></h4> <div class="inside"> <div class="wrapper"> <figure><a href="images/wine.jpg" class="lightbox-image" rel="prettyphoto" title="Wine List" ><img src="images/winesmall.jpg" alt="" /></a></figure></div> <h4 class="h4-pad">This Weeks menu</h4> </div> </article> <article class="grid_4"> <h4><span><strong>in</strong> room</span></h4> <div class="inside"> <ul class="list_1 list_1-line"> <li><a href="#">Telephone with a direct line</a></li> <li><a href="#">Colour TV/Freeview/Sky</a></li> <li><a href="#">Tea&Coffee Facilites</a></li> <li><a href="#">Free Wifi</a></li> <li><a href="#">Full Fitted Kitchen(Appartments only)</a></li> <li><a href="#">Sea Views on most rooms</a></li> </ul> <a href="more.html" class="button2">View All</a> </div> </article> </div> </div> </div> </section> <!-- footer --> <footer> <div class="container_12"> <div class="wrapper"> <div class="grid_6"> <div class="policy">Hotel © 2012 | <a href="mailto:">Email</a></div> </div> </div> </div> </footer> </div> </div> <!-- trigger --> <div id="advanced"> <span class="trigger"></span> <ul> <li class="trigger_adv"><span>Links</span> <ul> <li><a href="">Us on Trip Advisor</a></li> <li><a href="">Us on Bookings.com</a></li> <li><a href="">Us on Hotels.tv</a></li> </ul> </li> <li class="trigger_adv"><span>Photo Galleries</span> <ul> <li>Parties</li> <li>Functions</li> <li>Special Events</li> </ul> </li> <li class="trigger_adv"><span>Video Galleries</span> <ul> <li>Room Videos</li> <li>Event Videos</li> </ul> </li> </ul> </div> <script type="text/javascript"> $(document).ready(function(){ if ($("#fade").length) { $('#fade').cycle({ timeout: 7000, speed: 2000, pager: '.pager' }); } }); </script> <!-- panel begin --> <script type="text/javascript"> $(function(){ $("#advanced .trigger").toggle(function(){ $(this).parent().animate({right:0}, "medium") }, function(){ $(this).parent().animate({right:-172}, "medium") }); }); </script> <!-- panel end --> <script type="text/javascript"> Cufon.now(); </script> </body> </html> Hi guys, I am just adding an image in the home page of citydental.ie. If I look at the site in Mozilla it is ok, the image is shows. If I look at the site on IE8 it doesnt. I guess whoever designed this site earlier did it for old browsers? How can I repair this problem? thanks a million guys Nat I'm working on a web-type project which will ultimately end up on DVD. The thing works well on a PC but on Macs I'm having issues. Navigation through the site is via button graphics contained in a folder called Buttons. The HTML I use to reference these buttons is "../../Buttons/ImageName.jpg" or similar. Macs return a placeholder with "???" rather than the image. I've tested this on most browsers including Safari and as I say it works on a PC but not on a Mac. Is it my coding or am I missing something? I am a novice web admin. I am having an issue with placing a sign up form on my web site. It look good in IE8 or FF, but anything older (IE7) it looks horrible. See Attachments. Here is the code that I have: <ul class="site-nav2"> <p> </p> <FORM "ACTION="https://app.expressemailmarketing.com/Survey.aspx?SFID=75036" METHOD="POST"> <div align="center"><span class="style6 style5"> <FONT FACE="arial, helvetica">Sign up for our Mailing List </FONT></span> </span><BR> <input type="TEXT" name="email" /> <BR> <INPUT TYPE="IMAGE" SRC="images/sign_up.gif" ALIGN="ABSMIDDLE" BORDER="0" /> <INPUT TYPE="HIDDEN" NAME="SkipSurvey" VALUE="FALSE" /> </div> </FORM> </ul> Here is what I have for that site-nav2 CSS: .site-nav2 { position:absolute; right:10px; top:519px; width:234px; height: 111px; visibility: visible; overflow: visible; border: 0; border-width: 0; background-image: url(images/signup.png); } .site-nav2 li { font-family:"Arial Narrow", Arial, Helvetica, sans-serif; font-weight:bold; font-size:12pt; line-height:normal; text-transform:lowercase; color: #000000; } .site-nav2 li a { text-decoration:none; color:#917E65; padding-left:36px; background-repeat: no-repeat; background-position: left 7px; } .site-nav2 li a:hover, .site-nav2 li a.act { color:#A43812; background-repeat: no-repeat; background-position: left 7px; background-image:url(images/signup.jpg) } Hi Folks, I've been working on a web portal (my first ever) and it works nicely in Firefox. I'm using JavaScript to generate the objects, append them to the appropriate form and when the user gets to that form, display it to the screen. I generate my objects (I'll use text fields for example) as follows: function createText( txtName, txtValue, txtTop, txtLeft, txtWidth, isDisabled ) { var newTxt = document.createElement( "INPUT" ); newTxt.name = txtName; newTxt.id = txtName; newTxt.setAttribute( "STYLE", "position:absolute; left:" + txtLeft + "px; width:" + txtWidth + "px; top:" + txtTop + "px"); newTxt.type = "TEXT"; newTxt.value = txtValue; newTxt.disabled = isDisabled; return newTxt; } This is pretty straight forward but my question is while it works out nicely in Firefox and it places the objects where I define, IE places them apparently relatively and Opera doesn't show text on my buttons. Here's hoping there is an easy fix! Hello, Wonder if you can help, i'm very new to coding, and i have an error in Dreamweaver showing as 'error parsing styles'. It effects IE 6. The code flagged is: body { background-color: #EED38D; background-image: url(images/background.gif); background-repeat: repeat-x; a img {border:0; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; color: #333; color: #333; } } Hope you can help! Thanks, Joe Browser only accepts HTML pages, right ? If there is something non-html, then browser will not display it. Question is, how does browser diplay PDF files ? is there a tag like <image> to display PDf files ? I am sending a request through my browser to server. Server accesses another program and this program extracts information from a page which has non-html tags. How will these tags be taken care of for forwarding it to browser ? Thanks Hi My use of HTML is pretty basic but adequate. On my charity website it appears OK in I.E. which I think I'm right in saying accounts for around 95% of users (?). However I find that in a Firefox browser my textural content is inconsistent, using a different (default?) font to my Verdana, and not resulting in the same size as used in the I.E. structure. Trial and error on the Firefox browser gets it right there, but then wrong on I.E. Is there (for starters) one (or more) tag(s) to a) set a default text in the Head for say Verdana Bold Size 2 colour #330099, then if so b) how to change size for any variations in body. Will welcome any advice on this matter. willemm I'm making an email newsletter for a client and I'm having trouble with the links in Internet Explorer. They work on my macs, but my client has internet explorer and says the links won't click. Can someone take a look at the source of the email and let me know what I'm doing wrong. It's the two coupons in the middle of the email. I made the entire tables that make up the coupons the links, which I think might be the issue, but I don't have easy access to a pc to troubleshoot so I thought I'd just come on here and ask the experts. Here is the link: www.thetargetshopper.com/email/wafflehouse/WaffleHeletterJAN09.html here's the code I think might be the issue: <a href="http://www.thetargetshopper.com/email/wafflehouse/coupon2.html" style="text-decoration:none; color:#000"> <table width="270" style="float:right; margin:8px 8px 8px 0px"> <tr> <td bgcolor="#fef200" style="border:2px dashed black; margin:12px;"> <p align="center"><span style="font-size:30px"><b>FREE Omelet<br />Any style</b></span><br /> <span style="font-size:18px">Buy one omelet, get the<br /> second free</span><br /> <span style="font-size:12px">(with purchase of 2 beverages)</span><br /> <span style="font-size:18px"><b>WAFFLE HOUSE</b></span><br /> <span style="font-size:10px">One per customer. Not valid with any other offer. Exp. 1/31/10</span> </p> </td> </tr> <tr> <td><span style="font-size:10px"><center><i>Click to view printer-friendly version</i></center></span></td> </tr> </table> </a> Thanks for the help! Can someone please offer advice related to http://www.telfordsteamrailway.co.uk...dale/index.php the 'Visit our website' link works in IE & Opera but not SAfari / FF/ Google the page validates - I just cant see why it doesnt work Hi all, I had recently made the pages for a website. The site works fine in IE6 and IE 7 but in IE 8 the page jumps left and right around 7-10 pixels while browsing. The same happens with Mozilla Firefox 3.0.11 also. I had designed the layout in tables however used a wrapper div tag to align my site at center. If I keep the site left align there is no jump. Also i had used div tags within td tags to create menu using ul and li tags. Can the use of divs be a reason for that jump. Please help if you had already faced this issue. Sanjay Hello there, I designed a website for a small company and the moment I put it up live, it was working fine. However, the next day I come into work and find that one of the pages have stopped working (It only shows the background and footer), and an image in the welcome intro text on the index.html does not show (as if I didn't code it in at all). This only happens on IE though yet works perfectly fine on Chrome and FireFox. I'm not sure if this is due to IE having it's own personal cache and not updating it properly? Yet if I edit the welcome text to show a new message, it will show that. www.abbeymill.com is the URL and the Function Bookings page is the one which does not show properly. Please view both index.html and the function bookings page in Chrome and IE. I would really love a saviour to help me figure this mind boggling issue out W3C says it all validates fine aswell. Working on it now. Thanks. Hello Everyone, I am new to web design and i designed a website which is good with all browsers except the new Internet explorer 7. Can anyone advise me on what do to so that it will be compatible with the explorer 7. What happened is " The menu of my web pages should be showing only when you click it but because it is not compatible with the new explorer, it open up and display all hidden menu. Can you help pls. I've created a blog on tumblr and attached it to a domain I purchased. The problem is it looks absolutely great in Safari (Windows) but not as great in IE or Firefox (Windows). Here is the site in safari, the screenshots mac but its the same on windows. and here is the IE version. The font (Century Gothic) looks terrible compared to the safari version. Tumblr has the feature to edit html but I am not that great with html and have basic knowledge. If anyone wants to see the html I will show them it. If anyone could help me alter the html to make the website look as smooth in IE and Firefox as it does in Safari I would be majorly grateful. Thanks, Danny Hi all, I created a HTML page with CSS. While i ran the code in IE 8.0, the alignment was in order. But when i ran the same HTML code in other lower versions of IE, i am facing some alignment problem like submenu arrangement, displacement in the page contents. Please anybody suggest me with a solution. What is that i should do to rectify it.. Thanks and Regards.. |