Okay guys... I attempted a valid html/css design and I met problem after problem after problem. Here is my attempt so far. I have only uploaded two pages (home & windows) to show the variation of problems, Home has lots of text, windows has a small paragraph. As you can see, it's VERY messy. Here are the issuses I have broken down - if anybody can help? There's a space between the navigation bar and the header image of a few pixels that shouldn't be there. I can't make the right and left content div's remain the same height as each other. I can't stop the right footer image from hiding behind the enquiry box. Firefox Specific The background image for the allcontent div doesn't show The 'specialist' button doesn't appear (this has completely thrown me!) Can anybody help?
This is a table design. Why would you think this is a tableless design... Anyway this xhtml for this is not valid. I'll tidy this up a bit. You should be using 4.01 strict. Here is the source. This works in Firefox. Haven't tested in other browsers. This code is valid. Btw, one error with your code is that you were using tables. In your css you need to do this. Specify in #contenttext background-color: white; Code (markup): Ok after you have done that then you need to update your page site. Here is the valid html code. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head><title>title</title> <base href="http://www.pheel.co.uk/v2/"> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="pagehome"><!--header--> <div id="header"><img src="images/header.jpg" alt=""></div> <!--navigation--> <div id="navigation"><a id="home" href="index.html" title="Home" name="home"><span>Home</span></a> <a id="windows" href="windows.html" title="Windows" name="windows"><span>Windows</span></a> <a id="communal" href="communal.html" title="Comunal" name="communal"><span>Communal</span></a> <a id="office" href="office.html" title="Office" name="office"><span>Office</span></a> <a id="gardening" href="gardening.html" title="Maintenance & Gardening" name="gardening"><span>Maintenance & Gardening</span></a> <a id="specialist" href="specialist.html" title="Specialist" name="specialist"><span>Specialist</span></a> <a id="contact" href="contact.html" title="Contact us" name="contact"><span>Contact us</span></a></div> <!--images--> <div id="pictures"> <div id="img1"><span>Image 1</span></div> <div id="img2"><span>Image 2</span></div> <div id="img3"><span>Image 3</span></div> <div id="img4"><span>Image 4</span></div> </div> <!--content--> <div id="allcontent"> <div id="leftcontent"> <div id="contenttitle"> <h3>Cleaning, Window Cleaning & Gardening Services</h3> </div> <div id="contenttext"> <p>Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text.</p> <p>Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text.</p> <p>Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text.</p> <p>Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text.</p> <p>Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text.</p> <p>Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text.</p> <p>Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text.</p> <p>Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text.</p> </div> <div id="contentfooter"> <p class="pfoot">Copyright � 2009 Expectations Property Services, Altrincham UK</p> <p class="pfoot">Created by <a href="http://www.pheel.co.uk/">Pheel Web Solutions</a></p> </div> </div> <div id="rightcontent"> <div id="rightcontentbox"> <form name="enquire" method="post" action="/enquire.php" id="enquire"> <table> <tr> <td><label for="Name">Name</label></td> <td><input type="text" name="Name" size="20" id="Name"></td> <td><label for="Service">Select Service</label></td> </tr> <tr> <td><label for="Phone">Phone</label></td> <td><input type="text" name="Phone" size="20" id="Phone"></td> <td rowspan="3"><select name="Service" size="5" id="Service"> <option>Windows</option> <option>Communal</option> <option>Office</option> <option>Maintenance</option> <option>Specialist</option> <option>Other</option> </select></td> </tr> <tr> <td><label for="Mobile">Mobile</label></td> <td><input type="text" name="Mobile" size="20" id="Mobile"></td> </tr> <tr> <td><label for="Email">Email</label></td> <td><input type="text" name="Email" size="20" id="Email"></td> </tr> <tr id="submitbutton"> <td colspan="3"><input type="image" src="images/submit.png" value="Submit" alt="Submit"></td> </tr> </table> </form> </div> </div> <div id="rightfooter"><span>Footer</span></div> </div> </div> </body> </html> Code (markup): ~eric
But you put content inside a single table that the ONLY part of the website that was messed up. See a pattern here ? Anyway you need to use my code and put in the css suggestion I said. From there we can progress ~eric
I'm getting someone else to fix everything for me, privately. And then I will study his methods/code thoroughly to learn where I went wrong. Thank you very much for your help and persistance with me eric. I realise I can be fustrating to work with. Your efforts weren't wasted after all!
So I finally converted you? Yes you can be "fustrating" to work with. Although I think a better word is "frustrating" you say tomato I say tomato. ~eric
Some people still use tables for forms, yes. In general, the best question to ask yourself is, would this make sense in Excel? Usually forms don't, but for some I'm sure the line can be pretty fuzzy. In any case, while things line up easier in a tabular form, it can be done with CSS and almost all (pure) form elements. But I'm even still working on my technique on those (going on 2 years, and prolly more forms than anything else). The guy who cleaned up your page still did some things not considered the norm (like a div with a bunch of anchors for the menu, while the community generally considers a menu a list of links, and so you usually see <ul>s being used) and other stuff... goes to show there are always multiple ways to skin a cat. I agree that trying to validate a page not written with cleanliness and validity in mind in the first place is a good way to lose hair (from tearing it out) and what you end up with at the end can be completely valid as in, everything was spelled right (the validator is like a big spellchecker, not a code checker) but the grammar can still be goofy which the validator can't pick up on. I might be lazy, but usually when redoing any pages from my colleagues (who are backend coders, not front-end) I actually just rewrite everything except the content, because it's just easier than trying to fix their mangled 1999 code. I learned a lot from studying other people's pages when they were asking for help, and some crusty came along and rewrite large parts (or the whole thing) for them. Esp. if that crusty then commented on every part, explaining why he did this or that. In any case, good luck with the site. *edit: in case your other dude didn't explain some stuff... there are likely answers for some of your questions: This is something folks used to working with tables get I think most frustrated with. Tables naturally keep their rows the same height throughout-- one td gets higher, then they all do. Usually there are two (most popular) solutions, and you'll run into them at some point anyway: Faux Columns (google "css faux columns") which use usually background images on the containers to fake equal-height divs (fake, not actually making the divs equal height... CSS is more fakery than anything) and using display: table which does NOT work in IE6 or 7 (does work in IE8) and which you can actually use if you have a backup for IE (I've used it in a menu which was originally written in a table and the designer wanted to keep that accordion thing tables do, while I knew that semantically it was a menu and not a table). There's also the matryushka doll float technique but it seems much rarer than the other two. I didn't look through the other code to see what was causing this, but in general you'll get this kind of stuff when "positioning" everything. Trying for a sticky footer can do it too. I have a nasty, unfinished page with one of my positioning rants on it which doesn't say anything other sites don't already say, but I stuck it there so I wouldn't repeat myself so much. Usually when people say this, they have a container who is holding floats, and the floats haven't been enclosed or cleared. IE will enclose them sometimes due to a bug. If this is the case, FF wouldn't have been the only browser not showing the background-- Opera, Safari, Konqueror, Chrome, and any others would have the same problem.