sam_a

If you definitely want #footer below both columns, you need to float both #menu and #content. But then it gets a little tricky.

The way you have it now, with

#content {width:auto}
#menu {width: 20em;}

— I can’t yet figure out how to do that when both are floated. You might find a clue from those “Holy Grail” CSS layouts, maybe.

You could wrap #content and #menu inside a #container, give margins to #container, then float #content and #menu left and right with percentage widths.

And then added class=”border” to one my images but it didn’t work.

I think you want

img.border { border: 1px solid black;}

p img {...} is just an image within a paragraph — I don’t think it matters for your case.

I looked at the HTML on that page — the paragraphs are double wrapped [p][p]...[/p][/p] and the blockquotes are *inside* paragraphs [p][blockquote]...[/blockquote][p].

You should definitely fix those if you can. (The styling is going to unpredictable if the HTML structure is broken.)

Are you using a text filter like Markdown?

I’m having problems with my posts shifting to the bottom of the screen where the sidebar ends on Internet Explorer.

Try

#sidebar, #content { overflow-x: hidden;}

in IE and see if it works.

Oh — the first time I saw it I thought #sidebar was the footer. ??

I don’t think the problem is text wrapping — #sidebar is floated but it needs a width. {width:20%;} will work (just an example).

I would get rid of all of those white-space rules for #sidebar, too.

It looks like #menu is positioned, not floated, so you can’t really clear the footer below it.

(Actually it says {float: right} too but I think that would be ignored.)

Hard to tell. IE treats height more like min-height, but that wouldn’t explain Opera.

But is there a reason you’ve set a height for those header elements? I tested your page with

#header, #navtop, #navmenu { height: auto;}

and it looked mostly the same. #navmenu was shorter, but you can just add vertical padding to it:

#navmenu{ padding: 0.5em 0;}

I don’t think there’s a standard CSS equivalent for IE’s break-word property. You can use something like { overflow-x: hidden;}, which is a different approach to the same problem.

But I visited your page and didn’t see any problems (even in a narrow window)…?

You could just use

.post .content p { margin: 0 0 0.5em 0;}

… depending on your theme.

So I create a new post which includes multiple lines.

Are you meaning to write separate paragraphs or are you trying to put one line break within a paragraph?

I have the Photanical theme installed on my blog.

However, at the moment, the Links look ergh!

I found this in the HTML — probably the theme authors included the Links section in the sidebar template but commented it out. You could try uncommenting it (and remove the one you added before).

<div class="stitle">Links</div>
<php get_links('-1', '', '<br />', '<br />', 0, 'name', 0, 0, -1, 0);

Probably that will better match the sidebar structure of your theme (lots of line breaks — weird).

marcy: I took off that second <div class=”post-info”> and it totally threw the site for a loop. The sidebar went missing, the posts were lined up next to each other.. oy.

You need to remove both the start *and* end tag from the template:

CUT: <div class="post-info">[empty]</div>

… otherwise it will mess up the HTML structure. I checked your site with div.post-info hidden, and it looked OK.

I’m wondering if there is a way to make wordpress NOT use lists for the various sidebar links like pages, archives, categories, links, etc? So that they are just regular links with no styling to them?

I know I can style them to be normal, but that doesn’t make them not have the [li][/li] wrapper (which can mess up other styling)

If you’re only concerned with how the sidebar items look, it’s probably possible to style those however you want without affecting anything else. You’d want to use something like

`#sidebar li {
list-style: none;
/* etc */
}

…not just a generic list selector — but it all depends on what you want for “just regular links with no styling to them”.

LordJezo — I would probably use

.post { margin: 0 0 1em 0;} (or similar)

I second marcy — there’s an empty div.post-info inside each div.post.

The site currently consists of a CSS header, left navbar, footer (all the same for each page) and content. I’m hoping that this might not be too painless to implement in WordPress.

It sounds like you want to create a new WP theme based on the earlier version of your website. If you do this, you could keep the stylesheets nearly the same as before, including the navbar styling (I think you’re describing #navbar{ position: fixed;}).

So most of the work you’d be doing would be adapting the existing webpage structure into new WP templates — header.php, index.php, footer.php, sidebar.php –, adding the template tags you need.

Now, however, my blockquote paragraph spacing is too small. I’ve tried adjusting that same number (the 3rd one), without success […]

I think you want to address the paragraphs inside the blockquote:

blockquote p { margin: 0 0 1em 0;}

Though I notice that your theme uses padding and pixels for those, so substitute.

The body { line-height: 1.6em } is going to affect the apparent vertical spacing, too, a little.