There is still something realy wrong going on with your CSS
Posted: 13 Sep 2006 00:17
The layout still breaks on resize in all the browsers I tested. (WinXP - IE 6, IE 7rc1, FF 1.5, FF 2.0b, Opera 9)
adding to my previeus post about the layout (in the "anouncement" thread):
1. The navbar breaks - in some browsers only the word "support" drops down aline, in some browsers the nav bar simply wraps.
2. In some pages - different pages on every browser - the orange/blue boxes on the right wrap down when the window gets too small.
3. The background image sometimes disapears or flashes in IE and FF.
I had a brief look at the CSS -
1. You are using a "clearfix" hack, In my opinion it's considered bad coding... It sometimes has unexpected results:
using "clear:both" in some cases causes the "pee-ka-boo" bug in explorer where some elements disapear randomly from the screen - should be used with causion (I don't know if it's the case here, but it's a general advice).
2. You are using the min-width CSS style on the wrong element, it should be applied on the "pagecontainer" element - tested it localy in FF (with "Web developer toolbar") and it works good.
BUT "min-width" doesn't work for IE 6 and below - there is a simple fix to this (didn't check it but I think it should work) - I believe that using a fixed 750px width div inside the "pagecontainer" (even an empty one) and giving the "pagecontainer" overflow:visible" style along side the "min-width:750px" will give the same result in IE (IE has a bug that causes it to change the size of a parent element if a child element has a width/height which is larger than the parent, this fix uses this bug to emulate the missing "min-width" style) (EDIT: The blue section is wrong, sorry)
3. You should optimize the CSS a bit, even deleting all the extra spaces and puting every style in only one line should optimize the load time of the CSS.
adding to my previeus post about the layout (in the "anouncement" thread):
1. The navbar breaks - in some browsers only the word "support" drops down aline, in some browsers the nav bar simply wraps.
2. In some pages - different pages on every browser - the orange/blue boxes on the right wrap down when the window gets too small.
3. The background image sometimes disapears or flashes in IE and FF.
I had a brief look at the CSS -
1. You are using a "clearfix" hack, In my opinion it's considered bad coding... It sometimes has unexpected results:
using "clear:both" in some cases causes the "pee-ka-boo" bug in explorer where some elements disapear randomly from the screen - should be used with causion (I don't know if it's the case here, but it's a general advice).
2. You are using the min-width CSS style on the wrong element, it should be applied on the "pagecontainer" element - tested it localy in FF (with "Web developer toolbar") and it works good.
BUT "min-width" doesn't work for IE 6 and below - there is a simple fix to this (didn't check it but I think it should work) - I believe that using a fixed 750px width div inside the "pagecontainer" (even an empty one) and giving the "pagecontainer" overflow:visible" style along side the "min-width:750px" will give the same result in IE (IE has a bug that causes it to change the size of a parent element if a child element has a width/height which is larger than the parent, this fix uses this bug to emulate the missing "min-width" style) (EDIT: The blue section is wrong, sorry)
3. You should optimize the CSS a bit, even deleting all the extra spaces and puting every style in only one line should optimize the load time of the CSS.
