Playing with CSS and xhtml document

October 19, 2007 Firefox, IE, Safari, css, xhtml 2 Comments

Displaying unicode character in different OS, add below code to your css since different OS have their own default font:

Displaying unicode generated from Open Office

.spCh {
    font-family: "Lucida Grande","Arial Unicode MS", sans-serif; font-size: 1.2em;
}

Supporting website:

Problem still existed:

I am not sure why Firefox in MacOs still display the unicode character differently although Lucida Grande is applied to font-family, this problem not existed when Safari, is used for the same Mac.

Border is displayed differently in IE and Firefox.

Style for each td:

style=”vertical-align: top; border-bottom:0.05pt solid #000000; border-left:0.05pt solid #000000; border-right:none; border-top:none; border-style: none none solid solid; border-color: -moz-use-text-color -moz-use-text-color rgb(0, 0, 0) rgb(0, 0, 0); border-width: medium medium 0.05pt 0.05pt; padding: 2.75pt; vertical-align: top;”

Result shown in IE: Result shown in Firefox:
IE result Firefox result

In order to get the same result as Firefox (this is the excepted result), wrap below code in head of html document (not, if you have style coded in html already, put below code separately):

[html]
<!--[if gt IE 5]>
    <style>
        .body table { border-collapse: collapse;}
    </style>
<!--[endif]-->

Why do checking? Because Firefox and Safari will display the table without border ;)

Happy trying :D