Paul_o_b - 10:01 am on Jan 12, 2012 (gmt 0)
In ie6 and 7 when you float elements left and right in a widthless float then the float will (in most cases) stretch to 100% of its parent width which is why the elements are in one line in IE7 and under.
If you first float right and then only float left inside the float then it does not stretch but can be awkward to make the design behave like you want. Therefore the simplest anser os to giv ethe parent float a width that will accommodate its child floats nicely.
In your case we can float the p element instead and give it a width.
You can either give that to IE7 and under only but it should actually help all browsers get straight.
Note that Conditional comments are html and must go in the head of the document and not in the stylesheet.
<!--[if lt IE 8]>
zoom: 1; /* Causes element to have layout. For clearing to work. */
They are just basically normal html comments and will hide whatever is inside from other browsers just like normal html comments would.
It's only IE that looks inside comments to find the specific IE constructs and then acts accordingly with whatever html is inside.
Also make sure you only put css comments in your file/* */ and not // or <!-- -->.
Lastly there is no need to qualify every rule with the type selector e.g. Don't do this "div#buttonsmenu".
It makes the css more bloated and actually harder to read as everything begins with div. IDs are unique anyway so why make the browser find the element and then go find it again to see if its a div. Only qualify rules when you need to know what they are and things like ul#nav are occasionally useful because they let you know that it's a ul and not a div.