Wickham

It's quite safe to use the HTML5 doctype now. As far as the HTML5 new element tags are concerned, they won't process in old IE versions, so you need to use the javascript shim (or shiv) which means you can then use <header> <aside> etc and use styles like margin, bacground, etc. for them. Add this in the head section:- <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> As far as the new CSS3 features are concerned, some are not processed by some browsers, see http://www.findmebyip.com/litmus/ so choose to use only the ones that are processed by all main browsers. For some that aren't well supported, like <video> and <canvas>, it's probably best to continue with an old method that is still supported by all browsers (object and embed tag for video and audio or flash). HTML5 and CSS3 are still in beta but it seems that the main structure will not be changed.

The anchor is a piece of code that fixes a place on a page that you want the reader to see at the top of the window when he clicks a link somewhere else. The link he clicks can be on the same page or on a different page and when clicked the page will scroll or refresh to show the anchor position he chose at the top of the window. See http://www.wickham43.net/generaladvice.php#anchors

A lot of websites use XHTML 1.0 with content="text/html" (like this forum) but it's "Tag Soup" (a mixture of HTML and XHTML, look at Wikipedia). XHTML 1.0 was a half-way house when people thought that XHTML would supersede HTML and is in fact incorrectly used but then the people who decide these things decided that HTML using content="text/html" and pure XHTML 1.1 and 2 using content="application/xhtml+xml" would go separate ways. No one could be bothered to go back to HTML 4.01 after changing to XHTML 1.0 but now we should think about using HTML5 (but perhaps use HTML 4.01 Strict as Kyle suggests if HTML5 is a step to far too early, but I've started to use it).

As far as I know, XHTML does still exist, but it's not for normal web page use, it's for specialist applications as Kyle described in 2006 here:- http://www.killersites.com/mvnforum/mvnforum/viewthread?thread=2139#18788 Item 1.6 of w3.org http://dev.w3.org/html5/spec/Overview.html#html-vs-xhtml says The first such concrete syntax is the HTML syntax. This is the format suggested for most authors. It is compatible with most legacy Web browsers. If a document is transmitted with an HTML MIME type, such as text/html, then it will be processed as an HTML document by Web browsers. This specification defines version 5 of the HTML syntax, known as "HTML5". XHTML 2.0 will be for specialist XML based languages like SVG and MathML and inappropriate for normal websites. HTML 5.0 is being developed and XHTML 2.0 will be developed alongside for XML coding. XHTML 1.1 and the future 2.0 will never be processed as XML by IE6 when used properly with content="application/xhtml+xml" (they will show a blank page with errors like incorerect PHP or a lot of rubbish code). HTML 5 and XHTML2 are still not officially released as far as I know, but HTML5 is perfectly usable now for normal websites. There will be a compromise X/HTML 5.0 (note the /) as it will process as HTML when combined with the meta tag including content="text/html" and process as XHTML when combined with the meta tag including content="application/xhtml+xml". You can use the trailing slash in <br /> or just <br> in HTML5 and X/HTML5 and lower case for tags is recommended for both. Frankly, it's a mess and still confusing, but I suggest you use HTML5 doctype with old HTML coding and lower case tags.

First of all, get rid of everything in front of the doctype and everything after the </html> tag. Your div markup is <div id="arrowLeft"></div> <div id="descriptionBox"> </div> <div id="arrowRight"></div> where the description box is betaween a float: left and a float: right but hasn't got a float for itself. Try adding float: left to #descriptionBox. Alternatively if a div hasn't got a float and you want it to move up between two floated divs, then the unfloated div should be last so that the floated divs go to their positions and the unfloated div moves up into the space <div id="arrowLeft"></div> <div id="arrowRight"></div> <div id="descriptionBox"> </div>

