Hey i am running a website for school, and frankly i almost killed someone when i looked at the site at school. They use IE 6.0 and a range of resolutions. the site looks great on FF 2. If someone could help optimize my css built site i would love to donate to you. upmypaper.com -J (dont mean to double post)
Use a Strict Doctype First, use the W3C Validators .......... W3C Markup (HTML/XHTML) Validation Service W3C Style Sheet (CSS) Validation Service .......... to correct the CSS errors and the 59 Markup errors. James
Thanks i am working on that now. The only problem is i dont know what that will look like since i dont have IE 6. anyway i can check it out?
Use this .......... http://www.anybrowser.com/siteviewer.html ..........don't worry about slight difference nuances between Browsers -- you will never get the layout exactly the same -- besides, many visitors use their Browsers to alter your layout to suit their purposes these days such as: Selectively turn off image display Disable (CSS) Style sheets Enlarge or reduce text size (also via the keyboard) View only alternate text for images Resize the entire page layout Disable animation Turn off or modify coloration Substitute the user's own personal style sheet ..... and so on
Thanks for all the help. That site dosent really help but oh well. I have decided to use PHP to switch the style sheets using browser detection. To an IE friendly one. Good idea?
If you are going to all that trouble, check out these pages: http://www.spartanicus.utvinternet.ie/no-xhtml.htm http://jp29.org/test.php
I was able to fix most of the probelms in IE 6. The only problem is the footer and a "hills" image i created. I am using the "fixed" posistion command to float it to the bottom. Apparently IE hates it. I have no idea to fix it? I really would like the site IE friendly and maybe you could help me?
Well, let's go down the list of problems - <ul id="sidenav"> <center> NO other tags can go between a UL and it's corresponding LI - that's invalid HTML <base id="base_url" href="http://www.upmypaper.com/" /> Why are you giving THAT an ID - and why are you even including it if that's where it's served from? What's with the .js - there's nothing on that page which should warrant it apart from the bidvertiser and urchin sections... might also help if said script was valid XHTML. linebreaks between DIV's that have perfectly good ID's on them. You use the same ID TWICE (right) clearing div at the TOP of another div (?!?) Paragraph marks around non paragraph content (like a single image) DIV wrapping the content of a TD just to apply an ID, should just be applied to the TD H3 image that doesn't even have alt text much less real text... Strong around an image tag - what's that even supposed to accomplish? You are nesting WAY too deep on your content - there's no reason to be 15 tags 'deep' for your two 'VIDEO!' boxes. and you are closing the body and HTML, then running the urchin script to close the body and HTML again. AND I'm seeing H3's with no H2's to fill the gap. Wait... the second bidvert you've got a script INSIDE a noscript - what the? Personally, I'd also take an axe to most of the use of images instead of text here too - the 'we are under construction' and 'the awesome UMP Team' parts for example. The following is how I'd code the HTML for that site - if I have the time later I'll write up how I'd do the CSS, remaster the images to work with this layout, etc, etc... and give a section by section explanation of the choices made. <!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" lang="en"><head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" type="text/css" href="screen.css" media="screen, projection" /> <title>UpMyPaper.com - Document Hosting for the Modern Student</title> </head><body> <div id="clouds"></div> <div id="container"> <h1><a href="index.php"> upmypaper.com - Document Hosting for the Modern Student <span></span> </a></h1> <ul id="nav"> <li><a href="index.php" class="home">Home<span></span></a></li> <li><a href="account.php?action=register" class="registerz">Register<span></span></a></li> <li><a href="login.php" class="loginLAWL">Login<span></span></a></li> <li><a href="help.php" class="help">Help Desk<span></span></a></li> <li><a href="tools.php" class="sourcesucks">Resources<span></span></a></li> <li><a href="browse.php" class="members">Members<span></span></a></li> <li><a href="contact.php" class="contact">Contact<span></span></a></li> </ul> <div id="content"> <img src="images/layout/box2.png" alt="All Videos are OFFLINE until next week." /> <div class="video_box"> <img src="images/layout/coach.png" width="102" height="83" alt="" class="thumbnail" /> <h2><a href="#"> Introduction to UMP</a></h2> <p> What is this site all about? Thats what this video is centered around. Find out what the purpose of this site is, and if this site is right for you. </p> <a href="#" class="view">VIEW<span></span></a> </div> <div class="bidvert"> <script type="text/javascript" src="http://bdv.bidvertiser.com/BidVertiser.dbm?pid=66963&bid=155954" ></script> <noscript> <p><a href="http://www.bidvertiser.com">make money</a></p> </noscript> </div> <div class="article"> <h2 class="warn">We Are Under Construction</h2> <p> In case you haven't noticed yet, UMP is having a few minor glitches. We know exactly what is going on, the problem is being caused by conflicting code in our design. The site will still work, it just wont look as spicy as it is supposed to. On a lighter note, Brenden is starting on new features to the site, including Teacher accounts. Jake will be changing the overall width of the website from 760px to 960px. wow, i know. This will open up some more space for a few changes and features we will be adding this month. Thank you for sticking with us. </p> <p class="sig">- The Awesome UMP Team</p> </div> <div class="video_box"> <img src="images/layout/coach2.png" width="102" height="83" alt="" class="thumbnail" /> <h2><a href="#">Uploading a File</a></h2> <p> Have something you want to keep safe on this site? This video will show you how to take a file from your computer and save guard it on UMP. </p> <a href="#" class="view">VIEW<span></span></a> </div> <div class="bidvert"> <script type="text/javascript" src="http://bdv.bidvertiser.com/BidVertiser.dbm?pid=66963&bid=155954" ></script> <noscript> <p><a href="http://www.bidvertiser.com">make money</a></p> </noscript> </div> </div> <div id="sidebar"> Welcome <span style="color:#e52929">Guest</span>!<br /> Click <a href="account.php?action=register">here</a> to register! <ul id="sidenav"> <li><a href="index.php" class="current">Home</a></li> <li><a href="account.php?action=register">Register</a></li> <li><a href="login.php">Login</a></li> <li><a href="help.php">Help</a></li> <li><a href="tools.php">Resources</a></li> <li><a href="browse.php">Members</a></li> <li><a href="contact.php">Contact</a></li> </ul> <a href="contact.php"> <img src="images/layout/needhelp.png" width="180" height="240" alt="need help?" /> </a> </div> </div> <div id="bottom_stripe"></div> <div id="hills"></div> <script type="text/javascript" src="http://www.google-analytics.com/urchin.js" ></script> <script type="text/javascript"> _uacct = "UA-509507-5"; urchinTracker(); </script> </body></html> Code (markup): Which shaves about 3k, or over a third of the unneccessary code off of that. Now to see if we can cut down the total size to something LESS than half a meg...