Wickham

Use your css for the first menu tab as default, then only add the hover state several times with different class for the others. #navigation a.type1:hover { color: red; } #navigation a.type2:hover { color: blue; } HTML <ul id="navigation"> <li><a href="default.html">one link</a></li> <li><a class="type1" href="link1.html">link1</a></li> <li><a class="type2" href="link2.html">link2</a></li> </ul>

You will have to add different classes and different styles to each menu link if the hover is to have different colors on the same page. If he had asked for different hover colors on different pages you could just add a different id to each page body tag and then add different hover color for each id in the stylesheet. In both cases use a php "include" to repeat the menu on many pages, so you only have one file with markup and one stylesheet.

Well, I suppose you can by including both classes in the markup, say <p class="left">...</p> <p class="right">...</p> CSS .left { text-align: left; } .right { text-align: right; } and have one class with display: none; in the main CSS file and the other with display: none; in the media query style for the narrow page. Forget the above. You should be able to do it just by including the same class in the media query with the different alignment, as long as the media query style is after the main stylesheet link, it won't apply to wide pages, only to the narrow page.

If you have any position: absolute elements inside your wrapper/container, then you will need to add position: relative to the wrapper/container which will make the position: absolute elements take their top, right, bottom or left positions from the container corners instead of the viewport corners, so they maintain their position as the container centers. div{ position: relative; margin-left: auto; margin-right: auto; width: 100px; } I usually add it to all containers I want to center, just in case I add position: absolute elements later. Edit: I didn't read the first post before replying. Centering several li tags is easy if they all have a fixed width, you just add up all the fixed widths plus side padding, side margins and side borders and give the total width to the ul tag and use position: relative; margin: auto; to center the ul tag in the viewport. To center the TEXT (not a block element like the ul tag) inside fixed width li tags you use text-align: center; for the li tag style. However, if the li tags have no width so that each is a different width depending on the number of characters, centering the whole menu is more difficult. See item 4 here:- http://www.wickham43...opdownmenus.php If you drag the window wider and narrower you will see that the whole menu still centers (until it is too narrow to contain all the li tags).

Mine? This:- http://www.wickham43.com/falklands/wickham.html

Opera Mobile emulator http://www.opera.com/developer/tools/mobile/ gives you a choice of about twenty mobile or small screen devices to check with your code.

Apply % widths to every element across the width, including side padding and side margins, totalling 100%. If you have side borders which cannot be sized in %, only in px, the others should total 97% or 98% to allow for the side borders. Images should also be sized in % width. You may find that the page gets too spaced out in wide viewports or too squashed up in narrow width viewports, so an alternative is to use min-width and max-width in px instead of % widths.

Very interesting, jheg. I found that the code you posted worked in jsfiddle but not when included in a full web page either in IE9 or Firefox (although they were the same as eachother). I tried editing ol li:before{ } to ol li li:before{ } but that didn't work either. However, the CSS in the link http://webmasters.st...with-subclauses ol > li { counter-increment: root; } ol > li > ol { counter-reset: subsection; list-style-type: none; } ol > li > ol > li { counter-increment: subsection; } ol > li > ol > li:before { content: counter(root) "." counter(subsection) " "; } did work (after deleting the .main class for ol which probably doesn't apply to you). It's the first time I've noticed jsfiddle to be different from real browsers.

You can change to numbers by changing list-style-type:lower-roman; to list-style-type: upper-number; but that only gives you 1 instead of 1.1 in the nested ordered list. I'm not sure how to get 1.1 except by doing a terrible fudge <ol> <li> first list item <ol> <li><span>1 bla bla bla</span></li> <li><span>2 bl abl abl some more</span></li> <li><span>3 bl abl abl less</span></li> </ol> </li> CSS ol { list-style-type: decimal; padding-left: 25px; color: #272673; } ol > li { margin-bottom: 35px; } ol > li > ol { margin-top: 13px; } ol > li > ol > li { padding-left: 16px; margin: 0; list-style-type: upper-number; } ol > li > ol > li span { margin-left: -22px; }

Note my edit in my last post that I seem to get it working in IE7.

I realise that there are two threads about the same problem, but I'll continue this one. I should have looked at the javascript errors. bgcorner.js shows SCRIPT65535: Unexpected call to method or property access. bgcorner.js, line 163 character 45 Not sure if this is relevant. It seems to be this line bot ? this.appendChild(d) : this.insertBefore(d, this.firstChild); so I deleted it like this //bot ? this.appendChild(d) : this.insertBefore(d, this.firstChild); and IE in developer tools for browser IE7 suddenly woked to place the Request Quote on the right and the javascript silder worked, but I have no idea if this is correct, I was just experimenting.

Almost certainly. Emails don't process from localhost unless you edit the php.ini file inside one of the WampServer or XAMPP folders. See http://roshanbh.com....nvironment.html It's probably a better test to send an email to yourself from the online page via the host's server. Edit: I think your $from variable should have an email address, put your own in there as a test $from = 'From: nurdIT Contact Form dpowell@nurdit.com';

I always use Outlook, not the online interface, but I've just had a look at it and it seems clean and smart. I noticed that the inbox gives the date but not the time of an email whereas Outlook does show the time in the Inbox list. In the Outlook.com you have to open the email to see the time it was received. Isn't it going to be confusing between Outlook and Outlook.com? When people refer to Outlook, which will they mean?

A pure CSS dropline menu like this http://www.cssplay.co.uk/menus/doors_drop_line.html?current=one&sub=none doesn't use javascript, it seems to do it without javascript. There is javascript on the page, but not for #nav.

At the moment you have #content width: 100%; #left-side width:900px; and #right-side width:300px; so that when the viewport hasn't got enough width for the left side it drops down and the right side stays at the top. If you want a totally fluid page, use % widths for everything including side margins, side padding and images, but it may look very stretched out in large width viewports or too squashed up in small widths. The responsive web design methods can deal with that situation, or just experiment with max-width and min-width.

It's very odd. I checked in a validator and there were only a few errors which didn't seem to be relevant. I checked with javascript disabled and all browsers showed the form at the bottom left under the content (obviously). With javascript enabled IE9 and Firefox are OK but not IE7 and IE8 so it seems that the problem is not CSS or HTML markup but IE7 and IE8 don't seem to be processing the javascript at all. Perhaps there is a conflict between some of the javascript files that just crashes the javascript processing. I can't help I'm afraid.

There are three basic situations with floats:- 1. Where you just want to float an element inside another and have text wrap around the floated element See item 2 here http://www.wickham43.net/divboxes.php 2. Several floated elements side by side See item 3 here http://www.wickham43.net/divboxes.php 3. One or more floated elements inside a container and you want the container background to cover the floated element(s). See examples of background situations here http://www.wickham43...xbackground.php Item 2d is a favorite method of clearing floats to make the background show down to the bottom of the floated divs and to stop the following element from showing too high up (floated elements don't give their height to the container so the following element will appear too high unless you clear the floats).

You could use a conditional comment for lt IE 8 (less than IE8) and a class style that is inside the cc and also in your main styesheet with display: none; and message text with that class in the body markup, then no javascript is used (but it won't redirect unless you have a link in the text).

Well, there is a floppy disk showing. How many of you still use those? (I do use memory sticks and cds but sometimes use the floppy to save on the Win98 SE PC which isn't connected via the router to the others and is too old to use a memory stick). Too much trouble, and just in case the newest computer crashes I prefer to keep the old ones working. Another reason for keeping the XP PC working is that the Olympus Camedia software won't work on Win7 despite the claim that you can opt to use XP drivers and Camedia won't give a free driver update, I would have to pay for a newer Camedia version, so it's easier just to continue using XP for photos. Also the 1997 HP LazerJet 5L can have an updated driver but the plug is too large for the newer Win7 PC so I copy across to XP for printing (although the newer Epson inkjet has almost as good print quality).

I'm not proud of the attached photo! Note the dust on the Belkin router and the tangle of cables. It a classic case of evolution and hoarding. Win98SE with IE6 from 1998 on the left, Win7 and IE9 in the middle, Vista with IE8 behind it, XP from 2002 with IE7 on the right. I use the old computers for testing and backups (I don't like using ietester and constantly flipping from one display to another, I like to see several displays at the same time, but IE6 is dead and I hardly ever test for IE8 now if IE7 and IE9 are OK). Epson inkjet scanner/printer in the foreground, old Laserjet 5L on the right, four desktops under the desk, a very old scanner and Epson printer against the curtain and a phone. I don't use the old printer much but when printing a lot of colour prints it speeds it up if I have two printers working. The books tied with string on the right are attached to the back of the XP's screen because it loses its display (gets squeezed like an eggtimer) and I found that the casing was loose, not a software problem. I have a place for my cup and calculator and also a little for space for papers. Mike - how can you work at your station with so little room for the papers clients must give you and research papers, reference books, etc.? I can't believe that anyone can be entirely paperless. Edit, also a gateway unit for monitoring my Enecsys micro-inverters for PV panels, between the inkjet and the XP PC. Headphones and webcam not showing. I used to test video calling with WigiWigi/MeBeam/Koowy during develpoment but that seems to have got as far as it's going to go so I don't use the webcam much now.

A layer is just a name for placing one element above or below another using position: absolute or position: relative and a z-index as shown here:- http://www.wickham43.net/layers.php although Dreamweaver calls a lot of its elements layers but that is probably not strictly correct. Dreamweaver seems to use absolute positioning to create layers using Design View, which is not recommended, try to use relative positioning and manual coding. The following links are for Dreamweaver layers using Design View, one is dated January 2005 and the other seems out of date:- http://www.informit.com/articles/article.aspx?p=355342 http://www.adobe.com/support/dreamweaver/interactivity/using_layers/using_layers02.html The <layer> tag is mentioned, but it's old and deprecated.

You've changed a lot of styles since the first post, which worked for me with my edits. Use the cssplay menu and edit that as your first and latest styles won't work properly, there's too much wrong.

India has had massive power cuts over the last two days affecting at least half the country. I wonder how many call centres used by UK banks and other companies have been quiet today. It could be difficult for UK companies if their call centres are out of action freqently. India has a rising population and rising use of electricity but a very antiquated power grid, so more cuts are likely. Perhaps call centres will be shut down there and move elsewhere - where to? Bangladesh (future flooding)? Or back to the UK? Even if they have backup generators, (which probably don't work for more than a few hours), the workers can't get to work (no trains, no traffic lights, etc.)

Use one stylesheet if you are a beginner, put all the Meyer reset styles first which will make all default padding and margin to 0, and set other styles like font to inherit, so that styles are the same for all browsers overiding their different default settings, then add the styles you want for h1, p etc. then delete all inline styles (those coded inside html markup). bold will have a greater font-weight than normal text by default, so add font-weight: normal; in your h1 style. http://www.w3schools.com/cssref/pr_font_weight.asp shows font-weight: normal as 400 and bold as 700 if you use values instead of normal or bold. Use a class if you only want some of your p or h tags to be different to what you have coded as the main style eg h1 { margin: 8px 0; }/* the sizes you want instead of Meyer's 0 */ p { margin: 4px 0; color: red; }/* font-weight: normal; is the default so you don't actually need to it in this style*/ p.bluebold { color: blue; font-weight: bold; } <p>Normal red text</p> <p class="bluebold">Bold blue text</p>

Please don't post two topics for the same question.