This is the best I can do:- CSS edits:- body { /* delete all background image code*/ } .background { display: block; position: fixed; left: 0; right: 0; bottom: 0; top: 0; width: 100%; height: 100%; z-index: -1; } HTML markup:- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> BakedWell </title> <link rel="stylesheet" type="text/css" href="style.css"/> <!--[if lt ie 7]> <style type="text/css"> .background { position: absolute; } /*this is because IE lt (less than) IE7 don't process position: fixed*/ </style> <![endif]--> </head> <body> <img class="background" src="images/sky.jpg" alt="Sky"> <!--this has been added--> <div id='website'> <div id='title'> <h1>BakedWell</h1> </div> <div id='navbar'> <ul> <li><a href="index.html">Home</a></li> <li><a href="menu.html">Menus</a></li> <li><a href="cont.html">Contact</a></li> </ul> </div> <div id='text1'> <h2>About BakedWell</h2> <p>BakedWell is a small, family run, mobile catering oven unit, ideal for all celebrations, from parties to weddings. We can cater for all. </p> <p>We mainly specialise in hog Roast, and baked potatoes, but can cater for other needs. Please look under the 'Menu' tab for other options.</p> <p> We use all the best quality ingredients, and where possible use free range meats and vegetables. </p> <p> We can come to where ever the party/event is, as our oven is mobile, and sets up a stand next to the oven, shown in the picture to the right. </p> <p> Our service involves us coming prior to guest set up, serve, close down, tidy up and making sure we don't leave until everyone is full. </p> </div> <div id='footer'> </div> </body> </html> <!-- www.000webhost.com Analytics Code --> <script type="text/javascript" src="http://analytics.hosting24.com/count.php"></script> <noscript><a href="http://www.hosting24.com/"><img src="http://analytics.hosting24.com/count.php" alt="web hosting" /></a></noscript> <!-- End Of Analytics Code -->

I can see three things that might be causing the problem: Edit your doctype to this <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> See http://www.w3.org/QA/2002/04/valid-dtd-list.html Add </head> closing tag just before the <body> tag. Edit your spelling to all lower case for root.css in the html markup and also for the actual filename (it's often better to keep filenames in lower case as it avoids confusion).

I googled:- convert the mime type from mp3 to wav and this was one of the first, http://www.zamzar.com/convert/mp3-to-wav/ but I've never used it.

If you use Firefox add-on Firebug http://getfirebug.com/ it will show you what CSS applies to a particular html markup. If you don't want to change the CSS that you already have, add a class to the end of the CSS file so that it isn't overwitten by previous styles and add in the class to the html markup like:- CSS:- .mystyle { color: red; } Markup to add your class to style8 that is already there:- <div class="style8 mystyle">.............</div>

You need to add a .htaccess file to your server or add the code to a .htaccess file that is there already. You need an Apache server to use .htaccess http://www.blogstorm.co.uk/htaccess-mod_rewrite-ultimate-guide/ The above tutorial is to delete index.html from the url (as well as doing other things as shown to make www the same as no www) but you can edit and repeat for any filename and you can leave it like www.mydomain.com/about instead of www.mydomain.com/about.html You may need to google a general .htaccess tutorial as it can be quite tricky. I have heard that it can be difficult to upload .htaccess as it starts with a . period, so in that case save and upload as temp.htaccess and edit on the server to just .htaccess

Overflow: hidden; in the parent div style does the same as the div with clear:both; so with my code the clear div is unnecessary. Your code above should be style= not style: The "clear" div is item 2b here:- http://www.wickham43.net/firefoxbackground.php while the overflow: hidden; method is item 2d Item 18 is faux columns; item 16 is another method of nesting divs similar to the http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks solution but mine only works if the right column has most content and has simpler code for nesting the divs while his works if any column has most height and is more complicated.

If you are only concerned about the background colors for the #left and #right divs, and because your divs have a fixed width, the easiest method is faux columns http://www.alistapart.com/articles/fauxcolumns/ where you make a fixed width image with the two colors across the width and perhaps only 1px high, then repeat it with repeat-y as a background image in the parent div (the example has a more complicated image with side shadows). Clear the floats before closing the #main div by adding overflow: hidden; to the style for #main. The divs don't need heights, they will be as high as the div with most content. If you have a fluid with page you can't use faux columns with a fixed width image, so use this tutorial which has % widths http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks which is a lot more complicated.

