As far as I can see some inputs that are still white has no class="field" and on others you have type="field" which should be then class="field". I also see that you have a type="grey" attribute on some labels, but that's also a mistake I asume. The label element has only two type attributes type="for" and type="form"
Stefan, everybody here wants to help you with issues you have while developing or designing your site and will be happy if they can guide you in the right direction, but I don't think you will find someone here that will just layout/develop your website for nothing or take the deal you offer.
I'm sure lots of us here started by reading, learning, experimenting and asking at fora at points where we get stuck to get better, but this takes time. You know the saying: "learn to walk, before you run".
Since you don't have money to invest either you could try fiverr
Since you have all width and height values, it's easy to do some little math and position #box with some top and left margins in the middle of #main. No need for display: table, display: table-cell and vertical-align: middle
But setting all this fixed heights makes everything pretty inflexible, therefore the content in #box needs to fit perfectly and can't extend unless you change the height and the margins in your CSS of #main and #box. Too much maintanance.
You should have not a = but a : in your .picture-center CSS block and the height should be auto. Perhaps width should be max-width as well, but I don't know your situation.
Like JorgeM pointed out you will need wrappers around the City and State elements (label + input) together in order to line them up next to each other. But not a table > tr > td... just a div > div tag.
Good stuff! I see there is now a horziontal scrollbar. To get rid of that is to remove the margin: 0 2% 0 2% on #header. It's pointles to have it there anyway and it makes the #header div 104% width.... hence the scrollbar.
html, body - remove the overflow property on these tags
#content remove the height property
#content change overflow: scroll to overflow: hidden
Because the work items are floated in the content div you need to clear the floats with overflow hidden in order to get the 100px padding-bottom to work.
I know it's marked as solved, but I think adding !important is a bit too easy to solve this. I mean with easy... adding !important should be your last resort and only if you really have to.
I know now what you were suffering from and that is specificity, because you defined on two spots in your stylesheet, styles to the sub menu. At the top you have a CSS block which includes #cssmenu ul which is also your submenu. To this rule there is a position: relative declared and because #cssmenu ul has a higher specificity then .sub-menu (id + element is stronger then a class) you could not override it with position: absolute unless you throw an !important into the mix :)
So, now you know what the root of the problem was. Or you fix your specificity issue or you leave the important rule :)
You can't change it through your markup. You need a hacked solution. There are quites some workarounds either through CSS or JS, but each with their own pros and cons... Google it and you shall find.
Modernizr is only for feature detection and does not add for example rounded corners to your element in browsers that doesn't support this CSS3 property. If you want rounded corners in those browsers, you will have to use a (javascript) polyfill, such as CSS3pie.
What you do with Modernizr is asking the browser: Hey, do you support border-radius? Browser A: yes Modernizr: Cool, here's some fancy rounded CSS3 corners for you. Browser B (old IE): No! Modernizr: Don't worry... I've got you covered! Here, you load PIE.js and run this function.
In scripting this would be something like this:
Modernizr.load({
test: Modernizr.cssborderradius,
nope: '/js/PIE.js',
complete : function () {
if (window.PIE) {
$('.rounded').each(function() {
PIE.attach(this);
});
}
}
});
A click handler would highlight them once and forever and that's what you mean with point 2, right?. These are radio buttons which gets a checked state if checked, so you should use that to select your elements. With this if you check another radio button, the one that's checked gets unchecked, because you can only select one radio button at the time. I would also add a class 'selected' and use that as a hook for your CSS in the stylesheet instead of adding it inline dynamically.
A semicolon is only necessary if there will be another declaration after the other. If there is only one declaration, or if it's the last declaration in a CSS block, then you can leave the semicolon out if you want.
