CSS / design help

[liv]

So I've created two styles for my journal, and I've been fiddling with them on and off for a while, but I've now got to the point where I'm relatively satisfied. However, I'm a complete beginner at this whole web design lark, so I would appreciate some feedback (and technical help if you're good with this sort of thing).

People using Mozilla family browsers

• You should be able to choose alternative stylesheets. Which do you prefer out of 'Belle Epoque' (the default at the moment) and 'Purple contemporary'?
• What resolution are you using? Does the layout look sensible at that resolution?
• Do you see any glaring problems I haven't thought of?
• Any suggestions for how to improve the layout aesthetically?
• Known Mozilla problems; any suggestions welcome
  • I want to centre the icons in their boxes even if the icon is less than 100 pixels wide. Is there a way to do this? Ideally I want the box to be just slightly wider than the contents, rather than always being 110 pixels.
  • It looks messy if the graphics don't load for some reason. Should be legible, but it's not very pretty.
  • Phone posts break the 'Purple contemporary' and large images don't like it very much.

People using IE

• You can't switch stylesheets, so you can only see the default.
• Most of the graphics don't work in IE; it should be bland but legible, though. Is this the case?
• Known IE problems (apart from general IE brokenness)
  • IE doesn't respect max-width, so the icons are in big coloured bars going most of the way across the screen, instead of neat little boxes. Any way round this?
  • Big pictures or long lines stretch stuff in IE; again, I think this is probably inevitable, isn't it?
  • If someone posts with no icon, IE draws really stupid-looking blocks of colour. I've sorted this out in Mozilla, but those tricks don't work in IE. Any ideas?

People using Opera

The layout won't work at all. I can't do anything about this without entirely breaking it in IE, and however reluctantly I'm favouring IE as it is more widely used. If you're deeply committed to Opera, you need to use ?style=mine to look at my journal, though you've probably worked this out by now. Eg look at: <http://www.livejournal.com/users/livredor?style=mine> instead of the standard URL. Or block stylesheets from my journal, that might work too.

People using Macs

Any feedback at all most welcome as I've never tested with a Mac.

People using obscure browsers not mentioned here

Is it legible? If not, why not?

Oh, and if you know stuff about CSS and feel like reading mine, you can see the code for the default Belle Epoque layout and the Purple Contemporary layout on my website. I've tried to comment the code a bit but I admit it could be clearer.

I don't think it validates and I have a feeling it's not terribly accessible, this stuff. But I don't really know where to start with those things. Well, that's not true, I know where to start with making standards-compliant CSS, but not how to do that without breaking everything. So if you have suggestions about those aspects they will also be welcome.

Addendum 12.3.05: I have played around with the Belle Epoque style to try and deal with some of the problems raised. So please could any helpful web design gurus compare the old version (Belle Epoque, the default), with the proposed new version (Under construction) and tell me what you think. It all fits together perfectly at low res, but I suspect I'm going to be left with a lot of white space at high res. I'm hoping it's better to have the white space in the middle than on the right. Thanks for all your lovely suggestions!

Comments

[camomiletea.livejournal.com]

I'm using Firefox 1.0 with the 1024x768 resolution. So the same as the previous commenter :) I like The Purple Contemporary better.

In Belle Epoque, I'm not really sure what to suggest. Why can't you make the corners transparent? Convert the picture to GIF, if it isn't and make that area transparent. I can try if you don't have necessary software for this.

In both styles the links are highlighted. Personally, I don't care for the effect... But if you like it, :)

[liv]

Why can't you make the corners transparent?
It's not that I physically can't make the corners transparent; the image is a transparent .gif anyway. It's that if I do that, the right and left borders show up behind the corners and ruin the effect. The :before and :after pseudoclasses inherit from the parent in rather odd and not entirely predictable ways.

I've tried to make the Belle Epoque layout more balanced, with less clutter at the top and the image moved to a thin bar at the right-hand side. Does that make it any better from your perspective ("Under construction" style)?

I'm not sure about the highlighted links, I'm kind of back and forth about that one. That's why I've removed the highlights from the actual entry boxes in Purple Contemporary. Thanks for the comment though.

[camomiletea.livejournal.com]

Oh, yes, I like the new version of Belle Epoque much better. :D