Open Source Blog Design

I've been fooling around with a new design for the last day or so and I'm having trouble resolving a few issues with the CSS in the sidebars. If you have any hints, tips, tricks, suggestions or fixes, leave 'em in the comments.

Comments

[tas]

For your first sidebar ("Navigation" with the Blogads), I noticed this in your stylesheet:

#right {
float: left;
width: 148px;
background-color: #ffffff;
border-right: 0px solid #414248;
overflow: hidden;
}

With your width at 148px, that's static and it's going to chop off any code or images which exceed 148px. If you add a few more pixels to that, things should then be allowed to look normal.

[Roxanne]

Thanks. But changing that doesn't seem to fix it. The fonts are reading gigantic, both sidebars are indenting , etc.

[tas]

Hmm.. [scratching head] There must be another div tag that's overriding the tags for your sidebar. I'll give it a look after my math class.

[The Commissar]

Wish I could help. If you switch to Wordpress, I could. :)

Do you intend both sidebars on the right?

[tas]

This is confusing me...

I looked at your page source and tracked div tag openings and closing. I found out that when your blog content ends and the sidebar content begins, the two div tags still open are "container" and "pagebody". In your style sheet, though, the word "pagebody" doesn't exist, so nothing under that could be effecting things. (Additionally, inside your sidebar content there's a few div tags with "module" in the title, but the word "module" isn't in your stylesheet, either.)

Ruling all of those div's out, your sidebars are still governed by your "container" div. Here's container in your stylesheet:

#container {
line-height: 140%;
margin-right: auto;
margin-left: 1px;
text-align: left;
padding: 0px;
width: 780px;
background-color: #ffffff; }

The only guess I can make here is that your fixed width of 780 pixels, which effects your whole page, is mucking things up. I would change this to "100%" and try changing the width under your "right" div heading from 152px to, say, 25%. See if that has any effect.

As for the size of words like "Navigation", it doesn't look like you have anything under "container" to control the style of tags like h1, h2, etc. The only control you've set aside for these tags in your sidebar is under the "sidebar" heading in your stylesheet, but that doesn't count since the sidebar's on your blog are not under the sidebar div tag. As far as I can telll, here's the portion of your stylesheet that's controlling h1/h2, and ths the text size in your sidebar.

h1, h2, h3 {
margin: 0px;
padding: 0px;
font-weight: normal;
}

This is located right above the controls for "container".

[peter ramus]

Rox, your CSS is OK (except that there's no "normal" value for list-style-type; depending on what you want it to look like, it has to be one of: disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-alpha | lower-latin | upper-alpha | upper-latin | hebrew | armenian | georgian | cjk-ideographic | hiragana | katakana | hiragana-iroha | katakana-iroha | none | inherit).

But, you haven't actually declared your "sidebar" CSS (sidebar h2, sidebar ul, sidebar li) in your HTML. Instead, your html has h2 class="module-header" and ul class="module-list" and li class="module-list-item" — none if which point back to anything in your CSS file. A quick search and replace should solve that.

As a sidenote, failing to declare a doctype in your HTML makes the baby Jesus, not to mention Tim Berners-Lee, cry. For a good time, try XTML Transitional.