Dismiss Notice
You are browsing this site as a guest. It takes 2 minutes to CREATE AN ACCOUNT and less than 1 minute to LOGIN

Problem with CSS rendering

Discussion in 'Tech, Gadgets & Science Forum' started by Tanzania 1, Apr 29, 2008.

  1. Tanzania 1

    Tanzania 1 Senior Member

    #1
    Apr 29, 2008
    Joined: Oct 4, 2007
    Messages: 197
    Likes Received: 5
    Trophy Points: 0
    Hi everybody!
    I've encountered a problem on CSS coding. Whenever I open an html file in a browser (I'm using I/net Explorer 7.0), the CSS code is not rendered, but only the HTML code. In other words, the CSS code is filtered out -- as if it's a comment. Can any one help me solve this problem?
     
  2. Shy

    Shy JF-Expert Member

    #2
    Apr 29, 2008
    Joined: Nov 2, 2006
    Messages: 4,238
    Likes Received: 17
    Trophy Points: 0
    Hi Can U Weka Sample Code Hapa ?
     
  3. Steve Dii

    Steve Dii JF-Expert Member

    #3
    Apr 29, 2008
    Joined: Jun 25, 2007
    Messages: 6,414
    Likes Received: 40
    Trophy Points: 145
    T-1, is your code, both html and css localised ...i.e. residing on your hdd as you perform your tests or is it on remote server elsewhere and accessing it via internet? Another thing, are you using external style sheets or internal?..... let us know pls. I'm sure someone here will be able to help....

    I don't think it's necessary to have sample code to solve Tanzania 1's problem, your methodology in solving this problem sounds pushy (just my opinion)!

    SteveD.
     
  4. Shy

    Shy JF-Expert Member

    #4
    Apr 29, 2008
    Joined: Nov 2, 2006
    Messages: 4,238
    Likes Received: 17
    Trophy Points: 0
    Hii Ni Open Forum Kwahyo Akiwa Na Kitu Kama Hicho Anaweka Wazi Ndio Atapata Msaada Mzuri Zaidi Na Kujifunza Zaidi Yeye Na Wenzake Wengi
     
  5. Tanzania 1

    Tanzania 1 Senior Member

    #5
    Apr 29, 2008
    Joined: Oct 4, 2007
    Messages: 197
    Likes Received: 5
    Trophy Points: 0
    Hi, SteveD!
    My html and CSS code is localised. I haven't linked my code to any external sheet so far. I mean even a simple code, like the one below, wouldn't work on my browser!!:

    <html>
    <head>
    <title>Moving Styles To the Top</title>
    <style type=”text/css”>
    .wide { word-spacing: 15px; font-weight: bold; }
    .narrow { word-spacing: -3px; font-weight: bold; }
    .doublespaced { line-height: 1.5; }
    </style>
    </head><body>
    <div class=”doublespaced”>
    This is a paragraph of text that’s double-spaced. This means
    that the <i>leading</i>, or interline spacing, is different
    from standard text layout on a Web page. Within this
    paragraph, I can also have
    <span class=”wide”>some words that are widely spaced due to
    the word-spacing value</span> and, of course,
    <span class=”narrow”>some words that are narrowly spaced,</span>
    too.
    </div>
    <p>
    By comparison, this paragraph doesn’t have any special line-height
    specified, so it’s “single spaced.” Notice the difference in the
    space between lines of text.
    </p>
    </body>
    </html>
     
  6. Shy

    Shy JF-Expert Member

    #6
    Apr 29, 2008
    Joined: Nov 2, 2006
    Messages: 4,238
    Likes Received: 17
    Trophy Points: 0
    HI MIMI NIMEWEZA KUIFUNGUA KUTUMIA INTERNET EXPLORER 6.0 NA FIREFOX PAMOJA NA FLOCK

    INAANDIKA HIVI

    This is a paragraph of text that's double-spaced. This means that the leading, or interline spacing, is different from standard text layout on a Web page. Within this paragraph, I can also have some words that are widely spaced due to the word-spacing value and, of course, some words that are narrowly spaced, too.

    By comparison, this paragraph doesn't have any special line-height specified, so it's "single spaced." Notice the difference in the space between lines of text.
     
  7. Tanzania 1

    Tanzania 1 Senior Member

    #7
    Apr 29, 2008
    Joined: Oct 4, 2007
    Messages: 197
    Likes Received: 5
    Trophy Points: 0
    Ndugu Shy,

    Issue hasa si kuonekana maandishi tu, bali ni kuona pia km CSS code is obeyed, and not just html's.
     
  8. Richard

    Richard JF-Expert Member

    #8
    Apr 30, 2008
    Joined: Oct 23, 2006
    Messages: 6,854
    Likes Received: 2,360
    Trophy Points: 280
    Tanzania Hi,

    Kama nimeelewa swali lako unataka kuhakikisha CSS codes zinatokea kama ulivopanga sasa sijui ni zipi.

    Lakini you can always try validating the broken codes for both HTML and CSS by using W3C Validator or http://validator.w3.org/. This should be able to help especially if you're looking for missing closing elements.

    Pale unaingiza anuani yako ya url na utaanzia hapo kutambua makosa yapo wapi.

    You can also validate the css (http://validator.w3.org/) but that will only check the actual parseability of the code it won't help find conflicting rules. Should you find it difficulties try to seek help from any expert with codes especially specific css error you need help with.

    Nafikiri I/net Explorer ina matatizo katika kutambua CSS codes na you might be best to find the word processor kama Word na mimi huwa napenda kutumia NotePad, sasa sijui wewe unatumia processor gani.


    Take care.
     
  9. Tanzania 1

    Tanzania 1 Senior Member

    #9
    Apr 30, 2008
    Joined: Oct 4, 2007
    Messages: 197
    Likes Received: 5
    Trophy Points: 0
    Hi, Richard!

    Ninachokihitaji ni effects ya attributes za CSS kuonekana ktk browser.

    I haven't yet obtained a domain name.

    Natumia NotePad -- This is recommended for code listings on Windows.

    Thanks, Richard.
     
  10. Richard

    Richard JF-Expert Member

    #10
    Apr 30, 2008
    Joined: Oct 23, 2006
    Messages: 6,854
    Likes Received: 2,360
    Trophy Points: 280
    Mkuu Tanzania 1.

    Sasa nimekupata ila naona kama umejaribu kutupatia mock test (it's a joke)

    Kwa mtizamo wangu wa hizo codes zako, napata picha mbili tofauti kama zifuatazo:

    Hii ni ya HTML


    <html>
    <head>
    <title>Moving Styles To the Top</title>
    </head><body>
    This is a paragraph of text that's double-spaced. This means
    that the <i>leading</i>, or interline spacing, is different
    from standard text layout on a Web page. Within this
    paragraph, I can also have
    <span class="wide">some words that are widely spaced due to
    the word-spacing value</span> and, of course,
    <span class="narrow">some words that are narrowly spaced,</span>
    too.
    </div>
    <p>
    By comparison, this paragraph doesn't have any special line-height
    specified, so it's "single spaced." Notice the difference in the
    space between lines of text.
    </p>
    </body>
    </html>


    Na hio hapo chini ni ya CSS;


    <style type="text/css">
    .wide { word-spacing: 15px; font-weight: bold; }
    .narrow { word-spacing: -3px; font-weight: bold; }
    .doublespaced { line-height: 1.5; }
    </style>
    </head><body>
    <div class="doublespaced">
    This is a paragraph of text that's double-spaced. This means
    that the <i>leading</i>, or interline spacing, is different
    from standard text layout on a Web page. Within this
    paragraph, I can also have
    <span class="wide">some words that are widely spaced due to
    the word-spacing value</span> and, of course,
    <span class="narrow">some words that are narrowly spaced,</span>
    too.
    </div>


    Sasa output ya hizi codes itategemea na browser. Browsers kama Opera and IE4 zinaweza zisioneshe kama ulivotarajia, na ndio maana nikasema unaweza jaribu kwa kutumia validator hio niliokupa.

    Pili mara nyingi attributes huwa zinabadilika kidogo pale unaposhirikisha CSS.Na kwa sababu ina support ndogo kutoka kwa browsers ni zile kama IE6,IE7 na Current versions ya Netscape (6.22) and Mozilla (1.0).

    Ntakupa codes au atrributes zifuatazo kutengeneza text box, text area, input za "radio", "checkbox" na "button" kukuonesha mfano wa kushirikisha attributes zote za HTML na CSS lakini zenye kuchujwa kidogo.

    Hii ni HTML;

    Textbox 1: <input name="textbox1" type="text" size="20" value="form elements"><br><br>
    Textbox 2: <input name="textbox2" type="password" size="15" value="password" class="altTextField"><br><br>
    Textbox 3: <input name="textbox3" type="text" size="20" value="css"><br><br>
    Textarea 1: <textarea name="textarea1" cols="25" rows="5">textarea</textarea><br>
    <input type="checkbox" checked="checked" class="radioStyle"><br>
    <input type="radio"><br>
    <input type="button" value="other button" class="altButtonFormat">


    Na ifuatayo ni ya CSS ambayo selectors na declaration zimekuwa coded(hapa uweke head tag kwenye page yako) ambayo ni hii <HEAD>..</HEAD>

    <style type="text/css">
    <!--
    INPUT {
    background-color: #99ccff;
    color: black;
    font-family: arial, verdana, ms sans serif;
    font-weight: bold;
    font-size: 12pt
    }

    TEXTAREA {
    background-color: navy;
    border: black 2px solid;
    color: white;
    font-family: arial, verdana, ms sans serif;
    font-size: 12pt;
    font-weight: normal
    }

    .altButtonFormat {
    background-color: #c0c0c0;
    font-family: verdana;
    border: #000000 1px solid;
    font-size: 12px;
    color: #778899
    }

    .altTextField {
    background-color: #ececec;
    font-family: verdana;
    font-size: 12pt;
    color: #09c09c
    }

    .radioStyle {
    background-color: #FF0000;
    border: #000000 solid 1px;
    font-family: verdana;
    font-size: 12px;
    color: #000000
    }
    -->
    </style>


    Ukimaliza jaribu kufungua document katika browser yako na utakutana na picha ifuatayo hapo chini.

    cssFrmEfct2.gif

    Kuna attributes nyingi zinazoweza kubadilisha appearance ya form elements. Rangi na mtindo wa mipaka inaweza kutumiwa katika hizo submit na reset buttons na pia text fields.

    Unaweza uka-combine elements zote za CSS na HTML lakini ni vizuri utumie fail lingine(external file la CSS) ili kupata consistency, na pia kutenganisha kati ya formatting na content inasaidia kupunguza codes nyingiii za kuandika.

    Nafikiri nimejaribu kukupa mwanga ni kwanini huwezi tu ku-link hizo two subjects HTML na CSS.

    Kila la kheri.
     
Loading...