it’s impossible to create round-corner boxes with just html and css. at least not yet. maybe the next standard?

i find this step-by-step guide on creating round corner boxes useful.

unfortunately i’m not a graphics person and creating images for those corners seems tedious. if you’re like me and don’t want to do ‘the hard work’, you might want to try RoundedCornr – online html, css and image generator for round corner boxes.

even though there are standards, some browsers still like to use their own standard, like … IE (surprise!?) – different versions of IE will also render your site differently.

in addition, there are million browsers and platforms out there. you can’t install everything nor have all those platforms to check your website compatibility.

to check what your site look like in other browsers and platforms, use this tool to ensure your site is more or less consistent or not too far out. note: be patient, it may take a while to get screenshots.

repeating background not showing as intended on IE. one of those things that works in firefox (which follows standard) but not IE (which tries to set its own standard).

i came across this article which says background color must be specified to make it work.

Code:

there’s a nice online calculator that does the job for you. and if you like it you can download a desktop version.

i’ve been coding css with px as measuring unit. when i started web development most resources suggested using px. to ensure static look across all browsers.

nowadays you need to cater for a variety of browsers, screen resolutions, devices etc. static / fix sizes doesn’t look good in all.

relative measuring unit such as em and % is the preferred way. to allow your site to scale accordingly with devices.

the article also gives a better explanation and contain links to other resources.

css class to define column width:

Code:

Code:

do not use <span> to define table cell.

according to specification, width property does not apply to in-line elements, which includes <span>.