[CSS] How to fix a couple of specific CSS validation errors... - Tilted Forum Project Discussion Community

digby · 01-19-2006, 02:32 PM

Well, I'm now three weeks into the world of web design, and I have another question.

I took a template from oswd and decided to rewrite it using xhtml and css rather than the mess of nested tables that were used by the original author. I'm almost finished, but I'm getting two css validtation errors and I'm not quite sure what I need to do to fix them:

* Line : 100 (Level : 2) Redefinition of border-top-width : .news
* Line : 127 (Level : 2) Redefinition of border-top-width : #maincontent p

Link to the site in its present form.

Here is my css file for reference:

Code:

body {
	font-family:arial, verdana, helvetica, sans-serif;
	font-size:12px;
	cursor:default;
	color:#AAAAAA;
	background-color:#FFFFFF
}
* {
	margin: 0px;
	padding: 0px;
	text-decoration: none;
}
html {
	height:100%;
	margin-bottom:1px;
}
#container {
	width: 750px;
	margin-right: auto;
	margin-left: auto;
	text-align: left;
	background-color: #FFFFFF;
	color:#AAAAAA;
}
#header {
	width:100%;
	padding-top:15px;
}
.spacer {
	width:100%;
	height:15px;
}
hr {
	border:0px;
	color:#CCCCCC;
	background-color:#CDCDCD;
	height: 1px;
	width: 100%;
	text-align: left;
}
h1 {
	font-size:28px;
	color:#FFBA27;
	background-color:#FFFFFF;
	font-family:Arial, Verdana, Helvetica, sans-serif;
	font-weight:300;
}
h2 {
	font-size:20px;
	color:#CCCCCC;
	font-family:Arial, Verdana, Helvetica, sans-serif;
	font-weight:300;
	background-color:#FFFFFF;
}
h3 {
	color:#FFBA27;
	font-size:15px;
	background-color:#F9F9F9;
	border-width:1px;
	border-color:#AAAAAA;
	border-style:solid;
	text-align:left;
	margin-left:20px;
	margin-right:20px;
	font-weight:300;
	padding:5px;
}
.top_main_heading {
	margin-top:15px;
}
#left {
	float:left;
	width:200px;
	background-color:#FFFFFF;
	color:#AAAAAA;
}
#leftcontent p {
	color:#AAAAAA;
	background-color:#FFFFFF;
	font-size: 12px;
	text-align:left;
	margin-left:20px;
	margin-right:20px;
}
#leftcontent ul {
	list-style:none;
	padding-left:20px;
	color:#AAAAAA;
	background-color:#FFFFFF;
}
#leftcontent a {
	color:#FFBA27;
	text-decoration:none;
	font-size:16px;
	background-color:#FFFFFF;
}
.news {
	color:#999999;
	border:1px;
	border-top:0px;
	border-style:solid;
	border-color:#AAAAAA;
	background-color:#FFFFFF;
	line-height:20px;
	padding:5px;
}
#leftcontent a:hover {
	color:#FFBA27;
	background-color:#FFFFFF;
	text-decoration:underline;
}
#main {
	float:left;
	width:550px;
	color:#999999;
	background-color:#FFFFFF;
	padding-bottom:20px;
	background:url(img/background.png);
}
#maincontent {
	background-repeat:repeat-y;
}
#maincontent p {
	color:#999999;
	background-color:#FFFFFF;
	border:1px;
	border-top:0px;
	border-style:solid;
	border-color:#AAAAAA;
	margin-left:20px;
	margin-right:20px;
	margin-bottom:15px;
	line-height:20px;
	padding:20px;
}
#maincontent a {
	color:#FFBA27;
	background-color:#FFFFFF;
	text-decoration:none;
}
#maincontent a:hover {
	color:#FFBA27;
	background-color:#FFFFFF;
	text-decoration:underline;
}
#footer {
	clear:both;
	width:750px;
	font-size:12px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
}
.right {
	color:#AAAAAA;
	background-color:#FFFFFF;
	float:right;
	font-size:100%;
	margin-top:5px;
}
.left {
	color:#AAAAAA;
	background-color:#FFFFFF;
	float:left;
	font-size:100%;
	margin-top:5px;
}

Chamaeleontidae · 01-19-2006, 05:19 PM

The overlap is between these two properties...

Code:

border:1px;
border-top:0px;

border is a short hand for all four sides, if you want the top different you need to specify all 4 properties, and not use border.

Code:

border-top:0px;
border-left:1px;
border-right:1px;
border-bottom:1px;

digby · 01-19-2006, 07:15 PM

ah - that makes sense. Thanks!

theFez · 01-27-2006, 05:17 PM

or you could do

Code:

border: 0px 1px 1px 1px;

the border shorthand goes around a rectangle clockwise starting at the top.

01-19-2006, 05:19 PM	#2 (permalink)
Chamaeleontidae aka: freakylongname Location: South of the Great While North	The overlap is between these two properties... Code: border:1px; border-top:0px; border is a short hand for all four sides, if you want the top different you need to specify all 4 properties, and not use border. Code: border-top:0px; border-left:1px; border-right:1px; border-bottom:1px; __________________ "Reality is just a crutch for people who can't cope with drugs." Robin Williams.

01-19-2006, 07:15 PM	#3 (permalink)
digby Crazy Location: Ahh, the lovely South	ah - that makes sense. Thanks! __________________ mmmm.... pudding

01-27-2006, 05:17 PM	#4 (permalink)
theFez Crazy Location: here and there	or you could do Code: border: 0px 1px 1px 1px; the border shorthand goes around a rectangle clockwise starting at the top. __________________ # chmod 111 /bin/Laden