Author Topic: Need help on css warnings.  (Read 2319 times)

0 Members and 1 Guest are viewing this topic.

Offline Reathion_Arkidian_Nights

  • Newbie
  • *
  • Posts: 16
Need help on css warnings.
« on: November 16, 2005, 09:42:34 pm »
Need help on fixing the warnings trying to make it to the W3c standers

Warnings:

Line : 27 (Level : 1) You have no color with your background-color : body
Line : 34 (Level : 2) Redefinition of voice-family : body
Line : 48 (Level : 1) You have no background-color with your color : a
Line : 62 (Level : 1) You have no background-color with your color : a:hover
Line : 117 (Level : 1) You have no background-color with your color : .articleAuthor
Line : 149 (Level : 1) You have no color with your background-color : .pageList .this-page
Line : 149 (Level : 1) You have no color with your background-color : .pageList .this-page
Line : 156 (Level : 1) You have no color with your background-color : #articleMore a:visited
Line : 163 (Level : 1) You have no color with your background-color : #articleMore .break
Line : 170 (Level : 1) You have no color with your background-color : #articleMore .end
Line : 178 (Level : 1) You have no color with your background-color : #articleMore .this-page
Line : 198 (Level : 1) You have no color with your background-color : #articleMore .ranking a
Line : 203 (Level : 1) You have no background-color with your color : #articleMore .ranking a:hover
Line : 218 (Level : 2) Redefinition of font-size : .articleStats
Line : 274 (Level : 1) Same colors for color and background-color in two contexts .link and .menu
Line : 274 (Level : 1) Same colors for color and background-color in two contexts .img and .menu
Line : 274 (Level : 1) You have no background-color with your color : .menu
Line : 280 (Level : 1) You have no color with your background-color : .pageList .this-page
Line : 280 (Level : 1) You have no color with your background-color : .pageList .this-page
Line : 287 (Level : 1) You have no color with your background-color : .menu a:visited
Line : 294 (Level : 1) You have no color with your background-color : .menu .break
Line : 301 (Level : 1) You have no color with your background-color : .menu .end
Line : 309 (Level : 1) You have no color with your background-color : .menu .this-page
Line : 329 (Level : 1) You have no color with your background-color : .menu .ranking a
Line : 334 (Level : 1) You have no background-color with your color : .menu .ranking a:hover
Line : 368 (Level : 1) You have no color with your background-color : .header
Line : 386 font-family: You are encouraged to offer a generic family as a last alternative
Line : 386 (Level : 2) font-family: You are encouraged to offer a generic family as a last alternative : .toplinks
Line : 403 (Level : 1) Same colors for color and background-color in two contexts .img and .googlesearch
Line : 403 (Level : 1) You have no background-color with your color : .googlesearch
Line : 403 (Level : 1) Same colors for color and background-color in two contexts .link and .googlesearch
Line : 413 (Level : 1) Same colors for color and background-color in two contexts .link and .rightpanel
Line : 413 (Level : 1) Same colors for color and background-color in two contexts .img and .rightpanel
Line : 413 (Level : 1) You have no background-color with your color : .rightpanel
Line : 426 (Level : 1) You have no background-color with your color : .content
Line : 426 (Level : 1) Same colors for color and background-color in two contexts .img and .content
Line : 426 (Level : 1) Same colors for color and background-color in two contexts .link and .content
Line : 437 (Level : 1) Same colors for color and background-color in two contexts .img and .portfoliocontent
Line : 437 (Level : 1) Same colors for color and background-color in two contexts .link and .portfoliocontent
Line : 437 (Level : 1) You have no background-color with your color : .portfoliocontent
Line : 451 (Level : 1) You have no color with your background-color : #footer
Line : 452 (Level : 2) You have some absolute and relative lengths in margin. This is not a robust style sheet.
Line : 463 (Level : 2) Redefinition of voice-family : #footer
Line : 514 (Level : 1) You have no color with your background-color : .block_3:before
Line : 514 (Level : 1) You have no color with your background-color : .block_3:before
Line : 514 (Level : 1) You have no color with your background-color : .block_3:before
Line : 522 (Level : 2) Redefinition of voice-family : .block_1
Line : 522 (Level : 2) Redefinition of voice-family : .block_3
Line : 522 (Level : 2) Redefinition of voice-family : .block_2
Line : 582 (Level : 1) You have no color with your background-color : .verticalalign p
Line : 619 (Level : 2) Redefinition of float : .wrapper
Line : 652 font-family: You are encouraged to offer a generic family as a last alternative
Line : 652 (Level : 2) font-family: You are encouraged to offer a generic family as a last alternative : #protfoliolinks
Line : 714 (Level : 1) You have no background-color with your color : .titlecaption
Line : 714 (Level : 1) Same colors for color and background-color in two contexts .link and .titlecaption
Line : 714 (Level : 1) Same colors for color and background-color in two contexts .img and .titlecaption
Line : 726 (Level : 1) You have no color with your background-color : .img
Line : 743 font-family: You are encouraged to offer a generic family as a last alternative
Line : 743 (Level : 2) font-family: You are encouraged to offer a generic family as a last alternative : .link
Line : 762 (Level : 1) You have no color with your background-color : input text
Line : 766 (Level : 1) You have no background-color with your color : #calendar
Line : 773 (Level : 1) You have no color with your background-color : .toggle
Line : 780 (Level : 2) You have some absolute and relative lengths in margin. This is not a robust style sheet.


