Hi all, I have a problem with css. Have a look here please, my query is about the section below the menu. Howcome it appears fine in IE and bad in firefox? Thanks beforehand for your help guys.
to make it easier the css is this: #topwrapper{ width:970px; height:270px; margin: 0 auto; background-color:#b1b1b1; margin-bottom:5px; } #featuredcontainer{ width:644px; height:260px; float:left; background-color:#000000; margin-left:5px; margin-top:5px; } #featuredimage{ width:634px; height:250px; margin-top:5px; margin-left:5px; } #mpucontainer{ width:310px; height:260px; display:inline; float:right; background-color:#FF0000; margin-left:6px; margin-right:5px; margin-top:5px; } #mpuad{ width:300px; height:250px; margin-top:5px; margin-left:5px; }
I think much of your problem comes from outdated coding techniques... You've got easily twice the markup needed for that layout... Wrappers EVERWHERE even on elements that don't even need wrappers. Same problems I see a lot - lists not marked up as lists, headings not marked up as headings, table headings marked up as headings or using bold tags instead of table headings, use of strong on a presentational affectation, clearing DIV's/breaks, business as usual. Hang on, I have a few spare moments this evening, I'll take a stab at a rewrite to show you how I'd approach that layout (though being you might be saddled with the output from "PHPLink Directory" it might not be that helpful...)
Alright, here's how I'd have written the markup for that page: <!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=iso-8859-1" /> <meta name="keywords" content="Only MMO" /> <meta name="description" content="Only Massively Multiplayer Online Games" /> <meta name="author" content="Only MMO" /> <meta name="copyright" content="Copyright (c) 2008 by Only MMO. All rights reserved!" /> <meta name="generator" content="Paladin Systems Template www.cutcodedown.com" /> <title> Only MMO </title> <link type="text/css" rel="stylesheet" href="screen.css" media="screen, projection" /> </head><body> <div id="container"> <!-- empty span or bold tags below are for image replacement or sliding door techniques, do not remove --> <h1> PHPLink Directory <span>All the links you can get</span> <b></b> </h1> <form id="headerSearch" action="/index.php" method="get"> <fieldset> <label for="search"> Search: <input type="text" name="search" maxlength="250" value="" /> </label> <input class="searchSumbit" type="image" href="images/goButton.png" alt="Go" title="submit search" /> </fieldset> </form> <ul id="mainMenu"> <li> <a href="/submit.php" title="Submit your link to the directory" >Submit Link</a> </li><li> <a href="/submit_article.php" title="Submit your article to the directory" >Submit Article</a> </li><li> <a href="/index.php?list=latest" title="Browse latest submitted links" >Latest Links</a> </li><li> <a href="/index.php?list=latestarticles" title="Browse latest articles" >Latest Articles</a> </li><li> <a href="/index.php?list=top" title="Browse most popular links" >Top Hits</a> </li><li> <a href="/contact.php" title="Contact directory owner" >Contact</a> </li><li> <a href="/search.php?type=advanced" title="Go to advanced search page" accesskey="4" rel="nofollow" >Advanced Search</a> </li> <!-- #mainMenu--></ul> <div id="featuredAd"> <img src="http://www.onlymmo.com/image/featuretest.gif" alt="Featured Ad" /> </div> <div id="mpuAd"> <img src="http://www.onlymmo.com/image/mputest.gif" alt="MPU Ad" /> </div> <!-- Double wrapper on content is for negative margin columns. The double wrapper on boxContent is for "eight corners under one roof" single image borders. --> <div id="contentWrapper"><div id="content"> <div class="box"> <div class="boxTop"><b></b></div> <div class="boxContentWrapper"><div class="boxContent"> <h2>Main Content</h2> <ul class="gameCounts"> <li><a href="/ARG/">ARG</a> (0)</li> <li><a href="/Fantasy/">Fantasy</a> (1)</li> <li><a href="/First_Person_Shooter/">First Person Shooter</a>(0)</li> <li><a href="/Realtime_Strategy/">Realtime Strategy</a> (0)</li> <li><a href="/Role_Playing_-_MMORPG/">Role Playing - MMORPG</a> (0)</li> </ul> <!-- .boxContent, .boxContentWrapper --></div></div> <div class="boxBottom"><b></b></div> </div> <!-- #content, #contentWrapper --></div></div> <div id="firstSideBar"> <div class="box"> <h2>Categories<b></b></h2> <div class="boxContentWrapper"><div class="boxContent"> <ul class="boxPopCats"> <li><a href="/ARG/">ARG</a></li> <li><a href="/Fantasy/">Fantasy</a></li> <li><a href="/First_Person_Shooter/">First Person Shooter</a></li> <li><a href="/Realtime_Strategy/">Realtime Strategy</a></li> <li><a href="/Role_Playing_-_MMORPG/">Role Playing - MMORPG</a></li> </ul> <!-- .boxContent, .boxContentWrapper --></div></div> <div class="boxBottom"><b></b></div> <!-- .box --></div> <div class="box"> <h2>Statistics<b></b></h2> <div class="boxContentWrapper"><div class="boxContent"> <ul class="boxStats"> <li><b>Active Links:</b> 1</li> <li><b>Pending Links:</b> 0</li> <li><b>Todays Links:</b> 0</li> <li><b>Total Articles:</b> 0</li> <li><b>Total Categories:</b> 5</li> <li><b>Sub Categories:</b> 0</li> </ul> <!-- .boxContent, .boxContentWrapper --></div></div> <div class="boxBottom"><b></b></div> <!-- .box --></div> <!-- #firstSideBar --></div> <div id="secondSideBar"> <div class="box"> <h2>Articles<b></b></h2> <div class="boxContentWrapper"><div class="boxContent"> <!-- .boxContent, .boxContentWrapper --></div></div> <div class="boxBottom"><b></b></div> <!-- .box --></div> <!-- #secondSideBar --></div> <div id="footer"> <a href="http://www.phplinkdirectory.com">PHP Link Directory</a> <!-- #footer --></div> <!-- #container --></div> </body></html> Code (markup): It is very unlikely that markup will be changed for the CSS - It shaves almost 2k off the original despite the addition of comments and formatting. Strip out the comments and white-space and it shaves another whole k off. I have to jet out the door, but if I have time later tonight or tomorrow morning I'll belt out a demo CSS to go with that and toss it up on my server for you to see, with a line by line breakdown of what/why.
True, but they weren't fatal errors - unclosed break tag, unescaped ampersands - nothing that 'real world' would be an issue... Unless of course the validator gave up parsing after that, which does happen - turns getting valid HTML into a game of whack a mole, right?
I believe they were referring to OP... Though thanks for the bump, this completely slipped my mind. Hopefully if I have time late tonight I'll bang out the CSS to go with that markup.