Mockup - C&C puh-lease

[e]

I've been working on this little thing this morning (rainy day, hangover, cold...outside is not an option for now):

Mockup

This is for a personal site, a blog, for those keen enough to pick this out (haha).

I've only tested this with Firefox 2.x, so I have no idea how it behaves in IE (which I should fix). The JS should be fine, but mayhaps the HTML or CSS will break (I used a naughty li:before selector).

Either way, don't simply say "it's broken" if you only see this in IE. Though if it is, do say it. I'm full of contradictions today.

Things I know don't work: the code box cuts off long strings, and I haven't found a good way to make it show, or to add some sort of functionality to beautifully expand it without changing the width (I want to keep it narrow). There is a logo which is supposed to go in the upper left box (the upper left Lorem ipsum would be a logo, followed by some kind of separator...but my Photoshop-fu is rather...low), and right handbar is obviously not done, but should be your standard blog sidebar (categories, small logos, etc.).

What I'd like : suggestions, tutorials for logos?, comments, color suggestions, usability issues, etc. etc.

On that, I sweep the dirt with my cape and off I go, treading the nights in tights.

Edit : So I checked in IE; it looks horrible. I'll have to check what's wrong tomorrow. My guess is it's the syntax highlighter which breaks in IE, but I could be wrong. Works fine in Safari and Opera (slight bottom margin problem, but nothing major).

 

[serrated_colon]

I kinda like this layout, although the block at the side(with the loren ipsum) is the navigation bar I'd assume? Then it should have some sort of mouse over effect(whether with js or css you do this, it doesn't matter but I think you know that).

also:
http://validator.w3.org/check?uri=http% ... ne&group=0

 

[e]

Yeah, I never validate until I'm more or less done with the design (which is far from the truth right now), though I see how it might provide heads up on why it's messed up in IE.

And what sort of mouse over effect? I don't recall putting one anywhere.

 

[Mortimer Cool]

2

sixth

 

[serrated_colon]

Yeah, I never validate until I'm more or less done with the design (which is far from the truth right now), though I see how it might provide heads up on why it's messed up in IE.

And what sort of mouse over effect? I don't recall putting one anywhere.

I was suggesting one for the block to the right(assuming it's a navigation block)

 

[___]

As far as IE6 goes, try wrapping your line numbers and lines in a span and set the span to display:block, see how that goes.  I'm not sure how to get line wrap working in that code offhand, might be a little awkward, but I suggest simply letting the containing span stretch downward and not supplying anything in the space of the line number, so it looks like:

[1]    // bla bla bla bla bla bla bla bla bla
            bla bla bla
[2]    // bla bla bla
[3]    var $foo;
[4]    var $bar;

That should look just fine.  If I run into a simple solution for wrapping within a couple spans like that I'll let you know!