Changing the order doesn't make Firefox or Chrome show the visited state, although IE7 and Opera still do. I've tried:- a a:link a:visited a:hover a:active and a:link a:visited a:hover a:active (without the basic "a" state, but IE needs the general "a" to set the base for the pseudo states). and a a:link a:hover a:active a:visited (which I'm sure is not the recommended order). Firefox does show the hover state in all the above situations, so the -52px position of the sprite works for the hover but not the -26px position for the visited state, which is very odd. I'm coming to the conclusion that it's just the way Firefox and Chrome work.

I'll look into a pixi rollover but I was experimenting with text in the background-images instead of text links. I will probably use other images but these sprites were just an example. I just came across this problem in Firefox and Chrome which seems odd because the code validates and the order of normal, visited, hover, active is what is usually recommended so I'm baffled. The text links are still needed for screen readers and have text-indent: -9999px; to offset them so sighted viewers don't see them.

This is a very simplified page to show a navbar where the current page tab is highlighted and the other tab shows normal, visited, hover and active states. IE7 and Opera do show the lime green text in the sprite for the visited state but Firefox 4.01 and Chrome don't. Why not? http://www.wickham43.net/highlighthomecurrentspriteshort.html Click on the About Us tab, and when on that page click on the Home tab to return to the Home page. You will see that the About Us tab has green text in IE7 and Opera but not in Firefox 4 or Chrome. The white normal and yellow hover states show correctly and the visited part of the sprite is between the normal and hover parts of the sprite, but the y position -26px isn't working in Firefox or Chrome. These are the sprites:- http://www.wickham43.net/images/navbuttonhomesprite.jpg http://www.wickham43.net/images/navbuttonaboutussprite.jpg I know the quality is bad, it's just a basic example to find out what's wrong.

!important is often used because the coder has so many css files and so many styles that he's got a bit lost and can't remember whether he's styled something before, so he uses !important to give it precedence. Lazy. -moz and -o and -webkit and -khtml are used as prefixes for new CSS3 styles in conjunction with HTML5 and are temporary because CSS3 and HTML5 is still technically not finally released, so these prefixes will eventually be redundant. Styles with these, like #box-shadow { width: 300px; height: 50px; -moz-box-shadow: 7px 7px 5px #888888 ; -webkit-box-shadow: 7px 7px 5px #888888; -khtml-box-shadow: 7px 7px 5px #888888; box-shadow: 7px 7px 5px #888888; background: #ddd; border: none; } should always be followed by the basic style box-shadow: 7px 7px 5px #888888; for the future when all browsers should operate the CSS3 without needing a prefix and for those browsers which are properly up to date. At the moment some browsers need the prefix but some, like IE6,7 and 8, are still not processing the CSS3 styles.

You can change the size of a textarea by adding cols and size:- <textarea name="comment" rows="6" cols="40">Type your message here></textarea> but a more accurate way is to add a class or id and specify sizes in px:- CSS in stylesheet:- .textarea { width: 90px; height: 35px; } HTML markup:- <textarea class="textarea" name="comment">Type your message here></textarea> To add more areas, just repeat the code (possibly with different classes and styles).

I supose that it's possible that the user opened a cached version of the page, so the form sent the email with the data from that old page's code. If you code the form action to a separate PHP process page and have the form data format for the email in that page, there is no risk of a user using an old code as the form will have to use the latest version of the PHP process page on your server.

It sounds as if you want a fly-out menu. Have a look at any fly-out menus here:- http://www.cssplay.co.uk/menus/ like http://www.cssplay.co.uk/menus/flyoutt.html Look at the CSSplay page source code and copy a section from the head section style tag or in the case of the example above from a stylesheet called css/flyout.css and also the markup code in the body section, then edit as you want. That example also has a conditional comment for IE6 so you also need <!--[if lte IE 6]> <link rel="stylesheet" media="all" type="text/css" href="css/flyout_ie.css" /> <![endif]--> and download ans save the file css/flyout_ie.css

Where is the variable $subject defined?

Your email address won't show on the page if you use a form processed by PHP where the action is to a separate php file so that it's not visible to the user. Formmail uses this method as do several other form programs that you can download. Formmail should work and I don't know why you are having difficulty. Here are some:- http://jemturner.co.uk/scripts/free-php-mail-form/ http://www.email-form.com/ http://www.emailmeform.com/ I've never used them so I don't know how good they are, but they all claim to have anti-spam security features.

I can't see how any coding will make a difference. If an image is either coded with width and height in px or is calculated by the browser to use a certain width and height in px, then when a user zooms the number of px is spread out across the screen (fewer px fill the window) without changing the number of px that the image is using, so the image can't get any better, it will get worse as the px spread out. Same with % width and height, the 100% just spreads out to be more than the window size and a scrollbar appears. I've just looked at one of my sites with an image 600px wide at 400% zoom and it's very pixellated and exceeds the window width, causing a scrollbar.

collew's code is for CSS but box-shadow is different. See http://www.css3.info/preview/box-shadow/ Look at example F lower down the page.

You can style a select box like any other element. Here are two tutorials:- http://www.456bereastreet.com/archive/200410/styling_even_more_form_controls/ http://www.456bereastreet.com/lab/form_controls/select_multiple/ Give the select box a style like:- select { background-color: #123abc; } and you can give it a class or id if you only want to style one select box when you have several on a page.

I use hardly any specificity, just the basic class .inner or id #content, but that's because my sites usually have the same structure and styling on every page. On a really large site where there are different structures or styling to different sections of the site you probably would need to use specificity to identify the page type (or use a different stylesheet for the different page styles).