Cable Forum - View Single Post - Web Design, CSS compatibilty and suchlike

dev · 28-04-2008, 15:41

Coding to the CSS spec is only one part of making a proper web site now. You shouldn't be using tables/frames/iframes for the layout, tables are fine for tabulated data (ie what they are meant for). The site should be usable without the CSS stylesheet applied too, obviously it won't look the same but it should have a recognisable flow to it. Things to help with that include putting the menu in a list (using <ul> & <li>).

As for compatibility across sites, you should be testing in (imo anyway) IE6 & 7, Opera, Firefox and Safari. If you add some CSS styling and it looks wrong in one of the browsers, think about how you expect the code to work and make sure the code you've added does what you want it to. When you're sure the code should do what you want, get googling to find a fix for the browsers getting it wrong.

Few things to think about:

IE6 + transparent PNGs don't mix well and will require IE6 specific CSS fixes to get them to work
IE6 + float + margins on elements result in the margins being doubled and again require specific CSS fixes
If you float elements inside another, the parent element will need to have 'overflow:auto' set otherwise it won't stretch to its containing elements.

28-04-2008, 15:41	#2
dev cf.geek Join Date: Jan 2004 Posts: 790	Re: Web Design, CSS compatibilty and suchlike Coding to the CSS spec is only one part of making a proper web site now. You shouldn't be using tables/frames/iframes for the layout, tables are fine for tabulated data (ie what they are meant for). The site should be usable without the CSS stylesheet applied too, obviously it won't look the same but it should have a recognisable flow to it. Things to help with that include putting the menu in a list (using <ul> & <li>). As for compatibility across sites, you should be testing in (imo anyway) IE6 & 7, Opera, Firefox and Safari. If you add some CSS styling and it looks wrong in one of the browsers, think about how you expect the code to work and make sure the code you've added does what you want it to. When you're sure the code should do what you want, get googling to find a fix for the browsers getting it wrong. Few things to think about: IE6 + transparent PNGs don't mix well and will require IE6 specific CSS fixes to get them to work IE6 + float + margins on elements result in the margins being doubled and again require specific CSS fixes If you float elements inside another, the parent element will need to have 'overflow:auto' set otherwise it won't stretch to its containing elements.