style_system | Sadly, I am back.

Thanks so much for the help the other day! As a result, I am THIS CLOSE to being done, but there are a few really nitpicky things bothering me that I. Cannot figure out even though it's probably really obvious and embarrassing, so... I hope it's okay to post again so soon. :/

Layout: Tabula Rasa (with some theme layer tweaks)
Journal:

scorched_test

[Problem One]!
There's something very strange going on with the month archive page - Looking this guide, I see that the subject of the posts there should be styled the way the subject on the reading page is styled, so I'm not sure why it's uppercased and why the font jumps when I do a hover over. I'm probably overlooking something very obvious, but I cannot for the life of me figure out why it does that. Is there any way to make it stop? Ideally, I'd like to make it look as much like the old style lists as possible, but at this point I'd be thrilled if I could just get rid of the capslock and make the font stabilize.

[Problem Two]!
The tags menu in the sidebar - I can't seem to get the non-link-tags color or styling to change. Also, there's a double border-bottom on the subtags, and it's weirding me out. Is there any way to get it back down to one border like all the other tags?

[Problem Three]!
And finally, the new bane of my life, the horrifying sidebar problem. As you can see here and here, it seems that the #canvas div drops off at the level of the shortest div, whether that's #secondary or #primary. I'm not sure why, but it's driving me crazy. I'd like to find a way to make it continue to the bottom of the page (much like it does on the layout for this comm), if only so the top of page link won't be hanging out at the top of the page, which makes no sense whatsoever.

Basically, I'm just trying to get an effect similar to

style_system's, where the background color of the canvas extends to the bottom of the page, and the top of page link is where such a link should be - at the bottom of said page. But I can't for the life of me figure out how to do that. Does anyone have any idea, or maybe a hint as to where to look to deal with something like that? It would be VERY appreciated.

Current css is here:

/* BASIC */

* {
		margin: 0px; 
		padding: 0px;
		}

body	{
		background-color: #444445;
		color: #606060;
		font-family:tahoma;
		font-size:12px;
		text-align: center;
		margin: 0px 0px 0px 0px;
		}

H1, H2, H3 {margin: .25em 0; padding: .25em 0;}

a, a:link, a:visited {
		color: #99a1a2;
		text-decoration: none;
		}
	
	a:hover, a:active {
		color: #cfd4d6;
		}
	
blockquote {
		background-color: #f0f3f6;	
		color: #606873;
		font-family:tahoma;
		font-size:11px;
		text-align: justify;	
		margin: 3px 7px 3px 7px; 
		padding: 10px; 
border-top: 1px #99a1a2 solid;
border-bottom: 1px #99a1a2 solid;
		}

q {font-style: italic; }
		
    	strong, b {
		font-weight: bold;
	}

em, i {
	}

code, kbd, pre, tt {
	    	font-family: monospace;
		}

#canvas {width:950px; margin:auto; BORDER-LEFT: #cfd4d6 15px solid; background-color: #99a1a2;  border-bottom: #a6adae solid 15px;}

/* HEADER */
#header {padding-top: 197px;
background-image: url('http://i566.photobucket.com/albums/ss106/scorchedmods/layout/headermainpale2.jpg');
background-repeat: no-repeat;
background-position: center top;}

#title {display:none;}
#pagetitle {display:none;}

/* Main Structure */

.topnav li.page-back, .topnav li.page-forward {display:none}

#primary {width: 735px;	font-family:tahoma; font-size: 12px; text-align: justify; background-color: #fafaff; float: right; border-left: #cfd4d6 15px solid;
border-bottom: #cfd4d6 3px solid;}

#secondary {width: 200px; padding-top: 20px; margin-top: 0px; background-color: #99a1a2; color: #e0e3e4; font-family:tahoma; font-size:9pt; float: left; text-align: justify; background-image: url("http://i566.photobucket.com/albums/ss106/scorchedmods/layout/headersidebar2.jpg");
background-repeat: no-repeat; }

/* Main Content */

ul.entry-management-links {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
text-align: right;
display: NONE;
}
ul.entry-management-links li {
    display: inline;
    padding: 0 .25em;
}

ul.entry-interaction-links {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
    text-align: right;
font-size: 18px;
margin-right: 130px;
}

.entry-interaction-links {text-align: center;}

.entry-interaction-links a {  }

ul.entry-interaction-links li {
    display: inline;
    padding: 0 .25em;
}

/* ENTRIES */

