Loading...
 
Skip to main content

Themes

Forum List Topic List

 
Thread actions
Print this page
  • Print all pages

    • CSS Validation - Automatic Fixes? My Site displays horribly in Firefox.

    Posted by www.imagiscape.ca

    My site displays well in IE. (http://www.imagiscape.ca/wikiQuestion)

    Using the W3C CSS validator,
    http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.imagiscape.ca%2Fwiki%2Ftiki-index.php%3Fpage%3DWiki%2520Home&warning=1&profile=css21&usermedium=allQuestion,
    I found errors.

    Is there a tool for automatically or semi-automatically fixing them?

    There are 40 errors and 369 warnings, and I don't want to fix them manually.

    (My theme is my modification of subsilver.css.)

    (I searched Tikiwiki.org for "firefox" and for "validator" but found no relevant results. I checked the Smarty Template Engine but could not found a css-fixer tool.)

    More keywords: browser compatibility.

    Reads: 7822
    Posted by Gary Cunningham-Lee Japan

    > Is there a tool for automatically or semi-automatically fixing them?

    Yep, human brain. 😉 Actually, the validator is probably the closest thing: it found the errors, but it isn't an editor.

    > There are 40 errors and 369 warnings, and I don't want to fix them manually.

    Unfortunately, fixing these things is pretty much a manual process, as far as I know. You read what the error is, go to the CSS file, and make the fix. Often, it's a simple error, like this one you got: "color 4030 is not a color value : 4030". You need to use the correct color syntax, like #004030.

    The theme you used as a basis specifies some properties that aren't CSS2 — the radius borders that other browsers don't see anyway. You could delete those particular properties and reduce the errors.

    Some errors are from the PHP Layers menu CSS. If you use these as they are, you'll get the errors. If you absolutely want to get rid of them, you need to edit your header.tpl file to not call the standard phplmlayers CSS and instead specify any needed properties in your own theme CSS file.

    So you have to see what each error says and then make the appropriate change. If you have the skills to do a theme customization, I assume you can do this.

    As for the warnings, they are just that, and not errors. They just indicate that there might be a problem. Bu usually there isn't. The validator is very strict on things like color and background being explicitly specified, for example. This accounts for a lot of the warnings you got (and that many people/sites get).

    > (My theme is my modification of subsilver.css.)
    >
    > (I searched Tikiwiki.org for "firefox" and for "validator" but found no relevant results. I checked the Smarty Template Engine but could not found a css-fixer tool.)

    No magic solution, sorry.

    -- Gary


    Posted by www.imagiscape.ca

    Thanks Gary,

    If I know there isn't an auto-fix, I'm willing to do it manually. And I have now done so.

    After everything else, one error remained:
    Property wrap doesn't exist : nowrap

    Nowrap is used in PHP Layers Menu, so in Site Identity, I turned off PHP Layers Menu.
    Nowrap is also in a Google Search module, so I removed that module.

    Still, the layout is ... way out.

    Why?

    Is it due to XHTML errors?
    http://validator.w3.org/check?uri=http%3A%2F%2Fwww.imagiscape.ca%2Fwiki%2Ftiki-index.php%3Fpage%3DWiki%2520Home&charset=%28detect+automatically%29&doctype=Inline&group=0Question
    None of these 26 errors look serious to me - certainly not responsible for the layout error.

    Curiously, the css validator is still giving a nowrap error, but when I view the source, and search for nowrap, there is none found.

    Thanks Gary,

    If I know there isn't an auto-fix, I'm willing to do it manually. And I have now done so.

    After everything else, one error remained:
    Property wrap doesn't exist : nowrap

    Nowrap is used in PHP Layers Menu, so in Site Identity, I turned off PHP Layers Menu.
    Nowrap is also in a Google Search module, so I removed that module.

    Still, the layout is ... way out.

    Why?

    Is it due to XHTML errors?
    http://validator.w3.org/check?uri=http%3A%2F%2Fwww.imagiscape.ca%2Fwiki%2Ftiki-index.php%3Fpage%3DWiki%2520Home&charset=%28detect+automatically%29&doctype=Inline&group=0Question
    None of these 26 errors look serious to me - certainly not responsible for the layout error.

    Curiously, the css validator is still giving a nowrap error, but when I view the source, and search for nowrap, there is none found.

    The tiki in question is www.imagiscape.ca/wiki.Question


    Posted by www.imagiscape.ca

    Oh my ---- Since I "fixed" the css, my site now displays horribly in IE too.

    Well, IE still displays all the modules, which Firefox does not.
    But the layout is now the same in both, with the centre column appearing beneath the left column.

    Perhaps that's to be expected - now I need to set the css so it displays properly in both.

    I've tried some online CSS editors and I began exploring Smarty.
    Is there a CSS editor that makes it easy to move and shape sections (by wysiwyg dragging to reshape)?

    Here is the css that pertains to layout. Can anyone tell me how I can find what I need to change?
    (The header and footer display properly, it's the middle section that's broken.)



    /* This div encloses the whole Tiki application */
    DIV#tiki-main {
    background: #94BBFF;
    height: 100%;
    width: 98.2%;
    margin-top: 0px;
    margin-bottom: 18px;
    margin-right: 9px;
    margin-left: 9px;
    }

    /* The three columns */
    TD#leftcolumn {
    vertical-align: top;
    background: #94BBFF;
    width: 140px;
    }

    TD#rightcolumn {
    vertical-align: top;
    background: #94BBFF;
    width: 20px;
    }

    TD#centercolumn {
    background: #94bbff;
    vertical-align: top;
    width: 98%;
    }

    /* And this is what lies inside the centercolumn */
    DIV#tiki-center {
    margin-left: 0px;
    margin-right: 10px;
    padding-left: 0px;
    padding-right: 0px;
    }

    div.wikitext {
    background-color: white;
    background-image: url(ring-bound_bkgd.gif);
    font-family:
    Georgia, "Times New Roman", Times, serif,
    Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 14px;
    border: 1px solid #0070BB;
    padding-left: 32px;
    padding-right: 28px;
    padding-top: 8px;
    padding-bottom: 2px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    margin-bottom: 1px;
    width: 90%;
    clear: both;
    }
    .wikitopline table { width: 100%; }

    Posted by Gary Cunningham-Lee Japan

    > TD#centercolumn {
    > background: #94bbff;
    > vertical-align: top;
    > width: 98%;
    > }

    The center column table cell appears to be doing as instructed, going way wide, which may be the cause of the problem. I don't think there's a need to specify a width here.
    ...

    > div.wikitext {
    > background-color: white;
    > background-image: url(ring-bound_bkgd.gif);
    > font-family:
    > Georgia, "Times New Roman", Times, serif,
    > Verdana, Geneva, Arial, Helvetica, sans-serif;
    > font-size: 14px;
    > border: 1px solid #0070BB;
    > padding-left: 32px;
    > padding-right: 28px;
    > padding-top: 8px;
    > padding-bottom: 2px;
    > margin-left: 0px;
    > margin-right: 0px;
    > margin-top: 0px;
    > margin-bottom: 1px;
    > width: 90%;
    > clear: both;
    > }

    Only one of the font types will be used (serif or sans-serif) since all computers have both as far as I know. The first one specified that is found on the computer is used, so the other won't ever be. You should decide which you want the wikitext to be and delete the other. This isn't causing an error, but is unnecessary overhead in the file. Also, if you want to reduce the file size of you CSS file, the padding specifications can be shortened like this:

    padding: 8px 28px 2px 32px;

    Browsers understand that the padding is listed in the sequence top, right, bottom, left, and a handy mnuemonic device for that is "TRouBLe".

    -- Gary


    Posted by www.imagiscape.ca

    Thanks Gary,

    If I know there isn't an auto-fix, I'm willing to do it manually. And I have now done so.

    After everything else, one error remained:
    Property wrap doesn't exist : nowrap

    Nowrap is used in PHP Layers Menu, so in Site Identity, I turned off PHP Layers Menu.
    Nowrap is also in a Google Search module, so I removed that module.

    Still, the layout is ... way out.

    Why?

    Is it due to XHTML errors?
    http://validator.w3.org/check?uri=http%3A%2F%2Fwww.imagiscape.ca%2Fwiki%2Ftiki-index.php%3Fpage%3DWiki%2520Home&charset=%28detect+automatically%29&doctype=Inline&group=0Question
    None of these 26 errors look serious to me - certainly not responsible for the layout error.

    Curiously, the css validator is still giving a nowrap error, but when I view the source, and search for nowrap, there is none found.

    Thanks Gary,

    If I know there isn't an auto-fix, I'm willing to do it manually. And I have now done so.

    After everything else, one error remained:
    Property wrap doesn't exist : nowrap

    Nowrap is used in PHP Layers Menu, so in Site Identity, I turned off PHP Layers Menu.
    Nowrap is also in a Google Search module, so I removed that module.

    Still, the layout is ... way out.

    Why?

    Is it due to XHTML errors?
    http://validator.w3.org/check?uri=http%3A%2F%2Fwww.imagiscape.ca%2Fwiki%2Ftiki-index.php%3Fpage%3DWiki%2520Home&charset=%28detect+automatically%29&doctype=Inline&group=0Question
    None of these 26 errors look serious to me - certainly not responsible for the layout error.

    Curiously, the css validator is still giving a nowrap error, but when I view the source, and search for nowrap, there is none found.

    The tiki in question is www.imagiscape.ca/wiki.Question

    Posted by Rick Sapir / Tiki for Smarties United States

    Can you specify exactly what "displays horribly in Firefox." When I look at your site (see image, hereQuestion) it seems OK to me. Sure, the left column is very long, but all the modules seem to be displaying properly.

    Regarding the validation errors, I would definately fix these first:

    1. You need to fix the header — your site is XHTML, but you headers says HTML.
    2. There's a invalid comment declaration in the top-bar.


    HTH,


    -Rick
    Now Available: TikiWiki for Dummies SmartiesQuestion — A beginner's guide to using ))TikiWiki((.
    Coming soon: TikiWiki for Smarties

    Posted by www.imagiscape.ca

    Rick,

    The Center Column, with the WikiText, displays below the left column.

    How did you produce the (pretty pictureQuestion) you attached of my site?

    That's not what I see in Firefox. It's close to what I used to see in IE, but it's not what I see in IE since I corrected the CSS errors. (Except nowrap, which remains despite removing everything that uses nowrap (see next post in this thread.))


    > Regarding the validation errors, I would definately fix these first:
    > #You need to fix the header — your site is XHTML, but you headers says HTML.
    > #There's a invalid comment declaration in the top-bar.

    In header.tpl, should I replace

    with

    ?

    Should I leave the following as it is?:



    Thank you,
    Jonathon

    Posted by Rick Sapir / Tiki for Smarties United States

    >
    > How did you produce the (pretty pictureQuestion) you attached of my site?
    >

    I'm using Firefox 2.0.6 on Win XP.

    Did you clear both your browser's cache and Tiki's system cache?

    Your issues are more than simply CSS validation. There are some pretty serious HTML problems, too. I strongly recommend that you:

    1. You have an opened __<!-- with a missing close statement that is surely causing issues. (Look at the This is TikiWiki... statement at the very top of your page.) This is causing portions of the Tiki code to be commented out.
    2. Use a tool like http://browsershots.org/Question to test your site in different browser/OS combinations.
    3. Validate each individual TPL, each time you edit it.



    HTH,

    -Rick
    Now Available: TikiWiki for Dummies SmartiesQuestion — A beginner's guide to using ))TikiWiki((.
    Coming soon: TikiWiki for Smarties

    Posted by www.imagiscape.ca

    Hooray - 1 page now works!

    Image

    The homepage now works, but only the homepage.

    The center column is below the left column!

    Image



    or
    There is no left column! and the center is in the tikitop! (on turquoise background instead of on "ring-bound" image)

    Image
    Image
    link=


    or
    There is no middle row, except the tab buttons.

    Image



    and sometimes the Tiki-top includes "related pages" which should be in the left column.


    I include more browsershots here: www.imagiscape.ca/wiki_woes.htmQuestion


    -------------

    Like Rick, I am using Firefox 2.0.6 on Win XP.

    My problem is not due to the cache on either my browser or my tiki.
    (Tiki's cache is off, and other changes to layout are immediately visible upon refresh.)

    Rick, I removed the comment that had no closing -->.
    That faulty code was suppressed when I was using PHP Layers Menu, but since I turned off PHP Layers Menu trying to fix the display in Firefox, that faulty code was put into action. Thanks, fixing this fixed the display in IE — but not in Firefox.

    Thanks Rick for browsershots.org - it's what I always wanted.

    Does w3c.org's Markup validator work for TPL files?

    I downloaded NoteTab which is supposed to contain HTML tidy, but tidy.exe was missing.

    I tried online HTML tidy sites - the best seems to me to be
    http://flumpcakes.co.uk/css/html-tidy/tidyQuestion.

    (I'd prefer one which easily let me see which opening tag corresponds to which closing tag, and which worked like spell check, letting me go through the recommended changes one by one and approve or ignore them.)

    Gary,
    Thanks for the tip re Firebug for Firefox. I have it, and the Web Developer add-on, but I had not made use of Inspect Element in the way you suggest ("run the mouse over your page and the divs will be identified").
    Thanks for advising me that for my needs I probably don't need to spend time learning Smarty.

    Posted by www.imagiscape.ca

    (Reposted to include code - it was stripped out.)

    Rick,

    The Center Column, with the WikiText, displays below the left column.

    How did you produce the (pretty pictureQuestion) you attached of my site?

    That's not what I see in Firefox. It's close to what I used to see in IE, but it's not what I see in IE since I corrected the CSS errors. (Except nowrap, which remains despite removing everything that uses nowrap (see next post in this thread.))


    > Regarding the validation errors, I would definately fix these first:
    > #You need to fix the header — your site is XHTML, but you headers says HTML.
    > #There's a invalid comment declaration in the top-bar.

    I don't know how to include here, so I'm adding extra spaces next to gt; > and lt; < .

    In header.tpl, should I replace
    < html >
    with
    < html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
    ?

    Should I leave the following as it is?:
    < ?xml version="1.0" encoding="UTF-8"? >
    < !DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

    Thank you,
    Jonathon


    Page: 1/2  [Next]