body {
background-color : #004c73;
font-family : Arial, Helvetica, sans-serif;
font-size : 12px;
margin : 0;
padding : 0;
overflow : auto;
voice-family : "\"}\"";
voice-family : inherit;
}
body, div, p, th, td, li, dd {
font-family : Arial, Helvetica, sans-serif;
font-size : 12px;
}
a {
text-decoration : none;
color : #ffffff;
background-color : transparent;
}
a:link, a:visited, a:active {
cursor : pointer;
}
a:focus {
outline : invert thin dotted;
}
a:hover {
background-color : transparent;
color : #444444;
cursor : crosshair;
}
.article {
margin-bottom : 40px;
clear : both;
}
.article p {
margin : 0 0 1em;
}
.articleTitle {
font-size : 16px;
font-weight : bold;
clear : left;
}
.articleTitleFCM {
font-size : 16px;
font-weight : bold;
clear : left;
border-bottom : 2px solid #ffffff;
}
.articleTitleCF {
width : 200px;
font-size : 16px;
font-weight : bold;
clear : left;
border-bottom : 2px solid #ffffff;
}
.articleAuthor {
background-color : transparent;
font : normal 12px arial, verdana, geneva, sans-serif;
margin : 10px 0 13px;
color : #000000;
clear : both;
}
.articleBody {
font-family : Arial, Helvetica, sans-serif;
font-size : 12px;
line-height : 160%;
text-align : left;
clear : both;
}
div.articleBody table td, div.articleBody table th {
font : 12px arial, verdana, geneva, sans-serif;
line-height : 150%;
}
#articleMore {
font : normal 11px arial, verdana, geneva, sans-serif;
margin : 5px 5px 0 0;
}
.articleMore {
font : normal 11px arial, verdana, geneva, sans-serif;
margin : 5px 5px 0 0;
}
#articleMore a, .pageList .this-page {
padding : 2px 6px;
border : 1px solid #444444;
background : #000033;
text-decoration : none;
}
#articleMore a:visited {
padding : 2px 6px;
border : 1px solid #444444;
background-color : #000033;
text-decoration : none;
}
#articleMore .break {
padding : 2px 6px;
border : none;
background : #444444;
text-decoration : underline;
}
#articleMore .end {
padding : 2px 6px;
border : 2px solid #000000;
background : #444444;
}
#articleMore .this-page {
padding : 2px 6px;
border-color : #999;
font-weight : bold;
font-size : 13px;
background : #444444;
}
#articleMore a:hover {
color : #ffffff;
background : #555555;
border-color : #000000;
text-decoration : none;
}
#articleMore .ranking {
display : block;
margin-top : 10px;
font-weight : bold;
}
#articleMore .ranking a {
padding : 0;
border : 0;
background : #444444;
}
#articleMore .ranking a:hover {
text-decoration : underline;
color : #ffffff;
background : transparent;
}
.articleStats {
background-color : #666666;
border-top : 1px solid #000000;
border-bottom : 1px solid #000000;
border-left : 1px solid #000000;
border-right : 1px solid #000000;
color : #ffffff;
font-size : 12px;
font-weight : bolder;
margin : 8px 5px 5px;
padding : 5px;
font : normal 10px arial, verdana, geneva, sans-serif;
white-space : nowrap;
clear : both;
}
.postDate {
font-weight : normal;
font-size : 11px;
margin : 15px 0;
padding : 2px 6px;
background-color : transparent;
white-space : nowrap;
border-bottom : 1px solid #ffffff;
}
.photoPostDate {
font-size : 12px;
font-weight : bold;
margin : 6px 0 0;
padding : 4px 0 2px;
white-space : nowrap;
border-top : 1px dotted #000000;
}
.spacer {
white-space : nowrap;
clear : both;
margin-bottom : 12px;
}
#quotes {
quotes : inherit;
margin : 5px 17px;
padding : 15px;
font-family : Arial, Helvetica, sans-serif;
font-size : 16px;
display : block;
background-color : #444444;
border-top : 2px solid #333333;
border-bottom : 2px solid #333333;
border-left : 2px solid #333333;
border-right : 2px solid #333333;
color : #0099cc;
white-space : inherit;
clear : both;
}
.menu {
font : 12px Arial, Helvetica, sans-serif;
padding-top : 10px;
padding-bottom : 10px;
margin : 0;
color : #ffffff;
}
.menu a, .pageList .this-page {
padding : 2px 6px;
border : 1px solid #444444;
background : #000033;
text-decoration : none;
}
.menu a:visited {
padding : 2px 6px;
border : 1px solid #444444;
background-color : #000033;
text-decoration : none;
}
.menu .break {
padding : 2px 6px;
border : none;
background : #444444;
text-decoration : underline;
}
.menu .end {
padding : 2px 6px;
border : 2px solid #000000;
background : #444444;
}
.menu .this-page {
padding : 2px 6px;
border-color : #999;
font-weight : bold;
font-size : 13px;
background : #444444;
}
.menu a:hover {
color : #ffffff;
background : #555555;
border-color : #000000;
text-decoration : none;
}
.menu .ranking {
display : block;
margin-top : 10px;
font-weight : bold;
}
.menu .ranking a {
padding : 0;
border : 0;
background : #444444;
}
.menu .ranking a:hover {
text-decoration : underline;
color : #ffffff;
background : transparent;
}
#fixheader {
z-index : 100;
width : 100%;
margin : 0;
padding : 0;
position : fixed;
}
.logoimage {
background-image : url(image/top_headerbg_a.jpg);
background-position : top left;
background-repeat : repeat-x;
height : 64px;
margin : 0;
padding : 0;
display : block;
text-decoration : none;
text-align : right;
cursor : crosshair;
}
.header {
font-family : Arial, Helvetica, sans-serif;
font-size : 18px;
border-top : 2px solid #000000;
border-bottom : 2px solid #000000;
border-left : 2px solid #000000;
border-right : 2px solid #000000;
background-color : #444444;
margin : 0;
padding : 65px 5px 5px;
}
.topheader {
background-image : url(image/sidepanelbg.jpg);
background-position : top left;
background-repeat : repeat-x;
cursor : crosshair;
margin : 0;
padding : 0;
}
.toplinks {
background-color : #000000;
border-bottom : 2px solid #ffffff;
color : #ffffff;
font-family : "Arial Black", Arial, "Arial Narrow", "Times New Roman";
font-size : 10px;
margin : 0;
padding : 5px;
cursor : crosshair;
}
.googlesearch {
position : absolute;
top : 0;
left : 262px;
font-family : Arial, Helvetica, sans-serif;
font-size : 12px;
font-weight : bolder;
margin : 0;
padding : 7px 9px 9px 7px;
color : #ffffff;
}
.rightpanel {
position : absolute;
left : 575px;
top : 165px;
color : #ffffff;
font-size : 11px;
width : 200px;
display : block;
margin : 15px;
padding : 5px 5px 5px 20px;
text-align : left;
}
.content {
position : absolute;
left : 6px;
top : 161px;
color : #ffffff;
font-size : 11px;
margin : 0;
padding : 0;
width : 550px;
text-align : left;
}
.portfoliocontent {
left : 6px;
top : 161px;
color : #ffffff;
font-size : 11px;
margin : 5px;
padding : 5px;
text-align : center;
width : 573px;
height : 500px;
}
#footer {
z-index : 101;
bottom : 0%;
width : 100%;
border-top : 5px solid #ffffff;
background-color : #666666;
margin : 0 15% 0 0;
padding : 5px 0 0 15px;
position : fixed;
}
#footer {
width : 100%;
}
#footer {
voice-family : "\"}\"";
voice-family : inherit;
}
html > body #footer {
width : 100%;
}
.block_1 {
float : left;
width : 33%;
margin-left : 33%;
border-bottom : 2px solid #000000;
}
* html .block_1 {
display : inline;
}
.block_2 {
float : left;
width : 32%;
margin-left : -67%;
border-bottom : 2px solid #000000;
}
.block_3 {
float : left;
width : 32%;
border-bottom : 2px solid #000000;
}
.block_1, .block_2, .block_3 {
padding-bottom : 32767px;
margin-bottom : -32767px;
}
@media all {
.block_1, .block_2, .block_3 {
padding-bottom : 0;
margin-bottom : 0;
}
.block_1:before, .block_2:before, .block_3:before {
content : '[DO NOT LEAVE IT IS NOT REAL]';
display : block;
background : inherit;
padding-top : 32767px;
margin-bottom : -32767px;
height : 0;
}
.block_1, .block_2, .block_3 {
voice-family : "\"}\"";
voice-family : inherit;
}
}
.verticalalign {
position : absolute;
bottom : 0;
}
.block_1 .verticalalign {
width : 33%;
}
.block_2 .verticalalign {
width : 32%;
}
.block_3 .verticalalign {
width : 32%;
}
@media all {
.verticalalign {
width : 100%;
}
div[id^="wrapper"] #block_1 .verticalalign {
width : 34%;
}
div[id^="wrapper"] #block_2 .verticalalign {
width : 33%;
}
div[id^="wrapper"] #block_3 .verticalalign {
width : 33%;
}
}
* html .verticalalign {
width : 100%;
}
.verticalalign p {
position : absolute;
bottom : 0;
right : 0;
margin : 0;
padding : 0;
background : #996666;
}
@media all {
.wrapper_extra {
position : relative;
}
* html .wrapper {
position : relative;
}
.wrapper {
overflow : hidden;
}
* html .wrapper_extra {
float : left;
width : 100%;
}
.wrapper {
float : left;
float : none;
}
.wrapper:after {
content : '';
display : block;
height : 0;
clear : both;
visibility : hidden;
}
.wrapper {
display : inline;
}
.wrapper {
display : block;
}
}
#protfoliolinks {
background-color : #000000;
border-top : 1px solid #ffffff;
border-bottom : 5px solid #ffffff;
border-left : 1px solid #ffffff;
border-right : 1px solid #ffffff;
color : #ffffff;
font-family : "Arial Black", Arial, "Arial Narrow", "Times New Roman";
font-size : 10px;
margin : 0;
padding : 2px;
cursor : crosshair;
display : block;
}
.messagebox {
font-family : Arial, Helvetica, sans-serif;
font-size : 12px;
font-weight : bold;
margin : 15px 0 0;
padding : 5px;
color : #ffffff;
background-color : #444444;
border-top : 2px solid #0066ff;
border-bottom : 2px solid #0066ff;
border-left : 2px solid #0066ff;
border-right : 2px solid #0066ff;
}
.hr {
border-top : 2px solid #ffffff;
clear : left;
margin : 15px 0 0;
padding : 15px 0 0;
display : block;
}
.smallhr {
border-top : 2px solid #ffffff;
width : 100%;
margin : 15px 15px 0 0;
padding : 15px 15px 0 0;
}
.portfoliobox {
width : 500px;
margin : 0;
padding : 15px;
display : block;
}
.thesis {
width : 500px;
margin : 0;
padding : 15px;
display : block;
overflow : auto;
}
.aboutinfobox {
width : 500px;
margin : 0;
padding : 15px;
}
.titlecaption {
font-family : Arial, Helvetica, sans-serif;
font-size : 18px;
font-weight : bolder;
color : #ffffff;
margin : 0;
padding : 7px 9px 9px 7px;
display : block;
cursor : crosshair;
}
.img {
border-top : 5px solid #000000;
border-bottom : 5px solid #000000;
border-left : 5px solid #000000;
border-right : 5px solid #000000;
background-color : #ffffff;
margin : 5px;
padding : 10px;
}
.caption {
font-family : Arial, Helvetica, sans-serif;
font-size : 10px;
border-left : 1px solid #ffffff;
margin : 0 0 0 15px;
padding : 7px 9px 9px 7px;
}
.link {
background-color : #ffffff;
color : #000000;
font-family : "Arial Black", Arial, "Arial Narrow", "Times New Roman";
font-size : 10px;
margin : 5px 0 0;
padding : 5px;
cursor : crosshair;
}
.copyright {
font-family : Arial, Helvetica, sans-serif;
font-size : 10px;
margin : 0;
padding : 0;
border-bottom : 1px solid #000000;
}
input text {
margin : 0;
padding : 5px;
height : 20px;
background-color : #006699;
}
#calendar {
color : white;
}
.toggle {
margin : 5px;
padding : 5px;
border : 1px solid #000000;
background : #444444;
}
.validatoricon {
z-index : 123;
left : 500px;
bottom : 4%;
margin : 5px 15% 0 0;
padding : 5px 5px 0 15px;
position : fixed;
}

Offline Tabuu

  • Hero Member
  • *****
  • Male
  • Posts: 809
    • http://tabuu-lion.artistsworld.org
Need help on css warnings.
« Reply #1 on: November 27, 2005, 09:13:35 am »
Yeesh...that'll be a hard one to tackle o.o I have just been through all that, and in the end it still didn't completely check out because it asks for definition of a background color with every font color. That includes link colors, and I don't want background colors for my links :\ Just like me, though, seems a lot of your problem either comes from

"Line : 48 (Level : 1) You have no background-color with your color" "Line : 149 (Level : 1) You have no color with your background-color : .pageList .this-page"
- Defining a font color for an element but no background color or vice-versa when they want both defined *sigh* it's to make sure the content will be able to be seen easily or something. Just add the missing element if you want to comply. It might clash with your site scheme, though

"Line : 218 (Level : 2) Redefinition of font-size : .articleStats"
- Contradictions in what you're asking the code to do. just like me saying I want .menu background color to be black, but in the same statement say i want it to be white. just go back and delete the defunct element.

"Line : 386 font-family: You are encouraged to offer a generic family as a last alternative"
- You have to define your last alternative font to be one of two things: serif (fancy stuff, like times new roman style) or sans-serif (simple, like arial)
EX: font-family: arial, "lucida console", sans-serif;
EX: font-family: "times new roman", courier, serif;

it doesn't look too hard to figure out. It only looks like a really long haul. The best thing you can do is use or get an html editor (I personally enjoy the hell out of using AceHTML, which makes adding/editing html and css a breeze http://software.visicommedia.com/en/products/acehtmlfreeware/ ). That should help quite a bit with whittling the bugs down hopefully
|| Trades - OPEN! || Request - Considering A Few... || Commissions - Not that good yet -_- ||

|| DA || ArtistsWorld ||

Offline Reathion_Arkidian_Nights

  • Newbie
  • *
  • Posts: 16
Need help on css warnings.
« Reply #2 on: December 03, 2005, 07:59:38 pm »
Thanks! the footer shows on the bottom of the header through IE6, and other browser, too. I use the Microsoft Web Editor to fix all of the xhtml with the W3c Standers, and most of the css problems. I will give it a try with the AceHTML, to fix the CSS code warnings!

Offline Mister Initial Man

  • Sr. Member
  • Species: Lynx/Bear
  • ****
  • Male
  • Posts: 401
    • The Lynx's Den
Need help on css warnings.
« Reply #3 on: December 05, 2005, 01:37:00 pm »
These are all warnings, they aren't mistakes.  However, should you want to fix all these, you might find this very handy:

background:inherit;

It means the child element inherits the background of its parent element. '<img'>