.datetime {float: right; display:block; padding-right:20px; margin-top: -22px; color:#e8edf0;}

span.date a, span.date a:visited, span.date a:hover, span.date a:active {color:#e8edf0;}

span.restrictions, span.access-filter {float: right;margin-top: -32px;}

div.entry div.userpic {
float: right;
background-color: #cfd4d6!important; padding: 5px; margin-top:6px;
}

.entry h3.entry-title {font-family: georgia; font-weight: lighter; font-size:24px; letter-spacing:1px; width: 605px; background-color: #a6adae!important; float:left; padding-bottom:15px; padding-left:10px; padding-right:10px;}

.entry .entry-title a, .entry-title a:visited, .entry-title a:hover, .entry-title a:active {font-size:24px; color:#e8edf0!important; width: 605px;}

.header {background-color: #a6adae; width:100%;}

.entry-content { margin-right: 130px; margin-left: 20px; padding-bottom:20px; border: 0px; bottom: 0px; color: #333333; font-size:13px; line-height:125%;}

.metadata {display:none;}

div.tag ul li { text-align: left; display: inline; list-style: none; font-weight: normal; margin: 5px 5px 0px 0px; }

div.tag { padding: 15px 0px 15px 20px; 	text-transform: lowercase;margin-right: 0px; }

span.tag-text { text-transform: lowercase;}

div.tag ul  { text-align: right; text-transform: lowercase; display: inline; }

li.link mem_add, li.link tell_friend {display: none;}

/* Sidebar */

#secondary {
		width: 200px;
		padding-top: 20px;
		margin-top: 0px;
		background-color: #99a1a2;
	  	color: #e0e3e4;
		font-family:tahoma;
		font-size:9pt;
		float: left;
		text-align: justify;
background-image: url("http://i566.photobucket.com/albums/ss106/scorchedmods/layout/headersidebar2.jpg");
background-repeat: no-repeat;

}
.module-content {margin:10px;}

h2.module-header a, h2.module-header a:visited, h2.module-header a:active, h2.module-header a:hover {color: #e8edf0; }

h2.module-header {padding: 5px; list-style: none; 	background-color: #a6adae; margin-bottom: 10px; 	margin-top: 5px; text-align: center; text-transform: uppercase; font-size: 15px!important; font-family: georgia!important; font-weight: normal; color: #e8edf0;   }

.module-userprofile {height: 150px;}
.module-userprofile ul {list-style:none;}
.module-userprofile li {display: inline;}
.module-userprofile .userpic {margin: auto; border: #a6adae 5px solid; padding: 5px;}

.module-typelist li:hover,
.module-typelist li:active {
background-color: #e8edf0;
color: #99a1a2;
text-decoration: none;
display:block;
}
.module-typelist li:hover > a,
.module-typelist li:active > a,
.module-typelist a:hover,
.module-typelist a:active {color: #99a1a2; display:block; background-color: #e8edf0;}

.module-typelist a, .module-typelist a:visited {color: #e8edf0; text-decoration: none; display:block;
}

.module .non-link-tag {font-size:15px; font-style:italics!important;}

.module-tags_multilevel .module-content a, .module-tags_multilevel .module-content a:visited { color: #f0f3f6; font-family:tahoma; font-size:9pt; }
.module-tags_multilevel .module-content a:hover, .module-tags_multilevel .module-content a:active {color: #99a1a2; text-decoration: none; background-color: #e8edf0;}

.module-tags_multilevel ul {list-style: none;}
.module-tags_multilevel li {list-style:none; display:block; 	 line-height: 20px;}

.module .module-content li {
margin-left: 0;
padding-left: 0;
}

.module .module-content li li {
margin-left: 10px;
}

.module-navlinks li:hover {
background-color: #e0e3e4;
padding: 5px;
}

.module-navlinks li:hover > a,
.module-navlinks a:hover {
color: #99a1a2;
}

.module-content ul {padding-left: 0px;	margin-left: 0px; list-style: none;
}

.module-content li {padding-left: 15px;	list-style: none; border-bottom: 1px solid #a6adae;  line-height: 20px;	margin-right: 15px; margin-left: 15px;	color: #454545;	font-family:tahoma; font-size:8pt; display: block;
}

div.module-navlinks { 
		font-size: 11px;
		position: absolute;
 		top: 0px;
 		z-index: 100px;
		margin: 0px 0px 0px 0;  
		font-weight: lighter;
		text-transform: uppercase;
		letter-spacing: 3px;
		line-height: 100%;
text-align: right;
width: 950px;
		color: #e0e3e4;
		}

div.module-navlinks ul.module-list {
 		display: inline;
		padding: 0; 
		margin: 0;  
border:0px!important;

}

div.module-navlinks ul.module-list li { 
		display: inline; 
		margin: 0px 5px 20px 0; 
		list-style: none; 
		padding: 5px 5px 5px 5px; 
border:0px!important;
		}

.module-navlinks a, .module-navlinks a:visited {color:#f0f3f6;}

.module-navlinks a:hover; .module-navlinks a:active {background-color:#e0e3e4!important; padding: 5px;}

.module-userprofile .module-header {
display: none;
}

.module-userprofile .module-content {
text-align: center;
}

.module-userprofile .userpic {
padding: 0;
width: 100px;
}

.module-userprofile ul.userlite-interaction-links li {
display: inline;
margin: 0;
padding: 0;
border: none;
}

/* ARCHIVE PAGES */

/* year */

div#archive-year {text-align:center;}
div#archive-year ul {list-style:none;}
div#archive-year li {display:inline;}
.navigation {text-align:center;}
.navigation ul {list-style:none;}
.navigation li {display:inline;}

.month { padding: 0px; margin: 0px 0px 10px 0px; }

.month caption { display: none; }
.month h3 { padding: 5px; list-style: none; background-color: #cfd4d6; margin-bottom: 10px; 	margin-top: 5px; text-align: center; text-transform: uppercase; font-size: 15px!important; font-family: georgia!important; font-weight: normal; color: #fafaff; }

.month table { width: 385px; margin: auto; background-color:#44445; border-collapse: separate; border-spacing: 2px; }
.month th { background-color: #444445; color: #a6adae; margin: 0px 2px; padding: 5px; border-color: #9f9f9f; border-width: 1px; border-style: solid; }

.month td { padding: 2px; width:55px;height:55px;}

.month td.day, .month td.day-empty, .month td.day-has-entries { border-color: #9f9f9f; border-width: 1px; border-style: solid; text-align: right; vertical-align:top;}

.month td.day-has-entries p { text-align: center; font-weight: bold; padding: 0px 0px 0px 0px;}

/* month */

/* tags page */

h2#pagetitle {
	font-size: 1.5em;
	}

.tags-container {margin: 20px;}

/* bottom nav */

.navigation.bottomnav {background-color: #a6adae; padding 10px 0px 10px 0px;}

.navigation.bottomnav a, .navigation.bottomnav a:visited,  .navigation.bottomnav a:hover, .navigation.bottomnav a:active {color:#f0f3f6; text-transform: uppercase; line-height: 150%; letter-spacing: 4px;}

.poster img, .entry-poster img {display:none;}

.poster, .entry-poster {float:right; background-color: #cfd4d6!important; padding: 0px 5px 5px 5px; width:100px; clear:both; text-align:center; letter-spacing:1px; font-weight: lighter!important;}

ul {margin: 3px 7px 3px 7px; list-style: circle; list-style-position: inside;}
ol {margin: 3px 7px 3px 7x; list-style-position: inside;}

.entry-content {min-height: 120px;}

Flat | Top-Level Comments Only

Got two for you:

Problem Two: .module-content li has a color set on it. If you change that to the colour you want the non link tags to be, you're good.

If you add this code: .module-content li li {border: none;} you'll lose the double border.

Problem Three: Add, overflow: hidden to #canvas. This is the fairly counter intuitive way to get a content box to expand to contain floated elements.

And, I found you another problem. I'm guessing you have the navstrip turned off. Turn it on, and take a look at where the nav links are sitting. On my screen they are overlapped with the navstrip.

Sorry all I've got time for right now. I'm sure someone else will tackle the other issues.

Thank you so much! For the most part this is working perfectly now - my only remaining concern with the canvas situation is that the page-top bar is continuing to hang out at the top of the page!

The navbar - jajdadad yeah I have it turned off. I'm definitely going to look into that, thank you.

Sorry, I forgot about that when I couldn't find it!

You should have a clear: both; on #footer You might need to do something about padding or something once it's down at the bottom.

The standard navstrip has a height of 45px and the body gets a .has-navstrip class when it is there, so you should be able to position your navlinks by doing .has-navstrip [however you're selecting your nav links to position them] {top: 45px;} or whatever looks good.

Excellent! Both solutions worked perfectly, thank you so much!

Problem One: In the "Archive Pages" section, under ".month h3", there's a "text-transform: uppercase;" included in the text styling - removing that may stop the uppercasery? (Possibly because the div class in the code is "month", even though you specify the h3 class after?) Differences between the .month h3 font size/color and the entry-title or entry-title a:hover font size/color may also be the issue with the font jumping.

Edited (for clarification!) 2012-02-16 16:32 (UTC)

!! Excellent. That pointed me in the right direction, and now it's all. stabilized.

If anyone else runs into this issue, let the record show that I stabilized it using:

.month h3.entry-title

and the associated a selectors.

\o/ Awesome! Glad I could help.

Hate to add a problem not on your list, but the navlinks module is position absolute, which means that the links at the top of your page are going to hover wildly over the navigation strip if someone has it displayed. It probably wouldn't hurt the design to drop them down another 20-30 pixels and have them clear the navigation strip if it is displayed.

Sob. I honestly never even thought about them - I am from the wild world of LJ where everyone hated the navstrip.

HOWEVER, IT IS NOW FIXED! \o/ With no injuries incurred. XD Thank you!

Sadly, I am back.

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject