Just created my new site and there's a strange and annoying blank space on the right which creates a vertical scroll bar. http://www.grusomhat.com/maintemp.html http://www.grusomhat.com/style.css If anyone can figure out why It would be greatly appreciated.
You're setting a width of 100% on your elements, then adding borders and padding to them - BAD idea. What you're doing is tacking on the width of the borders and padding to the width of the elements, which is causing them to be greater than 100%. I also suggest you remove the margin: 0; padding: 0; declarations in your style rules and replace them with the universal selector: * { margin: 0; padding: 0; } Code (markup): This will remove the margins and padding from everything, freeing you to add the exact amounts of each to those HTML elements that need it. Warning: Will cause margins and padding on form controls (input, select, etc...) to collapse. use with caution and great care when incorporating forms onto a page.
Sweet that's fixed it. I've just taken the width away totally and it's working properly now. I also added the universal rule with borders: 0; as well. Works well and it will save me a lot of extra code.
I wouldn't do that with borders - it messes up form controls way too much to even be worth it (besides, the default for borders is "0" anyway on most elements).