HTML - Making Page Compatible With Older Ie Browsers.
Hi i was wondering if anyone can help me with making my page compatible with older browsers IE7+. My page is www.marksbodyshop.org
The css is: Code: html,body { height:100%; margin:0; background-color:#000; background-image:url(../images/firstpage.gif), url(../images/firstpage-backup-for-safari.gif); /* required by Safari */ background-size:100% 100%; } #container { height:73%; background-image:url(../images/update.png); background-size:100% 100%; } #nav { position:absolute; padding:0; margin:0; list-style-type:none; height:7%; width:57%; top:20%; left:20%; z-index:1; } #nav li { width:16%; margin:1%; height:100%; } #nav a { display:block; width:100%; height:100%; outline:none; text-indent:-9999px; background-size:100% 300%; } #about {background-image:url(../images/aboutus.png);} #about1 {background-image:url(../images/contactus.png);} #about2 {background-image:url(../images/freelunch.png);} #about3 {background-image:url(../images/map.png);} #about4 {background-image:url(../images/meettheteambutton.png);} #nav a:hover {background-position:0 -100%;} #nav a:active {background-position:0 -200%;} Similar TutorialsHi, I have a website working perfectly in newer version of browsers. However, older version are not working properly. This is my website mis510proj . Any help? HTML Code: <!-- Page (2 columns) --> <div id="page" class="box"> <div id="page-in" class="box"> <!-- Content --> <div id="content"> <div class="article"> <h2><span><a href="#">Improvements for mis510proj :: Dataholics</a></span></h2> <p class="info noprint"> <span class="date">2011-05-01 @ 22:46</span><span class="noscreen"></span> </p> <p> <b>mis510proj</b> :: Our Golf Course DB is need to be update :) We have recieved feedbacks from many golfers that they considered the quality of the grass and the house's beverage! and menu. We are working on to get those info in order to meet golfer's expectation.<br> </br> Our project for mis510proj will be continued so, keep you eye on our website <a href="http://128.196.27.167:8080">mis510proj</a> </p> </div> <div class="article"> <h2><span><a href="#">Check your golf course</a></span></h2> <p class="info noprint"> <span class="date">2011-04-27 @ 19:00</span><span class="noscreen"></span> <!-- <span class="cat"><a href="#">Category</a></span><span class="noscreen">,</span> <span class="user"><a href="#">My name</a></span><span class="noscreen">,</span> <span class="comments"><a href="#">Comments</a></span> --> </p> <p> <b>mis510proj</b> :: Now our golf recommendation engine is here! Just for your dreamed golf courses! mis510proj :: You can simply click either "basic recommendation" or "advanced recommendation". You will find the golf courses!<br></br> Our project for mis510proj will be continued so, keep you eye on our website <a href="http://128.196.27.167:8080">mis510proj</a> </p> </div> <div class="article"> <h2><span><a href="#">MIS510PROJ :: Golf Course Recommendation</a></span></h2> <p class="info noprint"> <span class="date">2011-04-22 @ 11:40</span><span class="noscreen">,</span> </p> <img src="./img/mis510proj.png" alt="MIS510PROJ" /> <a href="http://128.196.27.167:8080/">MIS510PROJ</a> <p> <strong>MIS510PROJ :: The DATAHOLICS We are here to help you live your dream of playing golf! As part of a course, Web Computing and Mining, we have designed a MIS510PROJ portal that provides golf course recommendations to interested golf players. The MIS510PROJ portal also has a strong business model to it through its linkage to the ebay website that permits buying of Golf equipment. The idea behind MIS510PROJ is novel since it is unique and contains a lot of unique features that many websites do not. So please have a look at the MIS510PROJ portal and tell us what you feel!!</strong> </p> </div> <!-- Article --> <div class="article"> <h2><span><a href="#">MIS510PROJ :: DATAHOLICS</a></span></h2> <p class="info noprint"> <span class="date">2011-04-21 @ 11:49</span><span class="noscreen">,</span> </p> <p> <strong>We want to hear from you!</strong><br/> <strong>Do you have any suggestions to make? Write back to us!</strong><br/> </p> <!-- begin htmlcommentbox.com --> <div id="HCB_comment_box"><a href="http://www.htmlcommentbox.com">HTML Comment Box</a> is loading comments...</div> <link rel="stylesheet" type="text/css" href="http://www.htmlcommentbox.com/static/skins/simple/skin.css" /> <script type="text/javascript" language="javascript" id="hcb"> /*<!--*/ if(!window.hcb_user){hcb_user={};} (function(){s=document.createElement("script");s.setAttribute("type","text/javascript");s.setAttribute("src", "http://www.htmlcommentbox.com/jread?page="+escape((window.hcb_user && hcb_user.PAGE)||(""+window.location)).replace("+","%2B")+"&mod=%241%24wq1rdBcg%24CLBUSgJb.7rZSJVxzsM8Z1"+"&opts=414&num=10");if (typeof s!="undefined") document.getElementsByTagName("head")[0].appendChild(s);})(); /*-->*/ </script> <!-- end htmlcommentbox.com --> </div> <div class="article"> <h2><span><a href="#">MIS510PROJ :: Golf Course Recommendation</a></span></h2> <p class="info noprint"> <span class="date">2011-04-22 @ 11:40</span><span class="noscreen">,</span> </p> <p> MIS510PROJ :: DATAHOLIC , Golf Course Recommendation. What is your preferences when it comed to choose golf course? </p> </div> <div class="article"> <h2><span><a href="#">MIS510PROJ :: DATAHOLIC</a></span></h2> <p class="info noprint"> <span class="date">2011-04-19 @ 02:00</span><span class="noscreen">,</span> </p> <p> MIS510PROJ :: DATAHOLIC , we will tell the best golf courses for you by dedicated golfcourse recommending algorithm. This website is part of MIS510PROJ. </p> </div> <div class="article"> <h2><span><a href="#">Plan your Game Today!</a></span></h2> <p class="info noprint"> <span class="date">2011-04-05 @ 11:00</span><span class="noscreen">,</span> </p> <p> Golf is one of the most stress relieving and enjoyable sports played in the world! Come and choose a course closer to you! We are here to help you out! </p> </div> <!-- my addition for Amazon --> <div class= "article"> <h2><span><a href= "equipment.jsp"> Buy Golf Equipment here!</a></span></h2> <p class= "info noprint"> <span class="date">2011-04-05 @ 11:00</span><span class="noscreen">,</span> </p> </div> </div> <!-- /content --> Thanks, DH Hey all, I've been trying to fix up my carpet cleaning website. The bee.png image in the top left of my menu bar is giving me problems with older browsers & most hand-held devices, e.g., iTouch, cellphones, etc. Is there any kind of trick (hack) I could use so that it will properly align with all devices? Website: www.honeydocarpetcare.com Also, please let me know if you are noticing things that are out of place. If so, please tell me what browser and version you are using! Thanks all! hi please check my site www.yourdesign.org and please could somebody tell me how i can stop it going all weird in IE, it looks fine in firefox cheers guys n gals Hi there. So I don't need it for 800x600, only the sizes over 1024x768. Basically I made this template which I need to be able to be re-sized when in your browser. I thought I did this right, however I forgot about other resolutions other than 1024x768. When in higher res, the tables break a little and from what I can make out just get a little larger. What I can't work out is how to make them all work properly most large resolutions? Link to the template is he http://www.ruthlessintent.com/penguins/ Hello. First time here asking for help. Hope there's a solution! The site in question is http://www.jason-bradbury.com/Design.html. It's my first attempt at web design and I'm stumped. The goal is to present my art portfolio in a horizontal scrolling layout with a fixed header and footer. Ideally it would look identical across the many browser platforms. On a Windows laptop, my page looks and functions as it should in the latest browser versions of Safari, Google Chrome and Firefox as long as there aren't a stack of toolbars enabled. If toolbars are present (mostly in Firefox), the footer gets truncated and the page will not vertical scroll to allow it to be seen. So my first problem is getting the vertical scrolling (for the entire page including header and footer) to appear only when necessary in that situation. On my Mac Pro (I have not been able to test a Macbook yet) the page appears normal across the board with Safari and Firefox (have not tested Chrome or IE) The second problem is that in all versions of IE (and older versions of Firefox prior to 4.0) the page is displayed incorrectly. In IE, the header is missing, the left margin is way off and a vertical scrollbar is present for the body (again, if the vertical scrolling was for the entire page it wouldn't be so bad). As for the horizontal scrolling, it is very sluggish in IE. Firefox only has the vertical scrollbar in the body problem and since the header is shown in that browser, the body overlaps it when scrolled up. The page was originally designed in iWeb and then I had to tweak the code in Dreamweaver to get the fixed header and footer. Hope someone can help me out here! Cheers, Jason. Hello, could somebody help me please?My archive does not show my older posts,I have got WP 2.7.Thanks. Vist My New Celebrity Site I'm programming my first website for a friend who makes comics and in order to make the border around his comics fit I had to mess with the margins. The website looks great on Mozilla and Chrome, and perfect on Safari, but on IE and Opera the border ends up very skinny and goes through the comic, it also makes the page look enormous. Does anyone know how to remedy this? I think it has to do with the border being around the paragraph rather than the image, but I'm not sure. Any help is greatly appreciated. Ok, its a pretty simple explanation. Basicaly, i want to know how to have two different webpages up at the samer time, but in the same broswer. Is there some kind of code that will contain the page to the box, so i can have two or three boxes on one page, each with a different site. If you dont understand then i will go into more detail. I play a game called runescape (www.runescape.com), but i want to watch online movies (www.filmhill.com) while i train on the game. Normaly i have to screens up, and it gets really confusing. Is there a way where i can make a custom page, where i can have both the movie and the game on the same screen? Thanks, Nathan Just wondering if someone out there is able to quickly spot the horrible quirk in the HTML on this page: www.vergola.co.nz/contact.htm It renders fine in Firefox and Safari, (ie the page content is at the top of the window) but in IE the content appears way down the page with a large white space above it. ( I hate IE so much) The page has been edited by numerous people of varying degrees of knowledge so the whole page is a bit of a mess... Thanks so much! Hello there, My index page validates completely since I tidied it up using html tidy, but when i run it through browsershots it is still completely broken in firefox, opera, etc. basically anything other than MSIE it displays incorrectly. If anyone could shed any potential light on the situation it would be greatly appreciated. As you can no doubt tell, I'm no expert on creating web pages using html and css and if a page validates but still doesn't work I can't even begin to try and work out what is going on I did run my css through a validator and it came up with 30 or so instances of the same error, I hadn't ended a dimension value with px, i had just left the number, could this be the culprit? I have since corrected my style sheet so that it validates completely but I cannot upload from my FTP on the PC i'm currently using to see if it affects the browsershots results. I just wanted to put it out there and see what the ideas were of people who know a lot more about website building than I do. Bottom line: if i have an html page and a css page that validate 100% using the w3c standard is it guaranteed to work in all browsers, or are there quirky little things I need to be aware of when wanting my site to display correctly in less popular browsers such as safari etc.? Any feedback is greatly appreciated. :-) Sincere thanks in advance, Alex Browser screenshots - http://browsershots.org/http://www.alexhaines.co.uk/ HTML Validity results - http://validator.w3.org/check?uri=http%3A%2F%2Fwww.alexhaines.co.uk%2Findex.html&charset=%28detect+automatically%29&doctype= Inline&group=0 CSS Validity results - http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.alexhaines.co.uk%2Fstyle.css&profile=css21&usermedium=all&warning=1&l ang=en My site - http://www.alexhaines.co.uk site works great in Safari, looks fine in Firefox, but the header and footer don't show in Internet Explorer! Any suggestions? Here is the website: www.czechcpa.com How can I set up a page that automaticaly redirects my visitors to a new page? I want to make a page on my website where someone can enter there email address and it will auto add it to my mailing list. And another place on the website where they can enter there email so unsubscribe to it. I do not have anything to start me of with this. E.g Database. Thanks your help refer to new post Hi my html and css that i have coded is only valid in opera and does not run as it is meant to in firefox and safari. Can anyone help me fix it. The text input box is what is broken. here is the html: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <meta name="author" content="Husain Abdullah Al - Zabir" /> <title>WebSnips</title> <link rel="stylesheet" type="text/css" href="styles/main.css" media="all" /> <link rel="stylesheet" type="text/css" href="styles/rounded_corner.css" media="all" /> <link rel="stylesheet" type="text/css" href="styles/bottom_menu.css" media="all" /> </head> <body> <center> <div class="box"> <b class="tc"> <b class="L1"></b> <b class="L2"></b> <b class="L3"></b> </b> <div class="content"> <div class="box" style="width:100%;"> <b class="tc"> <b class="L1"></b> <b class="L2" style="background-color:#333333;"></b> <b class="L3" style="background-color:#333333;"></b> </b> <div class="content" style="background-color:#333333;"> <div style="width:630px; padding-top:10px;"> <div style="float:left; background-image:url(images/http.jpg); background-position:center; background-repeat:no-repeat; width:95px; height:40px;"> </div> <div style="float:left;"> <input style="height:28px; border:none; font-family:verdana; font-size:21px; color:#7d7d7d; padding-top:6px; padding-bottom:6px;" type="text" size="35" /> </div> <div style="float:left;"> <input type="image" value="submit" src="images/submit-button.jpg" /> </div> </div> <div style="clear:both; height:30px;"> </div> </div> <b class="bc"> <b class="L3"></b> <b class="L2"></b> <b class="L1"></b> </b> </div> </center> </body> </html> here is the css: Code: #logo { width: 317px; height: 40px; /*background-image: url(../images/logo.gif);*/ background-image: url(../images/logo.jpg); background-position: center; background-repeat: no-repeat; } #logo-holder { padding: 20px; } #footer-logo { width: 609px; height: 40px; /*background-image: url(../images/footer-logo.gif);*/ background-image: url(../images/footer-logo.jpg); background-position: center; background-repeat: no-repeat; } #footer-logo-holder { padding: 5px; } #instruction { border-left:solid 4px #98CB00; padding-left:5px; font-family:verdana; font-size:17px; font-weight: normal; color:white; text-align:left; width:623px; } #instruction-holder { padding-top: 20px; padding-bottom: 20px; } .separator { width:10px; background-image: url(../images/separator.jpg); background-position: bottom; background-repeat: no-repeat; float: left; height:180px; } .urls { font-family: verdana; font-size: 12px; color: #7d7d7d; height:180px; font-weight: bold; line-height: 20px; width:203px; clear:both; padding-top: 20px; } .snips_name { font-family: verdana; font-size: 21px; color: #FFFFFF; text-align: left; } #top_snips { width:31px; height:38px; background-image: url(../images/top_snips.jpg); background-position: top; background-repeat: no-repeat; margin-right: 5px; float: left; } #latest_snips { width:38px; height:38px; background-image: url(../images/latest_snips.jpg); background-position: center; background-repeat: no-repeat; margin-right: 5px; float: left; } #partners { width:53px; height:38px; background-image: url(../images/partners.jpg); background-position: top; background-repeat: no-repeat; margin-right: 5px; float: left; } Can anyone help fix this? Thanks Hello, I am trying to write a piece of HTML for my web page. It is used to display a blog on a web page but in a frame, the only problem is that at the moment it only works in IE. Could someone help me make this universal or working in FF as well? HTML Code: <HTML> <HEAD> <TITLE>ZenBanners</TITLE> </HEAD> <FRAMESET> <FRAME src="http://ZenBanners.BlogSpot.com/"> </FRAMESET> </HTML> Can someone please tell me why this page does NOT print properly? http://www.unreal-deals.com/ebooks11...-printable.php I've tried everything I can possibly think of, removed all word html tags, cleaned up the source formatting, and still it doesn't work. Print preview on IE7 shows only 7 pages, and when I print it only prints 1 page then 60+ blank pages. Whats going on? Thanks My webpage: http://beamsvillepharmacy.com/site/index.html Fits my browser perfectly, however when viewed on other computers with a lower resoultion, the page doesn't fit and is too large. How can I edit my code, or go about making it automatically fit with different resolutions? (Right now it's all simple width="" height="", and that's how I was fitting it) Thanks. Hi, I am working on adding non java-script buttons on my website using CSS style sheets. I used a technique given at http://builder.com.com/5100-6371-5323375-2.html. I modified the colors a little but it is basically using technique 2 at this link. Everything works well with the exception of one issue. In Internet Explorer, when I press a link and then use the back button on the browser to return to the previous page, the link for the previous page is still selected and the button appears to still be "pressed". You can see this by going to http://www.apexmoves.com with internet explorer, clicking one of the buttons on the left side of the site, and then using the browser's back button. You will see that the link that was clicked is still selected and this button appears to be stuck in the down position. If you click anywhere else on the screen, the button is released. This is because the link for the pressed button is has the status of active. Does anyone have any ideas on how to solve this. Is that a way to make the status of this link "visited"? Any Ideas would be greatly appreciated. Thanks Brad Hi. This is something I have pondered on for a very long time and wish to know how to resolve. I have no idea if it is possible but I think I have seen it done before. I need a piece of code for a frame that will automatically readjust itself to the page that is targeted in the frame, but will only go so far as the parameters I set it to. To me, it sounds like a rather complicated code and I'm really not sure whether it is possible, but if it is, it would be extremely useful for forum pages that are set to be inside a webpage. What I want to achieve with this, is to have the frame to be able to extend itself inside the page, without putting a scrollbar on the actual frame. The page I have isn't actually structured with frames, so I would like to keep it that way. I have no idea if this IS possible but I would like to know. Thanks, KGB. |