Thursday, May 25, 2006

ഒരു CSS/HTML/Firefox സംശയം

സുഹൃത്തുക്കളേ,

ഞാന്‍ എന്റെ ഗുരുകുലം ബ്ലോഗില്‍ ചില കാര്യങ്ങള്‍ consistent ആയി കാണിക്കാന്‍ CSS-ലുള്ള span എന്ന രീതി ഉപയോഗിക്കാറുണ്ടു്. ഉദാഹരണത്തിനു്, എല്ലാ ഇംഗ്ലീഷ് പദ്യങ്ങളും ഒരു നിറത്തില്‍, മലയാള പദ്യങ്ങള്‍ മറ്റൊരു നിറത്തില്‍ തുടങ്ങി. എല്ലായിടത്തും നിറവും ഫോണ്ടും മറ്റും കൊടുക്കുന്നതു പിന്നീടു മാറ്റുവാന്‍ ബുദ്ധിമുട്ടായതുകൊണ്ടു്, താഴെക്കൊടുത്തിരിക്കുന്ന span rules ഉപയോഗിക്കുന്നു.




span.qright
{
color:green;
}

span.qwrong
{
color:red;
};

span.qmal
{
color: #3131AE;
};

span.qsan
{
color:#954A8A;
}

span.qeng
{
color:#BA2565
}

span.slokam
{
font-size: 1.1em;
color: #006000;
}




പോസ്റ്റുകളില്‍ ഞാന്‍

<span class="qmal"> മലയാളം ഉദ്ധരണി </span>


എന്നെഴുതിയാല്‍ അതു് #3131AE എന്ന നിറത്തില്‍ വരും.

ഇതു് IE-യില്‍ ശരിക്കു വരുന്നുണ്ടു്. Firefox-ല്‍ വരുന്നില്ല. ഉദാഹരണത്തിനു് ഈ പോസ്റ്റ് IE-യിലും Firefox-ലും നോക്കുക. മലയാളകവിത നീലനിറത്തിലും, ഇംഗ്ലീഷ് കവിത ഇളം ചുവപ്പു നിറത്തിലും വരേണ്ടതാണു്.

എന്താണു ചെയ്യേണ്ടതെന്നു് ആര്‍ക്കെങ്കിലും അറിയാമോ?

3 comments:

  1. ഇനി ഇതില്‍ കമന്റിടാത്തതുകൊണ്ടാണോ ഇതു പിന്മൊഴികളില്‍ വരാത്തതു്?

    ReplyDelete
  2. ഉമേഷ്,

    രണ്ടു തെറ്റുകളുണ്ട്:

    1. CSS ഫയലില്‍,

    ......
    ......
    span.qwrong
    {
    color:red;
    };

    span.qmal
    {
    .......
    .......


    എന്നതില്‍ span.qmal നു തൊട്ടുമുന്‍പുള്ള സെമി-കോളണ്‍ വേണ്ട. He spoils the soup!


    2.
    Remove the /p tag that comes just after the first lines of qmal and qeng style lines.

    i.e.
    In the following,

    ......
    .......
    span class=qmal > < br / >
    ഒരു മരം പോലെ മനോഹരമായൊരു< br / >
    കവിത ഞാന്‍ കാണുമോ ഭൂവില്‍? < /p >
    < p > കൊതിയോടെ ഭൂമിയുടെ മധുരമാം വിരിമാറില്‍

    the bolded < /p > should be avoided.
    Or else, the whole poem lines will not recieve the attributes of your span class!

    ReplyDelete
  3. വളരെ നന്ദി, വിശ്വം.

    ആദ്യത്തേതു ശരിയാക്കി.

    രണ്ടാമത്തേതു ചില പോസ്റ്റുകളില്‍ ശരിയാക്കി. പഴയ പോസ്റ്റുകളില്‍ വഴിയേ ശരിയാക്കാം.

    <p></p> വേര്‍ഡ്‌പ്രെസ്സിന്റെ എഡിറ്റര്‍ തന്നെ ഇടുന്നതായിരുന്നു, ലൈന്‍ ബ്രേക്ക് വരുമ്പോള്‍. അതിനു പകരം <br /> ഇട്ടപ്പോള്‍ ശരിയായി.

    ReplyDelete