SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Addict
    Join Date
    Jan 2005
    Location
    Paris
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Optimizing Style Sheets

    How do i optimize a stylesheet so it is as small as possible and clear to read as possible and of course is it important to validate a stylesheet? cause i see people insisiting on web page validation but too much on css validation?
    On a PHP/Java/XML/Javascript/MySQL internship right now!

  2. #2
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Perhaps you could give us one of yours to look at? Then we could give you specific advice rather than going over the basic stuff which you probably know already.

    For me, flexibility, readability and organisation have always preceded file-size with CSS. The file is normally cached anyway. No biggie.

  3. #3
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's an actual stylesheet I used while helping someone on another site re-code theirs. I won't say who I helped, provide the actual XHTML code, or say which site it is, but you should be able to notice that I have everything in sections, and the classes and IDs I use are easily recognizable. If something is a footer, I'll call it a footer. If it's a sidebar, I'll call it a sidebar. I won't use classes or IDs like style1 or c1, for example (note: three IDs were changed when pasting this stylesheet since the actual name was used--please forgive me ). It's called semantics . You'll also notice how the various sections are indented. This way I know where a particular style rule belongs.
    Code:
       * {
       	border: 0;
       	margin: 0;
       	padding: 0;
       }
       body {
       	background-color: #FFFFFF;
       	border: 1px solid #000000;
       	color: #000000;
       	font: 16px/1.2em Arial, Verdana, Helvetica, sans-serif;
       	margin: 10px 0 10px 10px;
       	width: 750px;
       }
       abbr, acronym {
       	border-bottom: 1px dotted #000000;
       }
       p {
       	padding: 8px;
       	text-indent: 1.5em;
       }
       .alt {
       	visibility: hidden;
       }
       #container {
       	background-color: #C8BDA3;
       	color: inherit;
       }
       #header {
       	background-color: #FFFFFF;
       	border-bottom: 1px solid #000000;
       	color: inherit;
       	height: 150px;
       }
       	#logo {
       		background-image: url(/images/logo.png);
       		background-position: top left;
       		background-repeat: no-repeat;
       		float: left;
       		height: 100px;
       		margin-top: 10px;
       		margin-left: 10px;
       		width: 100px;
       	}
       	#header span {
       		display: block;
       	}
       		#IDchangedToProtectIdentity1 {
       			font-size: 20px;
       			font-variant: small-caps;
       			font-weight: bold;
       			position: absolute;
       			top: 35px;
       			left: 135px;
       		}
       		#IDchangedToProtectIdentity2 {
       			font-size: 20px;
       			font-variant: small-caps;
       			font-weight: bold;
       			position: absolute;
       			top: 60px;
       			left: 145px;
       		}
       		#IDchangedToProtectIdentity3 {
       			font-size: 20px;
       			font-variant: small-caps;
       			font-weight: bold;
       			position: absolute;
       			top: 85px;
       			left: 135px;
       		}
       	#pathways {
       		background-image: url(/images/pathways.png);
       		background-position: top-left;
       		background-repeat: no-repeat;
       		float: right;
       		height: 100px;
       		margin-top: 5px;
       		margin-right: 5px;
       		width: 267px;
       	}
       	
       #navigation {
       	background-color: #7B6C48;
       	color: #FFFFFF;
       	position: absolute;
       	top: 135px;
       	left: 16px;
       	width: 740px;
       }
       	#menu {
       		background-color: #7B6C48;
       		border-bottom: 1px solid #FFFFFF;
       		color: #FFFFFF;
       		float: left;
       		font: 12px/1.2em Arial, Verdana, Helvetica, sans-serif;
       		list-style: none;
       		width: 100%;
       	}
       	#menu a {
       		width: auto;
       		display: block;
       		padding: 3px 8px;
       		text-decoration: none;
       		font-weight: normal;
       		border-right: 1px solid #006400;
       		border-bottom: 1px solid #006400;
       		border-top: 1px solid #006400;
       		border-left: 1px solid #006400;
       	}
       	#menu li {
       		float: left;
       		list-style-type: none;
       		white-space: nowrap;
       	}
       	#menu li:hover ul, #menu li.over ul {
       		display: block;
       	}
       	#menu li ul {
       		position: absolute;
       		display: none;
       		border: 1px solid #009888;
       		z-index: 5;
       	}
       	#menu li ul li {
       		display: block;
       		width:100%;
       	}
       	#menu li ul li a {
       		padding: 4px 8px;
       		height: 1.25em;
       	}
       	#menu a:link, #menu a:visited {
       		background-color: #7B6C48;
       		color: #FFFFFF;
       	}
       	#menu ul li a:link, #menu ul li a:visited {
       		background-color: #FAFAD2;
       		color: #7B6C48;
       	}
       	
       	#menu li ul li:hover ul, #menu li ul li.menuHover ul {
       		visibility: visible;
       	}
       	#menu .about {
       		width: 8em;
       	}
       	#menu .trails {
       		width: 10.5em;
       	}
       	#menu .members {
       		width: 8.5em;
       	}
       	#menu .store {
       		width: 7.5em;
       	}
       	#menu .links {
       		width: 9.5em;
       	}
       
       #pgImg {
       	background-color: #FFFFFF;
       	color: inherit;
       	padding-top: 5px;
       }
       #pgImg img {
        	display: block;
       	width: 100%;
       }
       
       #home #sidebar {
       	float: left;
       }
       #sidebar {
       	background-color: #FFFFFF;
       	border-right: 1px solid #000000;
       	color: inherit;
       	font-size: 90%;
       	padding-top: 4px;
       	width: 200px;
       }
       	#sidebar h2 {
       		display: none;
       	}
       	#sidebar h3 {
       		background-color: #FFFFFF;
       		border-top: 1px solid #000000;
       		border-bottom: 1px solid #000000;
       		color: #006400;
       		font-size: 95%;
       		margin-left: auto;
       		margin-right: auto;
       		padding-left: 8px;
       		text-align: center;
       		width: 180px;
       	}
       	#sidebar p {
       		padding: 0 0 4px 8px;
       		text-indent: 0;
       	}
       	#sidebar span {
       		background-color: #FFFFFF;
       		color: #FF0000;
       		font-weight: bold;
       	}
       	#sidebar ul {
       		list-style: none;
       		margin-left: 1px;
       	}
       	#sidebar li {
       		padding: 4px 8px;
       	}
       
       #home #content {
       	margin-left: 200px;
       }
       #content {
       	border-left: 1px solid #000000;
       }
       	#content h2 {
       		padding: 4px 8px;
       	}
       	#content ul {
       		margin-left: auto;
       		margin-right: auto;
       		padding: 4px 8px;
       	}
       	#objectives li {
       		margin-left: 30px;
       	}
       	#externals {
       		border-top: 1px solid #000000;
       		border-bottom: 1px solid #000000;
       		list-style: none;
       		padding: 0;
       		text-align: center;
       		width: 90%;
       	}
       	#externals li {
       		display: inline;
       	}
       	.stats {
       		font-size: 10px;
       		margin: 0;
       		padding: 0;
       		text-align: center;
       	}
       
       #footer {
       	background-color: #FFFFFF;
       	border-top: 1px solid #000000;
       	clear: left;
       	color: #C8BDA3;
       	font-size: 80%;
       	font-weight: bold;
       	text-align: center;
       }
       	#footer span {
       		display: block;
       	}

  4. #4
    SitePoint Addict
    Join Date
    Jan 2005
    Location
    Paris
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It is the CSS for a phpbb forum that i am starting!


    Code:
    /* main selectors */
    #forum {
    	background-color: #FFFFFF;
    	border: solid 1px #73971B;
    	border-width: 1px;
    	margin: 0;
    	padding: 0;
    	width: 590px;
    }
    
    #acp, #forum, p, td, th {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	color: #000;
    }
    
    #forum p {
    	margin: 0;
    	text-align: left;
    }
    
    #content {
    	padding: 2px 7px 5px 7px;
    	text-align: center;
    }
    
    table, img {
    	border: 0;
    }
    
    form {
    	display: inline;
    }
    
    label {
    	color: #333;
    }
    label:hover {
    	color: #595959;
    }
    
    a, a:visited {
    	color: #DA5D09;
    	text-decoration: underline;
    }
    
    a:hover, a:active { color: #308395; }
    
    .gen { font-size: 12px; }
    .genmed { font-size: 11px; }
    .gensmall { font-size: 10px; }
    
    .error-message {
    	font-size: 12px;
    	color: #FF1010;
    	font-weight: bold;
    }
    
    /* header */
    .forum-header {
    	background: #FFFFFF;
    	padding: 0;
    }
    
    .forum-buttons {
    	text-align: center;
    	font-size: 11px;
    	color: #DA5D09;
    	background: #FFF;
    	border-top: solid 1px #73971B;
    	border-bottom: solid 1px #73971B;
    	height: 20px;
    }
    * html .forum-buttons { height: 18px; }
    
    .forum-buttons a, .forum-buttons a:visited {
    	color: #DA5D09;
    	text-decoration: none;
    	margin: 0 3px;
    }
    
    .forum-buttons a:hover, .forum-buttons a:active {
    	color: #308395;
    	text-decoration: none;
    }
    
    .header-search { padding: 5px; }
    
    /* footer */
    #copyright {
    	padding: 7px;
    	text-align: center;
    	background: #fff;
    	border-bottom: solid 2px #73971B;
    	border-top: solid 1px #73971B;
    	font-size: 9px;
    	color: #808080;
    }
    
    #copyright a, #copyright a:visited {
    	color: #DA5D09;
    	text-decoration: none;
    }
    
    #copyright a:hover, #copyright a:active {
    	color: #308395;
    	text-decoration: none;
    }
    
    
    .admin-link a, .admin-link a:visited { 
    	font-size: 11px;
    	font-weight: bold;
    	line-height: 20px;
    	text-decoration: underline;
    }
    .admin-link a:hover, .admin-link a:active {
    	text-decoration: underline;
    }
    
    /* main tables/divs */
    .forumline {
    	border: solid 1px #FFF;
    	margin: 5px 0;
    	background-color: #FFF;
    }
    
    .forumline2 {
    border: solid 1px #73971B;
    }
    
    
    
    .no-width { margin: 5px auto; }
    
    .forumline td { padding: 2px; }
    
    .row1, .row2, .row3, .row4, .row1h, .row1h-new, .row2h, .row3h, .row1hHover, .row1h-newHover {
    	background-color: #F8F8F8;
    	border: solid 1px #73971B;
    	text-align: left;
    }
    
    .row1h:hover, .row1hHover { 
    	background: #F0F0F0;
    }
    .row1h-new:hover, .row1h-newHover {
    	background: #F0F0F0;
    }
    
    .forumline div.row1, .forumline p.row1 { text-align: left; padding: 3px; }
    
    .row1g, .row1g-left, .row1g-left-top {
    	background: #FFF;
    	border: solid 1px #73971B;
    	vertical-align: middle;
    	text-align: center;
    }
    
    .row1g-left, .row1g-left-top {
    	text-align: left;
    }
    
    .row1g-left-top {
    	vertical-align: top;
    }
    
    .forumline th {
    	background: #FFF;
    	color: #308395;
    	font-weight: bold;
    	font-size: 11px;
    	height: 24px;
    	padding: 0 5px;
    	border: solid 1px #73971B;
    	white-space: nowrap;
    }
    
    .forumline .row-forum {
    	padding: 1px 2px 2px 2px;
    }
    
    .forumline .no-padding {
    	padding: 0;
    }
    
    .forumline .row-header {
    	background: #73971B;
    	border: solid 1px #73971B;
    	padding: 0;
    	text-align: left;
    	vertical-align: top;
    	height: 27px;
    }
    
    .forumline p.row-header { height: 25px; }
    
    .forumline .row-header span {
    	background: #308395;
    	padding-left: 17px;
    	color: #FFFFFF;
    	display: block;
    	padding-top: 4px;
    	font-weight: bold;
    	font-size: 11px;
    	line-height: 1.2em;
    }
    
    .row-header a, .row-header a:visited {
    	color: #ffffff;
    	text-decoration: underline;
    }
    
    .row-header a:hover, .row-header a:active {
    	color: #C8D0EB;
    	text-decoration: underline;
    }
    
    /* shortcuts */
    .row-center, .row-center-small {
    	text-align: center;
    	vertical-align: middle;
    }
    
    .row-center-small {
    	font-size: 10px;
    }
    
    .catBottom, .cat, .catLeft, .catRight {
    	background: #FDFDFD;
    	text-align: center;
    	border: solid 1px #73971B;
    	height: 28px;
    	min-height: 28px;
    }
    
    .forumline td.catBottom { padding: 1px; }
    
    .spaceRow {
    	background: #3D4E81;
    	border: solid 1px #73971B;
    	height: 3px;
    	padding: 0;
    }
    
    .forumline td.spaceRow { padding: 0; }
    
    .empty-table td {
    	padding: 3px 0;
    }
    
    .poll-table td {
    	padding: 3px 10px;
    	text-align: left;
    	font-size: 11px;
    }
    
    /* navigation */
    .nav-header {
    	background-image: #000;
    	color: #888888;
    	font-size: 12px;
    	font-weight: bold;
    	text-align: left;
    	padding: 4px 5px;
    }
    
    .nav-links {
    	color: #888888;
    	text-align: right;
    	background: #FFF;
    	padding: 3px 5px;
    	font-size: 10px;
    	line-height: 1.4em;
    }
    
    .nav-links-left {
    	position: relative;
    	float: left;
    	text-align: left;
    }
    
    .nav-header, .nav-links {
    	border: solid 1px #73971B;
    
    }
    
    .nav-div a, .nav-div a:visited {
    	color: #DA5D09;
    	text-decoration: none;
    }
    
    .nav-div a:hover, .nav-div a:active {
    	color: #308395;
    	text-decoration: none;
    }
    
    .nav-links a, .nav-links a:visited { text-decoration: underline; }
    
    .nav-div a.nav-current, .nav-div a.nav-current:visited {
    	color: #73971B;
    }
    
    .nav-div a.nav-current:hover, .nav-div a.nav-current:active {
    	color: #308395;
    	text-decoration: none;
    }
    
    
    /* forum index */
    .forumlink, .forumlink-new {
    	font-size: 11px;
    	font-weight: bold;
    	line-height: 1.3em;
    }
    a.forumlink, a.forumlink:visited { text-decoration: none; }
    a:forumlink:hover, a:forumlink:active { text-decoration: underline; }
    
    a.forumlink-new, a.forumlink-new:visited { 
    	text-decoration: none; 
    	color: #73971B;
    }
    a:forumlink-new:hover, a:forumlink-new:active { 
    	text-decoration: underline;
    	color: #308395;
    }
    
    .moderators {
    	font-size: 10px;
    	color: #6E6E6E;
    }
    
    .moderators a, .moderators a:visited {
    	color: #73971B;
    	text-decoration: underline;
    }
    
    .moderators a:hover, .moderators a:active {
    	color: #308395;
    	text-decoration: underline;
    }
    
    /* viewforum */
    .topiclink b, .topiclink-new b { 
    	color: #444;
    	font-size: 11px;
    }
    
    .topiclink a, .topiclink-new a {
    	font-size: 11px;
    	font-weight: bold;
    	text-decoration: none;
    	color: #DA5D09;
    }
    
    .topiclink a:visited {
    	color: #DA5D09;
    	text-decoration: none;
    }
    
    .topiclink a:hover, .topiclink a:active {
    	color: #308395;
    	text-decoration: underline;
    }
    
    .topiclink-new a, .topiclink-new a:visited {
    	text-decoration: none;
    	color: #DCC709;
    }
    .topiclink-new a:hover, .topiclink-new a:active {
    	text-decoration: underline;
    	color: #308395;
    }
    
    
    /* pagination */
    .pagination { 
    	font-size: 11px;
    	line-height: 2em;
    	font-weight: bold; 
    	margin: 0; 
    	margin-top: 5px; 
    	margin-bottom: 3px; 
    }
    .pagination a, .pagination a:visited { 
    	color: #308395;
    	border: #73971B 1px solid;
    	padding: 1px; 
    	background: #FFF;
    }
    .pagination a:hover, .pagination a:active { 
    	color: #308395;
    	border: #73971B 1px solid;
    	padding: 1px; 
    }
    
    .gotopage { 
    	display: block;
    	font-size: 10px;
    	line-height: 2em;
    	margin: 3px 0 1px 0; 
    }
    * html .gotopage { margin-top: 5px; margin-bottom: 2px; }
    .gotopage a, .gotopage a:visited { 
    	color: #DA5D09;
    	border: #73971B 1px solid;
    	padding: 1px; 
    	background: #FFF;
    }
    .gotopage a:hover, .gotopage a:active { 
    	color: #309395;
    	border: #73971B 1px solid;
    	padding: 1px; 
    }
    
    /* post */
    .row-post-author, .row-post {
    	background: #FFF;
    	border: solid 1px #73971B;
    	vertical-align: top;
    	padding: 3px;
    }
    
    .row-post-author {
    	text-align: center;
    	width: 150px;
    }
    
    .row-post {
    	text-align: left;
    }
    
    .post-name {
    	font-weight: bold;
    	color: #308395;
    	font-size: 11px;
    	line-height: 1.6em;
    }
    
    .post-rank {
    	color: #6E6E6E;
    	font-size: 10px;
    }
    
    .post-details {
    	text-align: left;
    	margin: 5px;
    	color: #6E6E6E;
    	font-size: 10px;
    	line-height: 1.4em;
    }
    
    .post-images img {
    	display: block;
    	margin: 1px auto;
    	border: 1px solid #333;
    	border-top: 0;
    }
    
    .post-buttons-top {
    	float: right;
    }
    
    .post-subject {
    	color: #308395;
    	font-weight: bold;
    	font-size: 11px;
    	margin-bottom: 5px;
    }
    
    .post-text {
    	font-size: 11px;
    	line-height: 1.2em;
    }
    
    @media all and (min-width: 0px) {
    	html>body .post-text { 
    		overflow: auto; 
    	}
    }
    
    .row-post-date, .row-post-buttons {
    	border: solid 1px #73971B;
    	vertical-align: middle;
    	font-size: 10px;
    	line-height: 12px;
    	color: #6E6E6E;
    	background: #FFFFFF;
    	white-space: nowrap;
    	padding: 1px;
    }
    
    .row-post-buttons {
    	text-align: left;
    }
    
    .post-buttons a img, .post-buttons a:visited img, .post-buttons-single a img, .post-buttons-single a:visited img {
    	background-color: #FFFFFF;
    }
    
    .post-buttons a:hover img, .post-buttons a:active img, .post-buttons-single a:hover img, .post-buttons-single a:active img {
    	background-color: #FFFFFF;
    }
    
    .post-buttons-single {
    	text-align: center;
    	vertical-align: middle;
    }
    
    .img-main a img, .img-main a:visited img {
    	background-color: #FFFFFF;
    }
    
    .img-main a:hover img, .img-main a:active img {
    	background-color: #FFFFFF;
    }
    
    .post-text blockquote {
    	color: #333;
    	display: block;
    	margin: 5px 20px;
    	width: auto;
    	border: solid 1px #73971B;
    	background: #FFF;
    	padding: 5px;
    	font-size: 10px;
    }
    
    .post-text blockquote h6 {
    	margin: 0;
    	margin-bottom: 5px;
    	padding-left: 18px;
    	padding-bottom: 3px;
    	border-bottom: solid 1px #73971B;
    	font-size: 11px;
    	line-height: 1.2em;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-weight: normal;
    	color: #6E6E6E;
    	background: #FFF;
    }
    
    .post-text .code {
    	color: #6E6E6E;
    	display: block;
    	margin: 5px 20px;
    	width: auto;
    	border: solid 1px #73971B;
    	background-color: #FFF;
    	padding: 5px;
    	font-size: 11px;
    	font-family: Courier, 'Courier New', sans-serif;
    }
    
    .post-text .code h6 {
    	margin: 0;
    	margin-bottom: 5px;
    	padding-left: 18px;
    	padding-bottom: 3px;
    	border-bottom: solid 1px #73971B;
    	font-size: 11px;
    	line-height: 1.2em;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-weight: normal;
    	color: #6E6E6E;
    	background: #FFF;
    }
    
    .signature a {
    font-size: 10px;
    }
    
    
    /* inputs */
    input, select {
    	vertical-align: middle;
    	box-sizing: content-box;
    	-moz-box-sizing: content-box;
    }
    textarea {
    	box-sizing: content-box;
    	-moz-box-sizing: content-box;
    }
    
    input, textarea, select {
    	color: #333;
    	font: normal 11px Verdana, Arial, Helvetica, sans-serif;
    	vertical-align: middle;
    	margin: 0;
    	box-sizing: content-box;
    	-moz-box-sizing: content-box;
    }
    
    .helpline {
    	border: solid 1px #73971B;
    	background-color: #F8F8F8;
    	color: #333;
    }
    
    input.button {
    	background: #FFF;
    	border: solid 1px #308395;
    	border-left-color: #73971B;
    	border-top-color: #73971B;
    	color: #333;
    }
    
    input.button:hover {
    	color: #333;
    	border-color: #73971B;
    }
    
    input.post, textarea, select, input.liteoption {
    	border: solid 1px #73971B;
    	color: #333;
    	background-color: #F8F8F8;
    }
    
    input.mainoption {
    	border: solid 1px #73971B;
    	color: #6E6E6E;
    	background-color: #F8F8F8;
    }
    
    * html input.post, * html textarea, * html select, * html input.liteoption {
    	color: #333;
    	border: solid 1px #73971B;
    }
    * html input.mainoption {
    	color: #333;
    	border: solid 1px #73971B;
    	font-weight: bold;
    }
    
    
    
    input.post:hover, textarea:hover, select:hover, select:focus, input.liteoption:hover, input.mainoption:hover {
    	border: solid 1px #73971B;
    	color: #6E6E6E;
    	background-color: #F0F0F0;
    }
    
    input.post:focus, textarea:focus {
    	border: solid 1px #73971B;
    	color: #333;
    }
    
    input.post:focus, select:focus, input.mainoption:focus, input.liteoption:focus {
    	background: #F0F0F0;
    }
    
    textarea:focus {
    	background-color: #F0F0F0;
    }
    
    select optgroup {
    	background-color: #737373;
    	color: #FFF;
    	font-weight: normal;
    	font-style: normal;
    }
    select option {
    	background-color: #737373;
    	color: #FFF;
    }
    
    /* inputs - fixing height */
    input.mainoption, input.liteoption { height: 18px; }
    * html input.mainoption, * html input.liteoption { height: 20px; }
    
    input.post { height: 16px; }
    @media all and (min-width: 0px) { html>body input.post { height: 18px; } }
    
    select option { height: 15px; }
    
    input.jumpbox { height: 18px; }
    @media all and (min-width: 0px) { html>body input.jumpbox { height: 15px; } }
    * html input.jumpbox { height: 18px; }
    
    /* private message popup */
    .popup, .popuppm { display: none; }
    .popuppm-new {
    	display: block;
    	text-align: center; 
    	margin: 50px;
    }
    .popuppm-new a { 
    	margin: 5px 0; 
    	padding: 40px 60px; 
    	font-size: 12px; 
    	font-weight: bold; 
    	background: #FFF;
    	border: solid 1px #73971B;
    	color: #DA5D09;
    	text-decoration: none;
    }
    .popuppm-new a:hover {
    	color: #308395;
    	text-decoration: underline;
    }
    By the way most of the time i have noticed that in the css validator at w3C.org i get some funny warning like

    : You used the same color for background and borders... Why would i be warned for this, is it unproper to use same color for border and backround standard wise?
    On a PHP/Java/XML/Javascript/MySQL internship right now!

  5. #5
    SitePoint Addict
    Join Date
    Jan 2005
    Location
    Paris
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    continued my research and find this http://www.positioniseverything.net/...icientcss.html all of the tips in this articles might sound basic but for debutant like me it me of the greatest importance...
    On a PHP/Java/XML/Javascript/MySQL internship right now!

  6. #6
    Guru Meditation Error gnarly's Avatar
    Join Date
    Dec 2003
    Location
    Cheltenham, United Kingdom
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You used the same color for background and borders
    I can't see any real problem with that... apart from it being utterly pointless ;-) You won't be able to tell the two apart, so why bother with a border at all?
    Olly Hodgson
    thinkdrastic.net

  7. #7
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by motion-ex
    It is the CSS for a phpbb forum that i am starting!
    The HTML code of phpbb is mostly a mess. Having messy HTML doesn't help if you want to have logical CSS for it.
    Code:
    /* main selectors */
    #forum {
    	background-color: #FFFFFF;
    	border: solid 1px #73971B;
    	border-width: 1px; /* already specified above */
    	/* is #forum a <div>? if so, the next two declarations are probably redundant */
    	margin: 0;
    	padding: 0;
    	width: 590px;
    }
    
    #acp, #forum, p, td, th {
    	/* 'font-*' properties and 'color' are inherited by default, so only specify them on the most ancestor element wanted (if you want it for the whole page, specify it for <html>) */
    	/* although ie5 and ie6..7 in quirks mode have a bug that color and font-size aren't inherited to tables... */
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 11px; /* ie users can't resize this text, use ems or % instead */
    	color: #000;
    }
    
    #forum p {
    	margin: 0;
    	text-align: left; /* is this necessary? */
    }
    
    #content {
    	padding: 2px 7px 5px 7px; /* equivalent to padding:2px 7px 5px; */
    	text-align: center;
    }
    
    table, img {
    	border: 0; /* tables don't have borders by default */
    }
    
    form {
    	display: inline; /* why? to get rid of margins? */
    }
    
    label {
    	color: #333;
    }
    label:hover {
    	color: #595959;
    }
    
    a, a:visited { /* why a:visited? */
    	color: #DA5D09;
    	text-decoration: underline;
    }
    
    a:hover, a:active { color: #308395; } /* a:focus? */
    
    /* again, avoid pixels for font-size */
    .gen { font-size: 12px; }
    .genmed { font-size: 11px; }
    .gensmall { font-size: 10px; }
    
    .error-message {
    	font-size: 12px;
    	color: #FF1010;
    	font-weight: bold;
    }
    /* ok, i'll stop here */
    In general, the best you can do to optimize CSS is to have a better understanding of how it works (e.g. inheritance and cascade), and having good HTML for which the CSS is intended for. Make sure to have a doctype in your HTML that triggers full standards mode in browsers.
    Simon Pieters

  8. #8
    SitePoint Member animaye's Avatar
    Join Date
    Jul 2006
    Location
    Ohio
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb

    Quote Originally Posted by gnarly
    I can't see any real problem with that... apart from it being utterly pointless ;-) You won't be able to tell the two apart, so why bother with a border at all?
    here's the only reason i can think of, and probably only because i've just recently used it. you can view the file in i'm talking about at http://www.greenleafprinting.com/cdx...ian/index.html.

    when i added my (transparency enabled) image to the header, i wanted it on top of a blueish background, with the same blueish color as the border on the bottom to cause a seperation of the header from the rest of the page (without there actually being a *seperation*).

    in this example, the outside border of the content area is set on the container element, and my inside boxes have no border, unless i specified it (the top box has a border on the bottom, the actual *content* (on the left) is in a box with a border on the right (to be enable it to expand that border as far as the *content* goes and tie into the border on the bottom), no borders at all on the far right column, and a border on the top of the bottom box.)

    now, it's very true that i could have added the border to the top of both the left and right column (and the bottom, for that bottom border), but why add it to two seperate selectors when you can achieve the same effect with only one? it's still valid css with warnings such as that.

    it's also true that i could've used a .gif (or .jpg) with no transparency, already on the blueish background that i wanted but, in my experience, there is usually a discrepency in the output colors and it doesnt match exactly.
    Last edited by animaye; Jul 25, 2006 at 15:13. Reason: typos!

  9. #9
    Guru Meditation Error gnarly's Avatar
    Join Date
    Dec 2003
    Location
    Cheltenham, United Kingdom
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Fair enough, that's not a scenario i'd thought of.

    There's usually a very good reason for them to put warnings like that in there though, so I wonder if there's some other reason I've not considered?
    Olly Hodgson
    thinkdrastic.net


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •