I hate CSS
It's designed by software engineers, who think like software engineers. The most basic layout is so fucking difficult to do and fragile once it's done, I sometimes think the whole thing was just a way of getting at designers for monkeying with code.
/* { margin:0px; padding 0px; outline:solid thin red;} */
/* */
#banner {position:absolute; display:block; right:70px; top:10px; width:468px; height:60px; background-color:gray;}
/* */
a {color:#333; text-decoration:none;}
a:hover {color:black; text-decoration:none;}
a:active {color:white; text-decoration:none;}
a img {border:none;}
.click {color:#333; cursor:pointer;}
.click:hover {color:black;}
html {padding:0px; margin:0px; background:url(../images/bg_stripe.gif) center repeat-y #CDC8BC;}
body {padding:0px; margin:0px; color:#606570; font-size:12px; }
hr {border-top:dotted thin white; border-bottom:none; border-left:none; border-right:none;}
form{display:inline;}
textarea {background-color:inherit; font-size:12px; width:100%; font-family:sans-serif; color:#333; border:solid thin #909499; height:auto;} textarea:focus {color:white; background-color:#909499;}
input {background-color:inherit; color:#333; padding:0px; font-family:sans-serif; border:solid thin #909499; height:auto;} input:focus, input:hover {background-color:#909499; color:white;}
select {background-color:inherit; display:inline; color:#606570; font-family:sans-serif; border:solid thin #909499; height:auto;}
option {color:white; border:none;}
.button {cursor:pointer;}
.button:hover {color:white;}
.deletion_link:hover {color:red; cursor:pointer;}
.edit_rollover {position:absolute; color:#383838; top:0px; right:0px; width:100%; min-height:20px; padding-top:7px; text-align:right;}
.edit_rollover a {color:black; padding:7px;}
.edit_rollover:hover {opacity:0.9; background-color:white;}
.visibility_toggle {position:absolute; color:#383838; top:0px; right:0px; padding:7px;}
.edit_mode {position:absolute; top:0px; left:0px; z-index:2; height:100%; width:100%; display:none; color:#383838; background:url(../images/bg_control.gif) 50% 50% no-repeat white; opacity:0.9; overflow:auto; }
.edit_mode a {z-index:12; color:black; padding:7px;}
.edit_mode textarea {color:#383838;}
.edit_mode textarea:focus {color:white;}
.edit_mode input {color:#383838; padding:3px;}
.edit_mode input:focus {color:white;}
.edit_mode .button {color:black;}
.edit_mode .button:hover {color:red;}
.edit_mode_contents {padding:10px;}
#control_panel {position:absolute; left:50%; top:30px; width:950px; margin-left:-475px; padding:50px 0px 80px 0px; height:100%; color:#383838; opacity:0.9; z-index:2; display:none; background:url(../images/bg_control.gif) 50% 50% no-repeat white;}
#control_links {position:absolute; left:0px; top:0px; padding:30px; width:150px; text-align:right;}
#control_links a {padding:3px;}
.control_links {display:block; margin:0px; width:150px;}
.control_links:hover {background:#ECECEC;}
#controlswapper {position:relative; top:0px; left:220px; width:400px; z-index:4;}
.input_element {margin-top:7px;}
h1 {display:block; color:#606570; font-size:12px;}
.heading {font-weight:bold;}
.untitled {opacity:0.5; font-style:normal;}
.urlname {vertical-align: text-top; font-size:90%;}
.trans_bg_dark {position:absolute; top:0px; left:0px; background-color:#DED9CC; opacity:0.9; width:100%; height:100%; z-index:0;}
.replylinks {position:absolute; bottom:7px; right:7px;}
.menu {text-align:right; line-height:1.3em; padding: 2px 35px 2px 5px;}
.menu:hover {background-image:url(../images/arrow_right.gif); background-position: right center; background-repeat:no-repeat; background-color:#606570; }
.menu:hover a {color:white;}
#header {position:absolute; top:0px; left:0px; margin:0px; width:100%; height:30px; z-index:2; overflow:hidden; }
#header .fg {z-index:3; position:absolute; bottom:0px; left:50%; margin-left:-475px; width:950px;}
#header .bg {opacity:.85; position:absolute; bottom:0px; left:0px; width:100%; height:30px; z-index:-1; border-bottom:solid thin #909499;}
#header #loggedin_string {float:right; position:absolute; bottom:7px; right:200px;} #header #control_buttons {float:right; position:absolute; bottom:-3px; right:10px;}
#footer {position:fixed; bottom:0px; left:0px; width:100%; height:80px; z-index:12; border-top:solid thin #909499;}
#footer .fg {z-index:3; position:absolute; top:0px; left:50%; margin-left:-475px; width:950px;}
#footer .bg {z-index:1; position:absolute; top:0px; left:50%; margin-left:-475px; width:950px; height:80px; background:url(../images/bg_stripe.gif) center repeat-y #CDC8BC; opacity:0.9;}
#top_rated_banner {position:absolute; right:10px; top:15px;}
.footer_object {float:left; height:50px; padding-left:1px;}
#scroller {position:absolute; top:0px; left:0px; width:100%; height:100%; z-index:0;}
#centre {position:absolute; top:0px; left:50%; width:950px; margin:50px 0px 0px -475px; padding-bottom:120px; z-index:3;}
#left {position:absolute; top:0px; left:50px; width:250px; float:left; margin-top:100px;}
.left_section {position:relative; top:0px;left:60px; width:223px; float:left; margin:0px 2px 2px 2px; padding:15px 7px 15px 20px; border:solid thin transparent;}
.left_border {position:absolute; top:0px; left:0px; height:100%; width:14px; border-right:solid thin white;}
#right {position:absolute; left:370px; margin:100px 2px 0px 2px; padding-bottom:100px;}
.right_section {position:relative; min-height:120px; width:510px; float:left; margin-bottom:5px; padding:15px 7px 15px 20px; overflow:visible; border:solid thin transparent;}
.right_border_left {position:absolute; top:0px; left:0px; height:100%; width:14px; border-right:solid thin white;}
#user_info .left_border {background-image:url(../images/userinfo_heading.gif) no-repeat;}
#gallery .right_border_left {background-image:url(../images/gallery_heading.gif); background-repeat:no-repeat;}
#blog .right_border_left {background-image:url(../images/blog_heading.gif); background-repeat:no-repeat;}
#comments .right_border_left {background-image:url(../images/comments_heading.gif); background-repeat:no-repeat;}
#control .right_border_left {background-image:url(../images/comments_heading.gif); background-repeat:no-repeat;}
#points .right_border_left {background-image:url(../images/heading_points.gif); background-repeat:no-repeat;}
#collaborations .right_border_left {background-image:url(../images/heading_collaborations.gif); background-repeat:no-repeat;}
#right_left, #right_right {width:250px; float:left; margin:2px; overflow:hidden; }
#loggedin_string {float:left;}
#loggedin_string_urlname {font-size:90%;}
#userinfo {padding:0px 5px 30px 5px; text-align:right; overflow:visible; }
#userinfo form{text-align:left;}
#userinfo #userinfo_icon {float:left; margin:-16px 0px 0px -91px; width:50px; height:100px; padding:5px; background:#DAD5C8; border:solid thin #909499}
#userinfo_name {font-weight:bold;}
#userinfo_biographybody {text-align:justify;}
.user_cameo {padding:2px; margin:2px; height:54px;}
.user_cameo img {vertical-align:middle; margin-right:5px;}
.user_cameo:hover {background-color:#D3CCC3;}
.blog {padding:7px;}
.blogtitle {font-weight:bold;}
.blogbody {margin:7px 0px 7px 0px;}
#blogtags {font-size:90%;}
#gallery_info {margin:2px 0px 2px 0px; background:#DAD5C8; padding:5px; text-align:right;}
#gallery_title {font-weight:bold;}
.object_title {font-weight:bold; font-style:oblique;}
.object_cameo_small, .objectset_cameo_small {position:relative; height:80px; color:#606570; overflow:hidden;}
.objectset_cameo_small {background:#DAD5C8; margin-bottom:5px;}
.object_cameo_small a, .objectset_cameo_small a {color:#606570;}
.object_cameo_small .object_tiny, .objectset_cameo_small .objectset_tiny {position:absolute; top:5px; right:185px; height:70px; padding:7px; }
.object_cameo_small .object_info, .objectset_cameo_small .objectset_info {position:absolute; top:5px; right:0px; width:175px; height:70px; padding:5px; border-left:solid thin #909499; text-align:left; }
.object_cameo_small .object_title {font-weight:bold; font-style:oblique;}
.objectset_cameo_small .objectset_title {font-weight:bold;}
.object_cameo_small .object_points, .objectset_rating {font-style:oblique; position:absolute; bottom:5px;}
.object_cameo_small .object_description, .objectset_description {height: 1.1em; overflow:hidden;}
.object_cameo_large, .objectset_cameo_large {position:relative; height:140px; color:#606570; overflow:hidden;}
.object_cameo_large a, .objectset_cameo_large a {color:#606570;}
.object_cameo_large .object_small, .object_cameo_large .objectset_tiny {position:absolute; top:5px; right:380px; height:130px; padding:7px; }
.object_cameo_large .object_info, .objectset_cameo_large .objectset_info {position:absolute; top:5px; right:0px; width:366px; height:130px; padding:5px; border-left:solid thin #909499; text-align:left; }
.object_cameo_large .object_title {font-weight:bold; font-style:oblique;}
.object_cameo_large .objectset_title {font-weight:bold;}
.object_cameo_large .object_points, .objectset_cameo_large .objectset_rating {font-style:oblique;}
.object_cameo_large .object_description, .objectset_description {max-height: 4.4em; overflow:hidden; margin:5px 0px 5px 0px;}
.object_info:hover, .objectset_info:hover, #gallery_info:hover, .objectset_cameo_small:hover {background-color:#D3CCC3;}
.set_objects {position:relative; width:250px; float:left;}
.comment_instep {padding-left:10px;}
.comment {position:relative; margin:5px; padding:7px; min-height:100px;}
.comment .replies {bottom:0px; right:0px;}
.comment .comment_icon {position:absolute; top:0px; left:0px; padding:5px; width:50px; height:100px; border:solid thin #909499; background:#DAD5C8;}
.comment .comment_user {float:left; margin-left:60px;}
.comment .comment_link {font-size:9px; position:absolute; right:10px; top:7px;}
.comment .comment_body {clear:both; padding:10px 0px 10px 60px;}
.comment .replies {position:absolute; bottom:7px; right:10px;}
.comment .comment_rating {position:absolute; bottom:7px; left:65px;}
.reply_form {margin-left:20px;}
.comment_form {position:relative; padding-left:65px; height:150px; margin:1px 0px 10px 0px;}
.comment_form_icon {position:absolute; top:0px; left:0px; padding:5px; width:50px; height:100px; border:solid thin #909499; background:#DAD5C8;}
.commentinsertform textarea {display:block; width:100%; height:120px;}
.comment_submit_button {float:right; clear:both;}
#object {position:relative; min-width:600px; padding:15px 7px 15px 20px; overflow:visible;}
#object img {cursor:pointer;}
#object_info {position:relative; width:650px; margin-left:auto; margin-right:auto;}
#object_title {display:block; margin:10px 0px 10px 0px; letter-spacing:.2em;}
#object_points {float:left; width:200px; height:100%;}
#object_users {position:absolute; margin:10px 0px 10px 0px; float:left; width:250px; height:100%;}
#object_description {padding-left:250px; min-height:100px; width:400px;}
#object_tags {padding-left:250px; width:400px;}
/* CONTROL */
#control textarea{width:500px;}
#control div{margin:5px;}
.collaborator_input {display:block; width:500px; clear:both; margin-top:5px;}
.collaborator_input input {width:150px;}
.rheight20 {}
.mark_as_read{text-align:right; padding:5px; background:white}
.notification_wrapper{border:solid thin transparent;}
.notification_wrapper:hover{border:solid thin white;}
I want to start again. It's got so complicated I can't remember why half the stuff is in there. And I haven't even added hacks for different browsers yet.
/* { margin:0px; padding 0px; outline:solid thin red;} */
/* */
#banner {position:absolute; display:block; right:70px; top:10px; width:468px; height:60px; background-color:gray;}
/* */
a {color:#333; text-decoration:none;}
a:hover {color:black; text-decoration:none;}
a:active {color:white; text-decoration:none;}
a img {border:none;}
.click {color:#333; cursor:pointer;}
.click:hover {color:black;}
html {padding:0px; margin:0px; background:url(../images/bg_stripe.gif) center repeat-y #CDC8BC;}
body {padding:0px; margin:0px; color:#606570; font-size:12px; }
hr {border-top:dotted thin white; border-bottom:none; border-left:none; border-right:none;}
form{display:inline;}
textarea {background-color:inherit; font-size:12px; width:100%; font-family:sans-serif; color:#333; border:solid thin #909499; height:auto;} textarea:focus {color:white; background-color:#909499;}
input {background-color:inherit; color:#333; padding:0px; font-family:sans-serif; border:solid thin #909499; height:auto;} input:focus, input:hover {background-color:#909499; color:white;}
select {background-color:inherit; display:inline; color:#606570; font-family:sans-serif; border:solid thin #909499; height:auto;}
option {color:white; border:none;}
.button {cursor:pointer;}
.button:hover {color:white;}
.deletion_link:hover {color:red; cursor:pointer;}
.edit_rollover {position:absolute; color:#383838; top:0px; right:0px; width:100%; min-height:20px; padding-top:7px; text-align:right;}
.edit_rollover a {color:black; padding:7px;}
.edit_rollover:hover {opacity:0.9; background-color:white;}
.visibility_toggle {position:absolute; color:#383838; top:0px; right:0px; padding:7px;}
.edit_mode {position:absolute; top:0px; left:0px; z-index:2; height:100%; width:100%; display:none; color:#383838; background:url(../images/bg_control.gif) 50% 50% no-repeat white; opacity:0.9; overflow:auto; }
.edit_mode a {z-index:12; color:black; padding:7px;}
.edit_mode textarea {color:#383838;}
.edit_mode textarea:focus {color:white;}
.edit_mode input {color:#383838; padding:3px;}
.edit_mode input:focus {color:white;}
.edit_mode .button {color:black;}
.edit_mode .button:hover {color:red;}
.edit_mode_contents {padding:10px;}
#control_panel {position:absolute; left:50%; top:30px; width:950px; margin-left:-475px; padding:50px 0px 80px 0px; height:100%; color:#383838; opacity:0.9; z-index:2; display:none; background:url(../images/bg_control.gif) 50% 50% no-repeat white;}
#control_links {position:absolute; left:0px; top:0px; padding:30px; width:150px; text-align:right;}
#control_links a {padding:3px;}
.control_links {display:block; margin:0px; width:150px;}
.control_links:hover {background:#ECECEC;}
#controlswapper {position:relative; top:0px; left:220px; width:400px; z-index:4;}
.input_element {margin-top:7px;}
h1 {display:block; color:#606570; font-size:12px;}
.heading {font-weight:bold;}
.untitled {opacity:0.5; font-style:normal;}
.urlname {vertical-align: text-top; font-size:90%;}
.trans_bg_dark {position:absolute; top:0px; left:0px; background-color:#DED9CC; opacity:0.9; width:100%; height:100%; z-index:0;}
.replylinks {position:absolute; bottom:7px; right:7px;}
.menu {text-align:right; line-height:1.3em; padding: 2px 35px 2px 5px;}
.menu:hover {background-image:url(../images/arrow_right.gif); background-position: right center; background-repeat:no-repeat; background-color:#606570; }
.menu:hover a {color:white;}
#header {position:absolute; top:0px; left:0px; margin:0px; width:100%; height:30px; z-index:2; overflow:hidden; }
#header .fg {z-index:3; position:absolute; bottom:0px; left:50%; margin-left:-475px; width:950px;}
#header .bg {opacity:.85; position:absolute; bottom:0px; left:0px; width:100%; height:30px; z-index:-1; border-bottom:solid thin #909499;}
#header #loggedin_string {float:right; position:absolute; bottom:7px; right:200px;} #header #control_buttons {float:right; position:absolute; bottom:-3px; right:10px;}
#footer {position:fixed; bottom:0px; left:0px; width:100%; height:80px; z-index:12; border-top:solid thin #909499;}
#footer .fg {z-index:3; position:absolute; top:0px; left:50%; margin-left:-475px; width:950px;}
#footer .bg {z-index:1; position:absolute; top:0px; left:50%; margin-left:-475px; width:950px; height:80px; background:url(../images/bg_stripe.gif) center repeat-y #CDC8BC; opacity:0.9;}
#top_rated_banner {position:absolute; right:10px; top:15px;}
.footer_object {float:left; height:50px; padding-left:1px;}
#scroller {position:absolute; top:0px; left:0px; width:100%; height:100%; z-index:0;}
#centre {position:absolute; top:0px; left:50%; width:950px; margin:50px 0px 0px -475px; padding-bottom:120px; z-index:3;}
#left {position:absolute; top:0px; left:50px; width:250px; float:left; margin-top:100px;}
.left_section {position:relative; top:0px;left:60px; width:223px; float:left; margin:0px 2px 2px 2px; padding:15px 7px 15px 20px; border:solid thin transparent;}
.left_border {position:absolute; top:0px; left:0px; height:100%; width:14px; border-right:solid thin white;}
#right {position:absolute; left:370px; margin:100px 2px 0px 2px; padding-bottom:100px;}
.right_section {position:relative; min-height:120px; width:510px; float:left; margin-bottom:5px; padding:15px 7px 15px 20px; overflow:visible; border:solid thin transparent;}
.right_border_left {position:absolute; top:0px; left:0px; height:100%; width:14px; border-right:solid thin white;}
#user_info .left_border {background-image:url(../images/userinfo_heading.gif) no-repeat;}
#gallery .right_border_left {background-image:url(../images/gallery_heading.gif); background-repeat:no-repeat;}
#blog .right_border_left {background-image:url(../images/blog_heading.gif); background-repeat:no-repeat;}
#comments .right_border_left {background-image:url(../images/comments_heading.gif); background-repeat:no-repeat;}
#control .right_border_left {background-image:url(../images/comments_heading.gif); background-repeat:no-repeat;}
#points .right_border_left {background-image:url(../images/heading_points.gif); background-repeat:no-repeat;}
#collaborations .right_border_left {background-image:url(../images/heading_collaborations.gif); background-repeat:no-repeat;}
#right_left, #right_right {width:250px; float:left; margin:2px; overflow:hidden; }
#loggedin_string {float:left;}
#loggedin_string_urlname {font-size:90%;}
#userinfo {padding:0px 5px 30px 5px; text-align:right; overflow:visible; }
#userinfo form{text-align:left;}
#userinfo #userinfo_icon {float:left; margin:-16px 0px 0px -91px; width:50px; height:100px; padding:5px; background:#DAD5C8; border:solid thin #909499}
#userinfo_name {font-weight:bold;}
#userinfo_biographybody {text-align:justify;}
.user_cameo {padding:2px; margin:2px; height:54px;}
.user_cameo img {vertical-align:middle; margin-right:5px;}
.user_cameo:hover {background-color:#D3CCC3;}
.blog {padding:7px;}
.blogtitle {font-weight:bold;}
.blogbody {margin:7px 0px 7px 0px;}
#blogtags {font-size:90%;}
#gallery_info {margin:2px 0px 2px 0px; background:#DAD5C8; padding:5px; text-align:right;}
#gallery_title {font-weight:bold;}
.object_title {font-weight:bold; font-style:oblique;}
.object_cameo_small, .objectset_cameo_small {position:relative; height:80px; color:#606570; overflow:hidden;}
.objectset_cameo_small {background:#DAD5C8; margin-bottom:5px;}
.object_cameo_small a, .objectset_cameo_small a {color:#606570;}
.object_cameo_small .object_tiny, .objectset_cameo_small .objectset_tiny {position:absolute; top:5px; right:185px; height:70px; padding:7px; }
.object_cameo_small .object_info, .objectset_cameo_small .objectset_info {position:absolute; top:5px; right:0px; width:175px; height:70px; padding:5px; border-left:solid thin #909499; text-align:left; }
.object_cameo_small .object_title {font-weight:bold; font-style:oblique;}
.objectset_cameo_small .objectset_title {font-weight:bold;}
.object_cameo_small .object_points, .objectset_rating {font-style:oblique; position:absolute; bottom:5px;}
.object_cameo_small .object_description, .objectset_description {height: 1.1em; overflow:hidden;}
.object_cameo_large, .objectset_cameo_large {position:relative; height:140px; color:#606570; overflow:hidden;}
.object_cameo_large a, .objectset_cameo_large a {color:#606570;}
.object_cameo_large .object_small, .object_cameo_large .objectset_tiny {position:absolute; top:5px; right:380px; height:130px; padding:7px; }
.object_cameo_large .object_info, .objectset_cameo_large .objectset_info {position:absolute; top:5px; right:0px; width:366px; height:130px; padding:5px; border-left:solid thin #909499; text-align:left; }
.object_cameo_large .object_title {font-weight:bold; font-style:oblique;}
.object_cameo_large .objectset_title {font-weight:bold;}
.object_cameo_large .object_points, .objectset_cameo_large .objectset_rating {font-style:oblique;}
.object_cameo_large .object_description, .objectset_description {max-height: 4.4em; overflow:hidden; margin:5px 0px 5px 0px;}
.object_info:hover, .objectset_info:hover, #gallery_info:hover, .objectset_cameo_small:hover {background-color:#D3CCC3;}
.set_objects {position:relative; width:250px; float:left;}
.comment_instep {padding-left:10px;}
.comment {position:relative; margin:5px; padding:7px; min-height:100px;}
.comment .replies {bottom:0px; right:0px;}
.comment .comment_icon {position:absolute; top:0px; left:0px; padding:5px; width:50px; height:100px; border:solid thin #909499; background:#DAD5C8;}
.comment .comment_user {float:left; margin-left:60px;}
.comment .comment_link {font-size:9px; position:absolute; right:10px; top:7px;}
.comment .comment_body {clear:both; padding:10px 0px 10px 60px;}
.comment .replies {position:absolute; bottom:7px; right:10px;}
.comment .comment_rating {position:absolute; bottom:7px; left:65px;}
.reply_form {margin-left:20px;}
.comment_form {position:relative; padding-left:65px; height:150px; margin:1px 0px 10px 0px;}
.comment_form_icon {position:absolute; top:0px; left:0px; padding:5px; width:50px; height:100px; border:solid thin #909499; background:#DAD5C8;}
.commentinsertform textarea {display:block; width:100%; height:120px;}
.comment_submit_button {float:right; clear:both;}
#object {position:relative; min-width:600px; padding:15px 7px 15px 20px; overflow:visible;}
#object img {cursor:pointer;}
#object_info {position:relative; width:650px; margin-left:auto; margin-right:auto;}
#object_title {display:block; margin:10px 0px 10px 0px; letter-spacing:.2em;}
#object_points {float:left; width:200px; height:100%;}
#object_users {position:absolute; margin:10px 0px 10px 0px; float:left; width:250px; height:100%;}
#object_description {padding-left:250px; min-height:100px; width:400px;}
#object_tags {padding-left:250px; width:400px;}
/* CONTROL */
#control textarea{width:500px;}
#control div{margin:5px;}
.collaborator_input {display:block; width:500px; clear:both; margin-top:5px;}
.collaborator_input input {width:150px;}
.rheight20 {}
.mark_as_read{text-align:right; padding:5px; background:white}
.notification_wrapper{border:solid thin transparent;}
.notification_wrapper:hover{border:solid thin white;}
I want to start again. It's got so complicated I can't remember why half the stuff is in there. And I haven't even added hacks for different browsers yet.