Hi guys, I'm having a few issues with this, and it's starting to bug me. I'm only experimenting with the design right now, but have come across something that has ground me to a halt. Underneath the main header image, and undernear the images on the column section heads (login, search, etc), there is a small 5px or so margin underneath the image. If you view it in firefox, this margin is not apparent. I have tried allsorts with the css, but can't seem to figure out how to get rid of this margin. The website is http://www.insectstore.com/bakere/ Any help much appreciate
I'm not sure how far back you are willing to go to fix the problem, but in the past few months I've been using a couple of stylesheets for every project I do. The first one is a reset sheet. You can find a great one here: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ Using that with your stylesheet ( @import url(reset.css); ) should take care of it.
I'm not hugely hung up about it, if it means redoin all the css, I really can't be bothered But if anyone can find a simple answer, that will be cool. Thanks for your input fireflyproject.
It will not look consistent unless you reset all margins and padding on elements (forms controls are debatable).
Well, let's document your 'problems' since it seems to be broken in Opera as well. hardcoded full links on EVERYTHING instead of relational links. Waste of bandwidth. Inlined CSS for something that would be a LOT simpler behind a * html hack (and a hell of a lot less code too!) Inlined presentation on the body - you've got a stylesheet, use it. classitus abounds, multiple nested tables for no reaosn on a two column layout, that stupid clearfix nonsense, Woah, MAJOR classitus on the menu, that stupid target element (ah, tranny doctype so you can actually use that shit), closing the LI and UL too many times, tons of inlined presentation, and I'd suggest axing the 'geek appeal' links to WCAG while at it. You're way off on both accessability and validation anyways... likewise I'd axe the 'welcome' text - that's just silly, especially since it kind of talks down to the user (because of course that big green sidebar header saying 'login' with the big text entry fields needs explaining!) My advice, chuck it and start over with semantic markup. Write the HTML first marking what things ARE, THEN hang the CSS on that... though, whatever 'website baker' is, my advice is pitch that in the trash too since it seems to be the same type of crap hardcoded rubbish as Boomla and Turdpress. Which probably (less one or two extra containers that might be needed to hang presentational elements like borders on) should be something like this - literally this is about all the HTML that should be needed for that layout. <!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" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <link rel="stylesheet" type="text/css" href="/bakere/templates/allcss2/screen.css" media="screen,projection" /> <link rel="stylesheet" type="text/css" href="/bakere/templates/allcss2/print.css" media="print" /> <title>Template</title> </head><body> <div id="container"> <h1> Insect Pages <strong>Online Invertebrate Database</strong> <span></span> </h1> <ul id="mainMenu"> <li class="current"><a href="/bakere/pages/welcome.php">Welcome</a></li> <li> <a href="/bakere/pages/insects.php">Insects</a> <ul> <li><a href="/bakere/pages/insects/mantids.php">Mantids</a></li> <li><a href="/bakere/pages/insects/phasmids.php">Phasmids</a></li> <li><a href="/bakere/pages/insects/guidelines.php">Guidelines</a></li> </ul> </li> <li><a href="/bakere/pages/welcome.php">Guides</a></li> <li><a href="/bakere/pages/contact.php">Contact</a></li> <li><a href="/bakere/pages/cart.php">Cart</a></li> <li> <a href="/bakere/pages/galleries.php">Galleries</a> <ul> <li><a href="/bakere/pages/galleries/aphids.php">Aphids</a></li> <li> <a href="/bakere/pages/galleries/mantids.php">Mantids</a> <ul> <li><a href="/bakere/pages/galleries/mantids/spiny-flower-mantis.php">Spiny Flower Mantis</a></li> <li><a href="/bakere/pages/galleries/mantids/idolomantis-diabolica.php">Idolomantis Diabolica</a></li> </ul> </li> </ul> </li> </ul> <ul id="crumbBar"> <li class="Here">You are here:</li> <li><a href="/bakere/pages/welcome.php">Welcome</a></li> </ul> <div id="contentWrapper"><div id="content"> <h2>Welcome</h2> <p>Intro Text</p> <!-- #content, #contentwrapper --></div></div> <div id="sideBar"> <form action="/bakere/account/login.php" method="post" id="login"> <div class="sideBox"> <h2>Login</h2> <label for="username">Username:</label> <input type="text" id="username" class="text" /> <label for="password">Password:</label> <input type="password" name="password" id="password" class="text" /> <input type="submit" class="submit" value="Login"/> <br /> <a href="/bakere/account/forgot.php">Forgot Details?</a>,<br /> <a href="/bakere/account/signup.php">Sign-up</a> </div> </form> <form action="/bakere/search/index.php" method="get" name="search" id="search"> <div class="sideBox"> <h2>Search</h2> <input type="text" id="string" /> <input type="submit" class="submit" value="Search"/> <p>Search the website</p> </div> </form> <div class="sideBox"> <h2>Test</h2> <ul> <li>Test</li> <li>test 1</li> </ul> </div> <!-- #sideBar --></div> <div id="footer"> Powered by and designed by text here... </div> <!-- #container --></div> </body></html> Code (markup): MAYBE an extra 200-500 bytes more than that, but realistically that should be ALL the HTML you need for that layout. You've got 12k of HTML output for a job that should take less than a third that... Likewise on the CSS you've got 9k doing what should probably be only 4-5k, maybe less. (maybe a bit more since that is a three level menu)