|
HTML - Ie 8 Compatibility Issue
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 Similar TutorialsI 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) } 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! 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.. Hi, I have had a new template developed for osCommerce, most browsers display the site correctly such as Firefox but Internet Explorer has some issues. IE shows the site as being aligned differently with some other design issues. I think it may be a problem with the stylesheet. My domain is InkRound.co.uk Here is the CSS code from stylesheet.css My site is using a HTML based template with osCommerce. Hi, I am in the process of building a website for a client. This is my first ever site so I knew I would have a few issues. I have fixed all but one at present. Here is a link to my site which I have put live on a test server. http://leaf.greenxtian.com/grangefarm/index.html The naviagation bar and Lightbox2 images are moving when rolled over. This only happens in Internet Explorer 8. It is fine in FireFox and other browsers. It is only on the Services/Facilities Pages so I think it may be an issue with the CSS for Lightbox2? Maybe how I have set it up or just a bug in the coding? Does anyone know why this is happening? If so, do you know of a fix? Any help would be greatly appreciated as I have spent hours trying to work this out. 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>
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? 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 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. 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 Working on it now. Thanks. 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 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! 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. 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 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 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. Please see this site http://www.brumbles.net/ If you see it in IE 7 you will see that the top picture is shifted to the left and cut off. If you see it in any lower version browser than 7 its perfect. If you see it in Firefox2 you will see same problem and if you have a version lower than 2 then its fine in that. Can anyone tell how to correct this so it appears good in IE7 and Firefox2 along with other versions. |
|||||||