MyBB Community Forums

MyBB Community Forums > Community Archive > Archived Forums > Archived Development and Support > MyBB 1.4 > MyBB 1.4 General Support > dynamic theme + w3c validation 5 Error(s)
Full Version: dynamic theme + w3c validation 5 Error(s)
You're currently viewing a stripped down version of our content. View the full version with proper formatting.

Ants

2010-08-19, 03:44 PM
I'm having trouble getting my forum w3c valid. Here is the link to the w3c validator if you need to view the source of the forum disable javascript in your browser. Please help me get this valid, I'm not sure what it wants or where i need to make changes Smile

Validation Output: 5 Errors

 Line 145, Column 8: end tag for "table" which is not finished
</table>
✉
Most likely, you nested tags and closed them in the wrong order. For example <p><em>...</p> is not acceptable, as <em> must be closed before <p>. Acceptable nesting is: <p><em>...</em></p>

Another possibility is that you used an element which requires a child element that you did not include. Hence the parent element is "not finished", not complete. For instance, in HTML the <head> element must contain a <title> child element, lists require appropriate list items (<ul> and <ol> require <li>; <dl> requires <dt> and <dd>), and so on.

 Line 232, Column 8: end tag for "table" which is not finished
</table>
✉
Most likely, you nested tags and closed them in the wrong order. For example <p><em>...</p> is not acceptable, as <em> must be closed before <p>. Acceptable nesting is: <p><em>...</em></p>

Another possibility is that you used an element which requires a child element that you did not include. Hence the parent element is "not finished", not complete. For instance, in HTML the <head> element must contain a <title> child element, lists require appropriate list items (<ul> and <ol> require <li>; <dl> requires <dt> and <dd>), and so on.

 Line 349, Column 8: end tag for "table" which is not finished
</table>
✉
Most likely, you nested tags and closed them in the wrong order. For example <p><em>...</p> is not acceptable, as <em> must be closed before <p>. Acceptable nesting is: <p><em>...</em></p>

Another possibility is that you used an element which requires a child element that you did not include. Hence the parent element is "not finished", not complete. For instance, in HTML the <head> element must contain a <title> child element, lists require appropriate list items (<ul> and <ol> require <li>; <dl> requires <dt> and <dd>), and so on.

 Line 466, Column 8: end tag for "table" which is not finished
</table>
✉
Most likely, you nested tags and closed them in the wrong order. For example <p><em>...</p> is not acceptable, as <em> must be closed before <p>. Acceptable nesting is: <p><em>...</em></p>

Another possibility is that you used an element which requires a child element that you did not include. Hence the parent element is "not finished", not complete. For instance, in HTML the <head> element must contain a <title> child element, lists require appropriate list items (<ul> and <ol> require <li>; <dl> requires <dt> and <dd>), and so on.

 Line 533, Column 8: end tag for "table" which is not finished
</table>
✉
Most likely, you nested tags and closed them in the wrong order. For example <p><em>...</p> is not acceptable, as <em> must be closed before <p>. Acceptable nesting is: <p><em>...</em></p>

Another possibility is that you used an element which requires a child element that you did not include. Hence the parent element is "not finished", not complete. For instance, in HTML the <head> element must contain a <title> child element, lists require appropriate list items (<ul> and <ol> require <li>; <dl> requires <dt> and <dd>), and so on.

The other problem i want to make the theme dynamic so it's friendly with all screen resolutions and doesn't stretch on smaller screens. Here is the global.css


@charset "utf-8";
/* CSS BlackEvo4 by: cwis */
body {
	background-color: #000000;
	line-height: 1.4;
	margin: 0;
	padding: 0;
	background-image: #000000;
	background-repeat: repeat;
	background-position: center top;
	
	color: #a2a2a2;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}

a:link {
	color: #81bf29;
	text-decoration: none;
}

a:visited {
	text-decoration: none;
	color: #81bf29;
}

a:hover, a:active {
	color: #369f98;
	text-decoration: underline;
}

#wrapper {
	width: 1020px;
	padding: 0;
	background-color: #121212;
	border-right-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #2b2b2b;
	border-left-color: #2b2b2b;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	height: auto;
}

#logo {
	
	height: 74px;
	text-align: left;
	margin: 0;
	padding: 0 15px 10px 15px;
}

.logo {
	width: 500px;
	height: 74px;
	position: absolute;
	margin-top: 15px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
}

#navbar {
	background: url(images/blackevo4-nature/navx.png) repeat-x;
	height: 32px;
	margin: 0;
	padding: 0;
	line-height: 32px;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #2b2b2b;
	border-bottom-color: #2b2b2b;
	text-align: center;
	
	width: 100%;
	font-family: Arial, Sans-serif;
	font-size: 12px;
	font-weight: bold;
}

#nav {
	
	list-style: none;
	float: left;
	margin: 0;
	padding: 0;
	text-align: center;
}

#nav a {
	color: #EEE;
	text-decoration: none;
	display: block;
	float: left;
	margin: 0;
	padding: 0 24px 0 24px;
}

#nav a:hover {
	color: #81bf29;
	text-decoration: none;
	background-image: url(images/blackevo4-nature/navhover.png);
	background-repeat: no-repeat;
	background-position: center bottom;
}

#nav a.current {
	color: #81bf29;
	background-image: url(images/blackevo4-nature/navhover.png);
	background-repeat: no-repeat;
	background-position: center bottom;
}

#nav li {
	display: inline;
	margin: 0;
	padding: 0;
}

#contentwrap {
}

#btmnav {
	
	height: 30px;
	clear: both;
	background-image: url(images/blackevo4-nature/thead_bg.gif);
	background-repeat: repeat-x;
}

.btmnav {
	line-height: 30px;
	font-size: 12px;
	margin: 0 15px;
	text-align: left;
}

#footer {
	height: 25px;
	clear: both;
	background-repeat: repeat-x;
	line-height: 25px;
	background-image: url(images/blackevo4-nature/footer.gif);
	background-position: left;
	
	color: white;
	width: 100%;
}

.footertext {
	line-height: 25px;
	font-size: 11px;
	margin: 0 15px;
	text-align: center;
	display: inline;
}

#footer a {
	color: #FCFCFC;
	border-bottom: 1px dashed #FCFCFC;
	text-decoration: none;
}

#footer a:visited {
	color: #FCFCFC;
	border-bottom: 1px dashed #FCFCFC;
	text-decoration: none;
}

#footer a:hover {
	color: white;
	text-decoration: underline;
	border: none;
}

#container {
	
	color: #a2a2a2;
	margin: auto auto;
	padding: 0 20px 20px 20px;
	text-align: left;
	background-color: #121212;
}

.menu ul {
	text-align: center;
	padding: 4px;
	
	color: #000000;
	font-weight: bold;
}

.menu ul a:link {
	color: #000000;
	text-decoration: none;
}

.menu ul a:visited {
	color: #000000;
	text-decoration: none;
}

.menu ul a:hover, .menu ul a:active {
	color: #4874a3;
	text-decoration: none;
}

.topsec {
	margin: 0 0 7px 0;
}

#panel {
	width: auto;
	float: right;
	margin: 0;
	padding: 0;
}

body #panel {
	width: auto;
}

#panelcontent {
	color: #a2a2a2;
	line-height: 17px;
	height: 87px;
	font-size: 11px;
	margin-top: 0;
	margin-right: 15px;
	margin-bottom: 0px;
	margin-left: 15px;
	padding-top: 8px;
	padding-right: 10px;
	padding-bottom: 8px;
	padding-left: 10px;
	border-right-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #000000;
	border-left-color: #000000;
	background-color: #0d0d0d;
	background-image: url(images/blackevo4-nature/panelbg.png);
	background-repeat: repeat-x;
	background-position: bottom;
}

#panel .block {
	margin: 0;
	padding: 5px;
	border: 1px solid #2b2b2b;
	background-color: #121212;
	display: inline-block;
	vertical-align: middle;
	background-image: url(images/blackevo4-nature/navx.png);
	background-repeat: repeat-x;
}

.login {
	background: url(images/blackevo4-nature/toplinks/login.png) no-repeat;
	padding: 0 0 0 18px;
	display: inline-block;
	font-weight: bold;
}

.register {
	background: url(images/blackevo4-nature/toplinks/register.png) no-repeat;
	padding: 0 0 0 18px;
	display: inline-block;
	
	font-weight: bold;
}

.usercp {
	background: url(images/blackevo4-nature/toplinks/usercp.png) no-repeat;
	padding: 0 0 0 18px;
	display: inline-block;
	
	font-weight: bold;
}

.modcp {
	background: url(images/blackevo4-nature/toplinks/modcp.png) no-repeat;
	padding: 0 0 0 18px;
	display: inline-block;
	
	font-weight: bold;
}

.admincp {
	background: url(images/blackevo4-nature/toplinks/admincp.png) no-repeat;
	padding: 0 0 0 18px;
	display: inline-block;
	
	font-weight: bold;
}

.author a {
	font-size: 10px;
	font-weight: bold;
}

.logout {
	background: url(images/blackevo4-nature/toplinks/logout.png) no-repeat;
	padding: 0 0 0 18px;
	display: inline-block;
	
	font-weight: bold;
}

table {
	color: #a2a2a2;
	font-family: Verdana, Arial, Sans-Serif;
	font-size: 13px;
}

.tborder {
	width: 100%;
	margin: auto auto;
	border: 1px solid #202020;
	margin-top: -1px;
	background-color: #000000;
}

.tborder2 {
	width: 100%;
	margin: auto auto;
}

.theadleft {
	background: url(images/blackevo4-nature/thead_left.png) top left no-repeat;
	width: 8px;
	display: inline-block;
	float: left;
	height: 29px;
	margin: 0;
	padding: 0;
}

.theadright {
	background: url(images/blackevo4-nature/thead_right.png) top left no-repeat;
	width: 8px;
	display: inline-block;
	float: right;
	height: 29px;
	margin: 0;
	padding: 0;
}

.theadmain {
	background: url(images/blackevo4-nature/thead_bg.gif) top left repeat-x;
	
	height: 29px;
	line-height: 30px;
	margin: 0 8px 0 8px;
}

.thead {
	color: #ffffff;
}

.thead a:link {
	color: #ffffff;
	text-decoration: none;
}

.thead a:visited {
	color: #ffffff;
	text-decoration: none;
}

.thead a:hover, .thead a:active {
	color: #81bf29;
	text-decoration: underline;
}

.tcat {
	color: #3d3b35;
	font-size: 12px;
	background-color: #0d0d0d;
}

.tcat a:link {
	color: #3d3b35;
}

.tcat a:visited {
	color: #3d3b35;
}

.tcat a:hover, .tcat a:active {
	color: #81bf29;
}

.trow1 {
	background-color: #0a0a0a;
	background-image: url(images/blackevo4-nature/trow_bg.gif);
	background-repeat: repeat-x;
	background-position: bottom;
}

.trow2 {
	background-color: #0a0a0a;
	background-image: url(images/blackevo4-nature/trow_bg.gif);
	background-repeat: repeat-x;
	background-position: bottom;
}

.trow_shaded {
	background: #ffdde0;
}

.trow_selected td {
	background: #FFFBD9;
}

.trow_sep {
	color: #3d3b35;
	background-color: #0a0a0a;
	border-bottom-width: 8px;
	border-bottom-style: solid;
	border-bottom-color: #369f98;
	border-top-width: 1px;
	border-right-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-left-style: solid;
	border-top-color: #369f98;
	border-right-color: #369f98;
	border-left-color: #369f98;
}

.tfoot {
	color: #ffffff;
	background-color: #232323;
	background-image: url(images/blackevo4-nature/thead_bg.gif);
	background-repeat: repeat-x;
	background-position: left top;
}

.tfoot a:link {
	color: #ffffff;
	text-decoration: none;
}

.tfoot a:visited {
	color: #ffffff;
	text-decoration: none;
}

.tfoot a:hover, .tfoot a:active {
	color: #ffffff;
	text-decoration: underline;
}

.bottommenu {
	background: #efefef;
	color: #000000;
	border: 1px solid #4874a3;
	padding: 10px;
}

.navigation {
	color: #a2a2a2;
	font-size: 11px;
	font-weight: bold;
}

.navigation a:link {
	text-decoration: none;
}

.navigation a:visited {
	text-decoration: none;
}

.navigation a:hover, .navigation a:active {
	text-decoration: none;
}

.navigation .active {
	color: #a2a2a2;
	font-size: 13px;
	font-weight: bold;
}

.activebit {
	width: 15px;
	height: 15px;
	display: inline-block;
	background-image: url(images/blackevo4-nature/nav_bit.gif);
	background-repeat: no-repeat;
}

.smalltext {
	font-size: 11px;
}

.largetext {
	font-size: 20px;
}

input.textbox {
	color: #a2a2a2;
	border: 1px solid #000000;
	padding: 1px;
	background-color: #202020;
	background-image: url(images/blackevo4-nature/input-bg.png);
	background-repeat: repeat-x;
}

input.textbox:hover {
	border: 1px solid #369f98;
}

textarea {
	background: #202020;
	color: #a2a2a2;
	border: 1px solid #000000;
	padding: 2px;
	line-height: 1.4;
	font-size: 13px;
}

select {
	color: #a2a2a2;
	border: 1px solid #000000;
	padding: 1px;
	background-color: #202020;
	background-image: url(images/blackevo4-nature/input-bg.png);
	background-repeat: repeat-x;
}

.editor {
	background: #121212;
	border: 1px solid #000;
}

.editor_control_bar {
	background: #121212;
	border: 1px solid #000;
}

.autocomplete {
	background: #fff;
	border: 1px solid #000;
	color: black;
}

.autocomplete_selected {
	background: #adcee7;
	color: #000;
}

.popup_menu {
	background: #ccc;
	border: 1px solid #000;
}

.popup_menu .popup_item {
	background: #fff;
	color: #000;
}

.popup_menu .popup_item:hover {
	background: #C7DBEE;
	color: #000;
}

.trow_reputation_positive {
	background: #ccffcc;
}

.trow_reputation_negative {
	background: #ffcccc;
}

.reputation_positive {
	color: green;
}

.reputation_neutral {
	color: #444;
}

.reputation_negative {
	color: red;
}

.invalid_field {
	border: 1px solid #f30;
	color: #f30;
}

.valid_field {
	border: 1px solid #0c0;
}

.validation_error {
	background: url(images/blackevo4-nature/invalid.gif) no-repeat center left;
	color: #f30;
	margin: 5px 0;
	padding: 5px;
	font-weight: bold;
	font-size: 11px;
	padding-left: 22px;
}

.validation_success {
	background: url(images/blackevo4-nature/valid.gif) no-repeat center left;
	color: #00b200;
	margin: 5px 0;
	padding: 5px;
	font-weight: bold;
	font-size: 11px;
	padding-left: 22px;
}

.validation_loading {
	background: url(images/blackevo4-nature/spinner.gif) no-repeat center left;
	color: #555;
	margin: 5px 0;
	padding: 5px;
	font-weight: bold;
	font-size: 11px;
	padding-left: 22px;
}

/* Additional CSS (Master) */
img {
	border: none;
}

.clear {
	clear: both;
}

.hidden {
	display: none;
	float: none;
	width: 1%;
}

.float_left {
	float: left;
}

.float_right {
	float: right;
}

.menu ul {
	list-style: none;
	margin: 0;
}

.menu li {
	display: inline;
	padding-left: 5px;
}

