in reply to Re: cgi and css, body tag not recognize
in thread cgi and css, body tag not recognize

when the .html is display in firefox, the background colour is not changed. All the others classes in the css file work fine but not the body.
  • Comment on Re^2: cgi and css, body tag not recognize

Replies are listed 'Best First'.
Re^3: cgi and css, body tag not recognize
by Joost (Canon) on Jun 14, 2007 at 20:24 UTC
      ok find my solution
      thank you very much for helping me
      in the css file i put the backgroud-color after the background and it worked
      background: url(images/vbc.jpg) no-repeat fixed top right; background-color: #0e7aef;
      thank you Joost

        Normally, you'd either specify individual properties separately

        BODY { color: white; font-family: sans-serif; background-color: #0e7aef; background-image: url("images/vbc.jpg"); background-repeat: no-repeat; background-position: top right; background-attachment: fixed; }

        or all in one background: ...

        BODY { color: white; font-family: sans-serif; background: url("images/vbc.jpg") #0e7aef no-repeat fixed top right; }

        As you had no color in the background: specification, I suppose it was implicitly being reset to the default...

      I did
      perl -MCGI index.cgi > test.html
      this is index.cgi
      #!/usr/bin/perl -w use strict; use diagnostics; use CGI; use CGI::Carp qw(fatalsToBrowser warningsToBrowser); use CGI::Pretty; use DBI; warningsToBrowser(1); my $q = CGI->new(); my $title = "mt Annotation pipeline"; print $q->header(), $q -> start_html(-title => "$title", -style => { -src => 'mycss/mtannot.css', -type + => 'text/css', -media => 'screen' }), $q->div({-class=>"header"},$title), $q->div({-style=>"float: left"}, $q->div({-class=>"menu"}, $q->h3("menu"), ("here is some text"), $q->br(), ("spanning two lines") ), ), $q->div({-class=>"content"}, $q->h1('First Upload your sequence'), $q->table ( {bgColor=> "blue", -border=>1}, $q->TR([ $q->td("1") . $q->td("A") . $q->td("2") . $q->td("B" +), ]), $q->TR([ $q->td("1") . $q->td("A") . $q->td("2") . $q->td("B" +), ]), ), ), $q -> end_html();
      and this is the css file:
      BODY { background-color: #0e7aef; color: white; font-family: sans-serif; background: url(images/vbc.jpg) no-repeat fixed top right; } LI { margin-bottom: 1ex; } H1 { color:black; } .header { font-size: 4em; border: solid thin black; background-color: #8B475D; text-align: center; padding-top: 0px; margin: 0px 0px 10px 0px; color: #7FFF00; width: 90%; } .content { margin-left: 16em; padding: 1em 1em 1em 1em; background-color: #eee; border: solid thin black; width: 75%; } .menu { background-color: #b3d5ff; width: 15em; border: solid thin black; text-align: center; color: black; }
      How do you change the body' background-color in your css?
        I note that that's a different css and html from the one you posted first. But at least we're getting somewhere now.

        probably your background image url isn't valid. It works fine without the  background: url(images/vbc.jpg) no-repeat fixed top right; line.

        update: note that urls in a CSS file are relative to the location of the CSS, not to the location of the calling HTML file.

        Aside from the capitalization in the css, already mentioned, it appears to me that your background-image is correct. Fuji doesn't object, in any case, to the single line, and blesses whole body section:

        Valid CSS information BODY { background-color : #0e7aef; color : white; font-family : sans-serif; background : url(images/vbc.jpg) no-repeat fixed top right; }

        HOWEVER, I believe the standard form is:
        body {background-image: url(./gfx/ban_btm.jpg);background-repeat: repeat-x;}

        ...at least, that passes both the w3c html and css validators for me... and another of each, run locally. It also gives no offense to htmlTIDY

        w3c, for example, reports: W3C CSS Validator Results for file://localhost/TextArea Valid CSS information body { background-image : url(./gfx/ban_btm.jpg); background-repeat : repeat-x; }

        Now, if I am correct, your

        background: url(images/vbc.jpg) no-repeat fixed top right;

        could, conceivably, be masking the background-color declaration above, in a non-compliant browser.

        Be it noted, I believe essentially ALL browsers are non-compliant to some extent or another -- even Amaya and other supposedly "gold-standard" browsers, developed not so much for real-world use, as for testing.

        With that bias of mine in mind, you might try sticking that background in one of your existing <div>s... and see what happens to that. In fact, it might be instructive to try the variation of locating it at several different lines of the style declaration.

        If you opt for this, please tell us what happens... and with (also already mentioned), which browser?

        Update: Oops. Fixed spelling of "Fuji" and UNborked my </tt>...</tt> in first line of this node.