|
HTML - Compatibility Question
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! Similar TutorialsHi folks, I'm developing a website for work and one of the features I want to implement is when the user hovers their mouse over an item in a drop down menu the proper trigger is fired. In FF and Opera it works beautifully though IE 7 is giving me serious grief. My HTML is as follows: <select name="Admin Dropdown" style="width:250px; position:relative; top:-66px; left:10px" /> <option value="Profile" id="ProfileOpt" onmouseover="profileDesc();" onClick="profileEdit();" onSelect="profileEdit();" />Edit Profile</option> <option value="Employees" id="EmployeesOpt" onmouseover="employeesDesc();" onClick="employeesEdit();" />Edit Employees</option> <option value="Menu" id="MenuOpt" onmouseover="menuDesc();" onClick="menuEdit();"/>Update Menu</option> </select> The functions modify a text box on the form as follows: document.adminForm.Instructions.value = "..."; I have a little init statement that executes the following on each of the elements in the menu: ... var element = document.getElementById( "ProfileOpt" ); element .onmouseover = descFunction(); ... It appeared to me that there were some incompatibility issues with some events and IE but maybe someone out in HTML-world can clear this up for me. Thanks! Hey everyone. I just stumbled upon another little problem: I think the picture talks for itself: http://i23.photobucket.com/albums/b3...enoctrober.jpg This is the way it comes up in Mozilla, doesn't do that in IE though. Help? Anybody know if the IE 8 compatibility mode does a high enough fidelity job replicating IE 7 behavior that we can effective use it as a substitute for testing web sites in IE 7 itself? 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? 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>
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 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'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, 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 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! 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 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 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) } 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. 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 i have resolved this thanks 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. |
|||||||