Wickham

Have you allowed some height for the controls? I have a video on one of my websites that uses QuickTime. The object and embed tags are 640*496px for a video that is 640*480px.

Edit this style in styles.css to add display: block; /* text rollover effect for sidebar1*/ a.rollover:link { display: block; height: 25px; color: #A68200; text-decoration: underline; } Your links jump up and down because you have changed the font-size to font-size: larger; for the a.rollover:hover style. If you add a height as above (or delete the font-size: larger) this your links will stay still. Edit: add a height (as above) to make the darker hover background color show a bit better and delete the <br/><br/> in the html to make the links a bit closer.

You don't need the surrounding center div! My added hr tag didn't have it and it still centered, so I can't understand why your IE8 is different.

It's partly my confusion. I saw several hr tags and then saw that they were made with images so I added my code next to one of them and it centered in IE8. Later I saw that you had changed only the bottom one near the footer with your style code which my code had overwritten because it was coded last in the css file. I assure you that your code and mine both work in my IE8. I've just tested again and you don't need the <div class="center">.......</div> around the <hr class="bar">

I've looked at your online page in IE8 (without using IE7 compatibility) and all the grey/blue hr tags are centered properly. edit:- I see that you've still got the image for the horizontal rule. I downloaded you code and added this just after your image:- <hr class="bar"> and this to the stylesheet:- hr.bar { width: 200px; height: 4px; color: #eee; background-color: #eee; margin: 0 auto; border: none; } and the hr tag was centered, so the code does work in IE8.

I tested my answer in IE8 and it centered! You must have some other code affecting it. Post a link to your online page.

The hr tag is a block element according to this:- http://htmlhelp.com/reference/html40/block.html so try margin: auto instead of text-align: center:- hr.bar { /** Blue Dividing Bar **/ width:200px; margin: 0 auto; height:4px; color:#506F89; background-color:#506F89; /*text-align:center;*/ border:none; } as text-align: center is for inline elements. When Microsoft developed IE8 they said it would be the most standards-compliant browser and in this case it seems that they were right as other browsers are applying text-align to hr when they should not (although it's helpful when browsers are tolerant of mistakes in coding and IE8 is not tolerating wrong coding here).

You can get a video code to validate if you leave out the embed tag and use the object tag with <object type="application/x-shockwave-flash"........ as item 2 here:- http://www.wickham43.net/flashvideo.php but computers need Adobe Flash Player already installed so older browsers without Flash will get a popup asking them to install it, causing delay. That's why many major sites still use the object tag with a classid <div style="width: 500px; margin: auto;"> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0"......... and the nested embed tag which allows older browsers to play the video without waiting.

You can't position a background image a certain number of px from the center, you can either position it exactly at the center or a certain number of px from the left of its container. If the container has a fluid width, you may not be able to position the background image from the left edge to suit all window widths as you want. The other solution is to put the background image in a separate div with position: absolute; left: 50%; margin-left: -??px; so that the left: 50% sets the image's left side at the center of any resolution and the negative margin-left pulls it back left away from the center line by the number of px. You then make the container for this extra div have position: relative as I described in my first post so that the position: absolute div is related to the position of the container div..

Quite honestly, I didn't have any idea what you meant, but I'm glad if you've sorted out the problems. You can use Wordpad or Notepad for text editing, but don't use Word because some characters like " and ' can carry special codes which upset the final display. If you want to edit a file which you are looking at in IE8, it's better and safer to go to the file list in Windows Explorer or My Computer and right click "open with" Notepad. Double clicking the filename in the file list will open it in your default browser.

flowers.png in your second link is 698*698 but the background image in your html page is flowers2.png 1679*692px. When I look at the page in 1024*768 resolution most of the image is outside the left edge because the image is too big. If you added left into the style, it should always show the whole image:- #container { margin-left:auto; margin-right:auto; background-attachment: scroll; min-height:100%; z-index:1000; margin-left:auto; margin-right:auto; bottom:0; background-attachment: scroll; background-image: url(flowers2.png); background-repeat: no-repeat; background-position: bottom left; } but I'm not sure if I have answered your question. The z-index: 1000; probably isn't necessary. Since the #container is the first div after the <body> tag, the z-index just puts it on top of the body, which is normal. If you want the image on top of later divs with content then you may need to create a div with a width, height and positions but with position: absolute; z-index: 1000; and put position: relative; without a z-index in the #container style. That will cause the position: absolute div to take its top or bottom and left positions from the corners of the #container position: relative div instead of from the body window corners.

My code does work, except that I've disabled the form in my tutorial. You have copied my sendmail.php in total and you've edited your admin email address as you should. However, are you sure your form fields are the same as in my example? These probably need editing but your html file url doesn't work so I can't check. Check that your hosting service supports PHP. My example is only the basic codes. If you have trouble with a spambot you will probably need additional security codes and it's often better to stat with a professional script that has security built in, like http://www.formmail.com/ or http://www.email-form.com/ or http://www.jemjabella.co.uk/php-scripts-php-mail-form

This should help you:- http://www.w3schools.com/css/pr_background-position.asp

The first link in my previous post uses <form action="mailto:your-name@hotmail.com" method="post"> and the mailto code will attract spambots unless you use javascript to break up the email address so that it's very difficult for spambots to re-assemble the address (most won't bother as they can harvest enough mailto addresses that haven't been coded with javascript). See the second last paragraph of item 1a. The second link in my previous post uses a separate PHP page with your email address that cannot be seen by spambots as it's processed by the server without being displayed or shown in the page source code.

It looks smart to me, but you can use jQuery for special effects, see this:- http://www.tripwiremagazine.com/2009/07/25-create-amazing-image-effects-with-some-of-the-best-jquery-plugins-available.html

Your online page has the styles:- div.block, div.blockDistinct, div.blockCenter { padding: 10px; padding-bottom: 3px; padding-top: 8px; } div.blockDistinct { background: url("../images/") no-repeat 100% 100% #A4D5FE; } div.blockCenter { width: 70%; top: 500px; border: 0px dotted #CCC; margin-left: auto; margin-right: auto; clear: both; } relating to div.blockCenter and there is no background-image coded. It should show if you add the code correctly:- div.block, div.blockDistinct, div.blockCenter { padding: 10px; padding-bottom: 3px; padding-top: 8px; } div.blockDistinct { background: url("../images/") no-repeat 100% 100% #A4D5FE; } div.blockCenter { width: 70%; top: 500px; border: 0px dotted #CCC; margin-left: auto; margin-right: auto; clear: both; background: #A4D5FE url(../images/image.jpg) no-repeat 0 0; } You coded the url without an image filename in your post; you don't need to put it inside "..." and 100% 100% for the position will put it at the very bottom right corner of the div, if that's what you want. 0 0 or 0% 0% or top left will position it at the top left of the div. ../images is the path to go up one directory/folder and then down into the images folder/directory. The #A4D5FE background color should be coded before the background image, although that doesn't usually make any difference.

The three sites I've found so far all say "Powered by Recipero" http://www.recipero.com/school_websites and two are for UK schools. I didn't know that companies or individuals could create their own file extensions for use on the web instead of .html or .shtml. The actual coding of the sites I've seen are very conventional.

What's the ikml file extension? I've found it for a few websites like my local primary school http://www.broadchalkeschool.ik.org/home.ikml and http://www.monacocorpsecret.com/news/1810618837.ikml Is it for some advanced coding or what? Google hasn't been much help so far.

Here's a very simple example:- http://www.wickham43.com/forumposts/aspire100426.html I haven't used your styles and I don't know what your markup is. My example puts a style of position: relative; in the footer style and then creates a class for the image .above { position: absolute; top: -90px; left: 0; } where the top size is the negative image height so that it sits just above the footer all the time. <div id="footer"> <img class="above" src="images/orangew90x90.jpg" alt="Orange W"> <p>Other Footer content</p> </div> I expect that there are several other ways to do it.

You don't have to use PHP. In fact, it may be better to use client-side processing as it's only applicable to the viewer who's looking at that page at the time. This javascript chained select changes the options in the second box depending on what you selected in the first box, and similarly for the third. http://www.dynamicdrive.com/dynamicindex16/chainedselects/index.htm

I've read about the javascript hacks to be able to create the new elements, but what about computers that have javascript disabled? The markup with <video>...</video> or <header>...</header> may just display without any styles but the video won't show.

It's not just a doctype issue. Apparently if you use the simple new doctype <!Doctype html> now there isn't much of a problem. But if you code markup like <video>............</video> or <header>..........</header> how do you use a conditional comment for this to use different divs with an id or class except by putting two conditional comments in the markup, one for NOT IE and one for IE which I think is sloppy coding. Edit:- Someone told me that the new doctype worked so I tried it on one of my sites and didn't see any difference in IE7 or Firefox, but I didn't do a comprehensive test. I think it's the CSS3 and HTML 5 new features that need to be avoided for many years until you think that most of your potential viewers have upgraded their browsers to the future browsers (ie long after the new browsers are released).

Don't worry about having to use a transitional doctype, sometimes you have to if something on the page is deprecated. Error-free validation isn't a requirement, it's a nice-to-have. The iFrame does process the frameborder="0" code in IE and Firefox and will validate with a transitional Doctype.

You don't use the frameset doctype for iframes, only for framesets with frames, so change it to the Strict or Transitional doctype from here http://www.w3.org/QA/2002/04/valid-dtd-list.html Framesets don't have a body tag so that is why you get the errors.

I've done what you want here:- http://www.wickham43.com/forumposts/oggycontacts100422.html CSS here:- http://www.wickham43.com/forumposts/oggystyle100422.css by adding a left and right div, both with floats, and changing the positions of the </div> tags. I added overflow: hidden; to the #body-part to drag down its background-color over the floated divs. The width of your form td tags are 145+280 = 425 so I made the #right div 425px. I made the left div 399px wide so that 425 + 399 = 824 px which is the width of #body-part. I deleted width="75%" in the form table. I corrected <br> to <br /> in two places so that the code now validates. I added background colors to the divs so that you can see where they are and you can remove the colors. Edit <img src="immmmmages/logo.gif" to <img src="images/logo.gif" in the html file. I had to disable this image as I already had a logo.gif in my directory.