Hi guys, seems like the only problem I have is with IE7. Is it because I'm using top and left declarations? The site is www.UncoverEngland.com and the code is below: #uchome2 { left: 24px; margin: 0; padding: 0; position: relative; top: 40px; } #sform { left: 280px; padding-top: 0; position: relative; top: 42px; width: 396px; } .search-bar-item { float: right; font-size: 80%; margin: 0; padding: 0; width: 100px; } #search-text-input-id { background: none repeat scroll 0 0 #FFFFFF; border-color: #7B7B7B #CBCCCE #CBCCCE #7B7B7B; border-left: 1px solid #7B7B7B; border-style: solid; border-width: 1px; color: #000000; margin: 0; top: 1px; width: 180px; } #submit-button-id { background: none repeat scroll 0 0 #F04B3B; border: 1px outset #7B7B7B; color: #FFFFFF; margin: 0; }
Well, you have a lot of pointless redundancies in your CSS that can't be helping, and I do think that the use of top and left to do margin's job certainly isn't helping... but in general the code for that site is just plain overthought for something so simple -- given it's the typical fixed width with fixed metric fonts accessibility train wreck, which should have made it's construction far, far simpler than you have. You've got a slew of extra positioning and DIV, much less tables and lists around non-table and non-list elements that just result in the whole thing being needlessly compex and fragile... much less inaccessible. Right down to the first line of code proudly proclaiming the coding techniques used in building the page are in 'transition' from 1997 to 1998. Clearing breaks, willy-nilly formatting, static CSS inlined in the markup, browser specific scripting nonsense, browser sniffing for nothing, scripts on a site that by all accounts doesn't actually need/use them for anything (at least not that I can see)... It's got problems. Even your meta tags are problematic -- it's called keyWORDS, not keyphrases, not keysentences, keyWORDS -- saying the same word over and over again misses the entire point, seven to eight WORDS that exist inside <BODY> you want to rank for. Silly little things, like the class on a H1 when you should only ever have one H1... div around form+fieldset when both are already perfectly good block-level containers... broken image replacement method that fails when images are off... classes and name on a FORM (without a method), ID on a fieldset when you already have a perfectly good ID around the form, label outside of a form... and seriously, again, stop dicking around with javascript and just list the SELECT/OPTIONS. So... first order of business is to clean the shmutz out of the markup. I always write the markup before I even THINK about applying layout to it, that way I'm sure I'm staying more semantic and have something that works better when CSS isn't present. <!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" xml:lang="en" ><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="en" /> <meta name="viewport" content="width=device-width; initial-scale=1.0" /> <meta name="description" content="Search directory London businesses and services in England." /> <meta name="keywords" content="london,search,directory,business,arts,activities,news,shopping" /> <meta name="google-site-verification" content="masy1-99-3FuZZNLsSynUm3mr-Fx1ZqTrDQVRGP9dr8" /> <meta name="y_key" content="e051b594a6de97d9" /> <link type="text/css" rel="stylesheet" href="screen.css" media="screen,projection,tv" /> <link rel="shortcut Icon" href="/favicon.ico" /> <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="/feed/whats_new.php" /> <title> London Search Directory - Uncover England </title> </head><body> <div id="pageWrapper"> <h1> Uncover England <span><!-- image replacement --></span> </h1> <form id="topSearch" action="/index.php" method="get"> <fieldset> <input name="q" id="search-text-input-id" type="text"> <input type="submit" class="submit" value="Search" /> <select name="u"> <option value="http://www.uncoverengland.com">in London</option> <option value="http://manchester.uncoverengland.com">in Manchester</option> </select> <input name="fr" value="london" type="hidden"> </fieldset> </form> <ul id="topLinks"> <li><a href="/london-n0.html">What's New</a></li> <li><a href="/help.php">Help</a></li> </ul> <hr /> <div id="content"> <ul class="breadCrumbs"> <li>LONDON DIRECTORY, ENGLAND</li> </ul> <div class="directorySection"> <div class="londonActivities"> <h2> <a href="london-activities-c1228657171.html"> <span><!-- sprite sandbag --></span> London Activities </a> </h2> <ul> <li><a href="london-fitness-c30027421.html">Fitness</a></li> <li><a href="london-outdoors-c350502038.html">Outdoors</a></li> <li><a href="london-sports-c1384441240.html">Sports</a></li> <li class="last"><a href="london-tourist-attractions-c799973256.html">Tourist Attractions</a></li> </ul> <!-- .londonActivities --></div> <div class="arts"> <h2> <a href="london-arts-c1173716801.html"> <span><!-- sprite sandbag --></span> Arts </a> </h2> <ul> <li><a href="london-design-c1303367889.html">Design</a></li> <li><a href="london-exhibits-c342739560.html">Exhibits</a></li> <li><a href="london-performance-c536081530.html">Performance</a></li> <li class="last"><a href="london-visual-arts-c2044744561.html">Visual Arts</a></li> </ul> <!-- .arts --></div> <div class="business"> <h2> <a href="london-business-c1523950809.html"> <span><!-- sprite sandbag --></span> Business </a> </h2> <ul> <li><a href="london-accounts-c480421950.html">Accounts</a></li> <li><a href="london-advertising-c442334372.html">Advertising</a></li> <li><a href="london-advice-c115431813.html">Advice</a></li> <li><a href="london-finance-c1158120048.html">Finance</a></li> <li class="last"><a href="london-printing-c439261813.html">Printing</a></li> </ul> <!-- .business --></div> <div class="educationAndGovernment"> <h2> <a href="london-education-and-government-c33163718.html"> <span><!-- sprite sandbag --></span> Education and Government </a> </h2> <ul> <li><a href="london-central-government-c1123071478.html">Central Government</a></li> <li><a href="london-childcare-c2038843420.html">Childcare</a></li> <li><a href="london-schooling-c73595721.html">Schooling</a></li> </ul> <!-- .educationAndGovernment --></div> <div class="foodAndDrink"> <h2> <a href="london-food-and-drink-c471626451.html"> <span><!-- sprite sandbag --></span> Food and Drink </a> </h2> <ul> <li><a href="london-nightlife-c509091759.html">Nightlife</a></li> <li><a href="london-restaurants-c156971032.html">Restaurants</a></li> <li><a href="london-services-c1215482289.html">Services</a></li> <li class="last"><a href="london-specialist-stores-c1996035365.html">Specialist Stores</a></li> </ul> <!-- .foodAndDrink --></div> <div class="musicAndFilm"> <h2> <a href="london-music-and-film-c1746242286.html"> <span><!-- sprite sandbag --></span> Music and Film </a> </h2> <ul> <li><a href="london-film-c936557517.html">Film</a></li> <li><a href="london-instruments-c1564863456.html">Instruments</a></li> <li><a href="london-musicians-c94810318.html">Musicians</a></li> <li class="last"><a href="london-services-c557137015.html">Services</a></li> </ul> <!-- .musicAndFilm --></div> <!-- .directorySection --></div> <div class="directorySection secondDirectorySection"> <div class="newsAndMedia"> <h2> <a href="london-news-and-media-c2114644715.html"> <span><!-- sprite sandbag --></span> News and Media </a> </h2> <ul> <li><a href="london-books-c1838670039.html">Books</a></li> <li><a href="london-broadcasting-c1500491134.html">Broadcasting</a></li> <li><a href="london-internet-c1886570874.html">Internet</a></li> <li class="last"><a href="london-newspapers-c749769443.html">Newspapers</a></li> </ul> <!-- .newsAndMedia --></div> <div class="personalCare"> <h2> <a href="london-personal-care-c541316625.html"> <span><!-- sprite sandbag --></span> Personal Care </a> </h2> <ul> <li><a href="london-beauty-c1668759921.html">Beauty</a></li> <li><a href="london-hair-c1270094218.html">Hair</a></li> <li class="last"><a href="london-health-c1466235763.html">Health</a></li> </ul> <!-- .personalCare --></div> <div class="petsAndAnimals"> <h2> <a href="london-pets-and-animals-c1244576977.html"> <span><!-- sprite sandbag --></span> Pets and Animals </a> </h2> <ul> <li><a href="london-housing-c1043932876.html">Housing</a></li> <li><a href="london-specialist-support-c1364636492.html">Specialist Support</a></li> <li class="last"><a href="london-suppliers-c1638280149.html">Suppliers</a></li> </ul> <!-- .petsAndAnimals --></div> <div class="realEstate"> <h2> <a href="london-real-estate-and-accomodation-c1590021871.html"> <span><!-- sprite sandbag --></span> Real Estate and Accomodation </a> </h2> <ul> <li><a href="london-hotels-c482460580.html">Hotels</a></li> <li><a href="london-household-c113271250.html">Household</a></li> <li class="last"><a href="london-property-c1506234568.html">London Property</a></li> </ul> <!-- .realEstate --></div> <div class="shopping"> <h2> <a href="london-shopping-c1153919436.html"> <span><!-- sprite sandbag --></span> Shopping </a> </h2> <ul> <li><a href="london-centres-c1967633455.html">Centres</a></li> <li><a href="london-clothing-c664248786.html">Clothing</a></li> <li><a href="london-electronics-c1209564852.html">Electronics</a></li> <li><a href="london-gifts-c2136597537.html">Gifts</a></li> <li class="last"><a href="london-jewellery-c1098910834.html">Jewellery</a></li> </ul> <!-- .shopping --></div> <div class="travelAndTransport"> <h2> <a href="london-travel-and-transport-c760602452.html"> <span><!-- sprite sandbag --></span> Travel and Transport </a> </h2> <ul> <li><a href="london-air-c1180883915.html">Air</a></li> <li><a href="london-automotive-c2103765774.html">Automotive</a></li> <li><a href="london-land-c1592960685.html">Land</a></li> <li><a href="london-sea-c1425394087.html">Sea</a></li> <li><a href="london-services-c1207259630.html">Services</a></li> </ul> <!-- .travelAndTransport --></div> <!-- .directorySection.secondDirectorySection --></div> <!-- #content --></div> <hr /> <div id="footer"> <a href="/feed/whats_new.php" class="feed"> <img src="http://images.uncoverengland.com/icons/rss.gif" alt="RSS Feed for Uncover England" /> </a> <ul> <li><a href="/advertise.php" rel="noFollow">Advertise</a></li> <li><a href="/about.php">About Uncover England</a></li> <li><a href="/terms_conditions.php">Terms and Conditions</a></li> <li class="last"><a href="/site_map.php">Site Map</a></li> </ul> <!-- #footer --></div> <!-- #pageWrapper --></div> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-15493857-10']); _gaq.push(['_setDomainName', '.uncoverengland.com']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> </body></html> Code (markup): Admittedly, I axed a few elements because, to be frank, I couldn't figure out what the devil they were even in there for apart from a bunch of broken scripts on things that shouldn't have scripts... Even so it basically throws 2k of code in the trash despite the use of more whitespace to clarify the code and the extra comments to make it clear what DIV are being closed and what all those empty SPAN are for. Gimme a bit, and I'll toss together some CSS to go with that... and I'll probably open it up at the very least elastic (though semi-fluid would be better)... I'd also be VERY tempted to use CSS3 for the rounded corners and extra grey bar around it -- IE8/lower users wouldn't get those effects, OH WELL. Page would still work for them.
Here's what I came up with: http://www.cutcodedown.com/for_others/misohoni/template.html as with all my example code, the directory http://www.cutcodedown.com/for_others/misohoni is unlocked for easy access to the bits and pieces. I made it elastic and used CSS3 for the rounded corners and double border. This means IE8/lower doesn't get those -- to be frank, OH WELL. It's getting impractical to bend over backwards and waste bandwidth on massive images just to curtail to a rapidly dwindling segement of the community. I'm not saying don't support the older browsers, I try to at least make my pages functional all the way back to IE 5.5 (since on many mobile devices that's STILL the most recent they can run, hell they only got IE6 on WinCE three years ago!) -- but if they don't get a few fancy visual bits, I'm not gonna waste my time on it -- I suggest you take the same approach. I used negative margins to slide the search and the top menu up over the h1, with the background-image of that h1 being the little flag in the corner. I use gilder-levin image replacement to put the image over the h1 text, which might result in the text peeking out from underneath for the re-re's out there still using the broken nyetscape 4 'text only resize' that's no longer the default in any browser (though you can still enable it in FF) -- OH well. (that could be fixed if one really cared about the 0.001% of Firefox users doing that) The icons on the h2 use the incorrectly named 'CSS Sprites' so they're a single image file... I used dummy span for this so that when the entire page enlarges automatically for large font/120dpi users like myself, they don't get placed 'incorrectly' or have bits of the other images around them in the file show up. The CSS is pretty simple -- starting out with a reset so we have a easy baseline to code from. There are larger resets like Eric Meyer's "Reset Reloaded" -- but to be frank that's so fat and bloated it's more of a framework than a reset; in particular it sets a bunch of things that are NOT inconsistent cross-browser, meaning those parts aren't resetting a blasted thing. -- resets like that give them a bad name. There are smaller resets - like the so called "universal reset" of * {margin:0; padding:0;} -- but that can wreak havoc with trying to style form elements... at less than a quarter-k the one I use is a nice small middle ground between the two. You'll notice I changed a LOT of the names on elements to be more verbose -- needlessly cryptic names don't help ANYONE working on the page, and really if you just code clean in the first place you can save WAY more bytes than you do with vague/cryptic descriptions. Oh, and pay attention to my placement of closing comments -- should comments end up between floats or even inline-level elements it can trip rendering bugs in some versions of IE and FF -- like the so called 'double render' or 'dissapearing content' bugs -- placing them before the closing tag instead of after prevents those bugs from ever cropping up. (I tell you, when COMMENTS cause a rendering bug, you'll go nutters ripping out your hair trying to figure out what's causing it since comments are SUPPOSED to be ignored) Hope this helps, any questions fire away.