Wickham

My Surface RT is 1366 * 768px landscape. Surface pro is 1280*720px. Surface Pro 3 is 2160*1440px.

I looked at the code in the shiv js file I mentioned above (which is the same as polyfilling) and box-sizing and border-box aren't included because they're not elements that can be created with JavaScript, so I think that method is irrelevant and won't work. As Nillervision says, box-sizing and border-box are CSS3 properties, so probably the only way is to create a conditional comment for a separate stylesheet for IE6, 7 and 8 and have different styles for padding and borders and other element widths so that the box sizes look OK. The styles codes for box-sizing and border-box will simply be ignored in those browsers. I hadn't realised that HTML5 and CSS3 were formally approved in October 2014, not so long ago and it took a long time! I know several old people who bought a computer ten years ago and have never updated it So whether you code for IE7 depends on what your target viewers will be, perhaps you anticipate that old people or poor people with old computers will look at your page, so you may need to test in IE7/8 and make sure it's not too jumbled up.

If you use any of the new HTML5 elements, like <header>, <aside>, <video> <border-box> or <canvas> remember that some browsers (like IE6/7/8) won't process styles for the new elements until updated. In the case of IE6/7/8 you need to use the javascript conditional comment below (but the styles won't be processed if viewers have javascript/ActiveX disabled and your page layout and styling will not be displayed properly). IE6/7/8 won't process styles for new tags like <header>, <aside>, <video> <border-box> or <canvas> so IE6/7/8 won't recognise width, height, margins or other layout or styling codes but you can make IE6/7/8 process existing styles and display like modern browsers as shown on blancer.com website. Note the conditional comment enclosing the link to the javascript file which enables new HTML5 tags to be styled:- <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> The above comments mean that HTML5/CSS3 can be used even though HTML5 and CSS3 are still in the development stage. However, the javascript file, as far as I can see, merely allows the new tags to be styled, ie background, width, height, margin, font, etc. but doesn't allow the new processing that is required for some of the new tags like <video>, <canvas> that require special processing, but there are often other ways to make IE process the new features (like the object and embed tags for audio and video). It means that you can use the new tags and the IE page will show the elements in the correct places with some styling without disrupting the page layout, but without processing the new features inside the elements unless you find another method.

Check the order of your stylesheets in the html file. The stylesheet link or styles for all browsers should be first and the stylesheet link or styles for IE7 should follow so that the IE7 styles overwrite the general styles. Note that inline styles in the body code will overwrite all stylesheet codes. Without seeing your code I can't be sure if this answer helps. If you give your code you usually get a quicker answer.

jerseydudek - Have you tried aria haspopup? This means that when you touch a drop down menu, the drop down items stay visible allowing you to touch the drop down item you require, otherwise the drop down items disappear as you move your finger over them to select the item you want. http://www.w3.org/TR/wai-aria/states_and_properties#aria-haspopup msdn.microsoft.com/en-gb/library/ie/jj152135(v=vs.85).aspx example here: http://stackoverflow.com/questions/3474099/what-is-html5-aria

Nothing looks obviously wrong with the CSS except that in the html head section the css file is navigation.css but lower down your post you refer to nav css. Check the filename. In main_css.css you don't need <style type="text/css"> and </style> </style> is there twice while <style type="text/css"> is there once.

I think you have to set up a bitcoin account first to accept payment in bitcoins and that may be a hassle. Do you have to buy one bitcoin to set up an account? Having been paid in bitcoins, the sensible thing would be to cash them immediately, but unfortunately the companies that trade bitcoins frequently go bust, taking your bitcoins or money, and they are all offshore in places where you wouldn't be able to sue them or claim from the liquidator.

Opacity is inherited, as said above, if in the same div. You can use a second div and position that with position: relative or position: absolute over the separate div and the opacity will not be inherited.

The quick way is to work out a suitable width for the ul tag to suit all the li tags and use margin; auto like this (I used 480 px which is a little more than needed); #sticky_navigation ul { list-style:none; margin:0; padding:5px; background: lime; width: 480px; margin: 0 auto; } but it does mean a fixed width. Or you could use item 4 here: http://www.wickham43.net/dropdownmenus.php which uses an extra div; one has left: 50% which puts the left edge at the center (but this div has no border and no background-color so it is invisible) and the ul div inside has left: -50% to drag it back left by the same amount which results in it being centered and this is more flexible.

You could use display: inline-block for the li tag, but float is better because it's better for positioning (like margins). Use this code to see the difference: <!DOCTYPE html> <html> <meta charset="UTF-8" /> <title>test</title> <style type="text/css"> ul { list-style-type: none; overflow: hidden; background: pink; } ul li { display: inline-block; background: lime; } ul li a { display: block; padding: 10px; width:80px; background: #aaa; } ul li a:hover { background: skyblue; } ul.b { list-style-type: none; overflow: hidden; width:200px; background: pink; } ul.b li { float:left; width: 100px; background: lime; } ul.b li a { display: block; padding: 10px; width:80px; background: #aaa; } ul.b li a:hover { background: skyblue; } </style> </head> <body> <ul> <li><a href="http://www.facebook.com">Facebook</a></li> <li><a href="httpt://www.google.com">Google</a></li> </ul> <ul class="b"> <li><a href="http://www.facebook.com">Facebook</a></li> <li><a href="httpt://www.google.com">Google</a></li> </ul> </body> </html>

Brilliant! I've just played it without looking hard at the code, but I will study it. I agree that the look is a bit bland; it needs skin options , perhaps one very simple in grey and blues so it fits in with any web page and another with bright colours to be more exciting.

You should consider using PHP FILTER_VALIDATE_EMAIL instead of your long preg_match code. It's more modern and I assume it's kept up to date by PHP program developers. Your preg_match code only covers 4 characters in a filename extension, but some new domain extensions now have more characters.

In "Edge" IE5 and 7 are listed , but not IE6 - very strange! Luckily I still have an old W97SE computer working which has IE6.

Have you got a space between input and .pinkbutton? I'm not sure that works. Try input.pinkbutton without a space in the css and see if that works because it should override any similar styles in input but will still leave any that are in the input style unless you repeat them in input.pinkbutton with the styles that you want.

Have a look at this example http://www.wickham43.com/forumposts/n0xx131031.html . The top table has a width of 250px for the right column but the middle table the right column has no width (ie auto width, normally to match the widest requirement). In this case the middle table right column has only eleven icons as the table sofware seems to have decided that eleven is all it wants to show, even though it could have reduced the middle column a little more! So much for the browser's programming. IE and Firefox both do this, because the auto widths are apportioned if no width is stated according to the rules for tables. Same in the bottom right column. In the top table the right column icons just stack if there are too many for the fixed 250px width and the left and middle columns apportion the remaining width. In the middle table the left column auto width gets squashed unless you give it a fixed width of 160px because the right column has too many icons. In the lowest example the left column has a fixed width of 160px. If you use the javascript method, remember that not everyone has javascript enabled.