.menu img {
	padding-right: 5px;
	vertical-align: top;
}

#panel .links {
	margin: 0;
	float: right;
}

.expcolimage {
	width: auto;
	float: right;
	vertical-align: middle;
	margin-top: 8px;
}

img.attachment {
	border: 1px solid #E9E5D7;
	padding: 2px;
}

hr {
	background-color: #000000;
	color: #000000;
	height: 1px;
	border: 0px;
}

#copyright {
	font: 11px Verdana, Arial, Sans-Serif;
	margin: 0;
	padding: 10px 0 0 0;
}

#debug {
	float: right;
	text-align: right;
	margin-top: 0;
}

blockquote {
	border: 1px solid #2b2b2b;
	margin: 0;
	padding: 4px;
	background-color: #121212;
}

blockquote cite {
	font-style: normal;
	display: block;
	background-color: #0a0a0a;
	font-family: "Times New Roman", Times, serif;
	padding: 3px;
	margin-top: 4px;
	margin-right: 0;
	margin-bottom: 4px;
	margin-left: 0;
	border: 1px solid #202020;
}

blockquote cite span {
	float: right;
	font-weight: normal;
}

.codeblock {
	border: 1px solid #000000;
	padding: 4px;
	background-color: #202020;
}

.codeblock .title {
	font-weight: bold;
	margin: 4px 0;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #81bf29;
}

.codeblock code {
	overflow: auto;
	height: auto;
	max-height: 200px;
	display: block;
	font-family: Monaco, Consolas, Courier, monospace;
	font-size: 13px;
}

.subforumicon {
	border: 0;
	vertical-align: middle;
}

.separator {
	margin: 5px;
	padding: 0;
	height: 0px;
	font-size: 1px;
	list-style-type: none;
}

form {
	margin: 0;
	padding: 0;
}

.popup_menu .popup_item_container {
	margin: 1px;
	text-align: left;
}

.popup_menu .popup_item {
	display: block;
	padding: 3px;
	text-decoration: none;
	white-space: nowrap;
}

.popup_menu a.popup_item:hover {
	text-decoration: none;
}

.autocomplete {
	text-align: left;
}

.subject_new {
	font-weight: bold;
}

.highlight {
	background: #FFFFCC;
	padding: 3px;
}

.pm_alert {
	background: #FFF6BF;
	border: 1px solid #FFD324;




	text-align: center;
	padding: 5px 20px;
	font-size: 11px;
}

.red_alert {
	background: #FBE3E4;
	border: 1px solid #A5161A;
	color: #A5161A;
	text-align: center;
	padding: 5px 20px;
	font-size: 11px;
}

.high_warning {
	color: #CC0000;
}

.moderate_warning {
	color: #F3611B;
}

.low_warning {
	color: #AE5700;
}

div.error {
	padding: 5px 10px;
	border-top: 2px solid #FFD324;
	border-bottom: 2px solid #FFD324;
	background: #FFF6BF;
	font-size: 12px;
	color: #000000;
}

div.error p {
	margin: 0;
	color: #000;
	font-weight: normal;
}

div.error p em {
	font-style: normal;
	font-weight: bold;
	padding-left: 24px;
	display: block;
	color: #C00;
	background: url(images/blackevo4-nature/error.gif) no-repeat 0;
}

div.error.ul {
	margin-left: 24px;
}

.online {
	color: #15A018;
}

.offline {
	color: #C7C7C7;
}

.pagination {
	font-size: 11px;
	padding-top: 10px;
	margin-bottom: 5px;
}

.tfoot .pagination, .tcat .pagination {
	padding-top: 0;
}

.pagination .pages {
	font-weight: bold;
}

.pagination .pagination_current, .pagination a {
	padding: 2px 6px;
	margin-bottom: 3px;
}

.pagination a {
	border: 1px solid #81A2C4;
}

.pagination .pagination_current {
	background: #F5F5F5;
	border: 1px solid #81A2C4;
	font-weight: bold;
}

.pagination a:hover {
	background: #F5F5F5;
	text-decoration: none;
}

.thread_legend, .thread_legend dd {
	margin: 0;
	padding: 0;
}

.thread_legend dd {
	padding-bottom: 4px;
	margin-right: 15px;
}

.thread_legend img {
	margin-right: 4px;
	vertical-align: bottom;
}

.forum_legend, .forum_legend dt, .forum_legend dd {
	margin: 0;
	padding: 0;
}

.forum_legend dd {
	float: left;
	margin-right: 10px;
	line-height: 50px;
}

.forum_legend dt {
	margin-right: 10px;
	float: left;
}

.success_message {
	color: #00b200;
	font-weight: bold;
	font-size: 10px;
	margin-bottom: 10px;
}

.error_message {
	color: #C00;
	font-weight: bold;
	font-size: 10px;
	margin-bottom: 10px;
}

.post_body {
	padding: 5px;
}

.post_content {
	padding: 5px 10px;
}

.quick_jump {
	background: url(images/blackevo4-nature/jump.gif) no-repeat 0;
	width: 13px;
	height: 13px;
	padding-left: 13px; /* amount of padding needed for image to fully show */
	vertical-align: middle;
	border: none;
}

/* IE6 css fixer v0.1 alpha: Tue, 14 Apr 2009 15:52:01 +0200 */

/* ============================================= */
/* safe settings                                 */

/* add display:inline to floated elements */
#nav,
#nav a,
#panel,
.theadleft,
.theadright,
.float_left,
.float_right,
#panel .links,
.expcolimage,
#debug,
blockquote cite span,
.forum_legend dd,
.forum_legend dt {
display:inline;
}

what do i need to edit,
post back using the code tags. +1 for each problem solved.

Alan S.

2010-08-19, 03:59 PM
To make the theme fluid width change the width to a % in #wrapper

#wrapper {
    width: 1020px;
    padding: 0;
    background-color: #121212;
    border-right-width: 1px;
    border-left-width: 1px;
    border-right-style: solid;
    border-left-style: solid;
    border-right-color: #2b2b2b;
    border-left-color: #2b2b2b;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    height: auto;
}

Ants

2010-08-19, 04:09 PM
(2010-08-19, 03:59 PM)AJS Wrote: [ -> ]To make the theme fluid width change the width to a % in #wrapper

#wrapper {
    width: 1020px;
    padding: 0;
    background-color: #121212;
    border-right-width: 1px;
    border-left-width: 1px;
    border-right-style: solid;
    border-left-style: solid;
    border-right-color: #2b2b2b;
    border-left-color: #2b2b2b;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    height: auto;
}

I was looking at #container
will this make it good for all screen resolutions? I will play around with it some more.
width: auto;

Alan S.

2010-08-19, 04:17 PM
I think this should work for the wrapper, there were some uneccessary lines in there:

#wrapper {
    width: 100%;
    padding: 0;
    background-color: #121212;
    border-right: 1px solid #2b2b2b;
    border-left: 1px solid #2b2b2b;
    margin: 0 10px;
    height: auto;
}

You need to change the fixed width in the wrapper or changing the container will only change what happens within that fixed width.

Ants

2010-08-19, 04:22 PM
(2010-08-19, 04:17 PM)AJS Wrote: [ -> ]I think this should work for the wrapper, there were some uneccessary lines in there:

#wrapper {
    width: 100%;
    padding: 0;
    background-color: #121212;
    border-right: 1px solid #2b2b2b;
    border-left: 1px solid #2b2b2b;
    margin: 0 10px;
    height: auto;
}

You need to change the fixed width in the wrapper or changing the container will only change what happens within that fixed width.

Ok,
I will fiddle around with it some more.
MyBB Community Forums > Community Archive > Archived Forums > Archived Development and Support > MyBB 1.4 > MyBB 1.4 General Support > dynamic theme + w3c validation 5 Error(s)