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

[wychwood]

Looking at all this... [Mozilla family - Firefox 1.0, specifically with 1024x768 resolution]

The CSS for the first style, Belle Epoque, validates with only two errors -
a) in line 28 you have "background-repeat: y;" when it should be "background-repeat: repeat-y;"
b) in line 22 you have ".usericon_main {float: center; margin-left: 50%}" but "center" is not a valid value for float - only left, right and none are accepted.

The CSS for Purple Contemporary has only one error showing, in line 71:
div.usericon_entry_wrap a, div.usericon_entry_wrap a:link, div.usericon_entry_wrap a:visited, div.usericon_entry_wrap a:hover, div.usericon_entry_wrap a:active: {background-color: transparent} - it says there's a parse error with a colon? I can't see why, offhand... Perhaps someone with more CSS knowledge can help.

(I just used the validator at http://jigsaw.w3.org/css-validator/ which is pretty good at providing links to the relevant specification, when it finds an error)

I've no idea what, if any, difference that is making to the way things look.

Purely on appearance, I think I prefer the Purple one. The syndication buttons at the top look rather unbalanced, but it's better overall for me. The Belle Epoque one has more obvious "clutter" between the top of the page and the start of the journal, as well as a lot more whitespace. The panel with icon and so on fills in the non-post half of the page in the Purple one, whereas Belle has a bit of whitespace to the left and lots to the right, so the post looks... lopsided, once you get down the page a bit. Also, the background image is only visible at the very top and bottom and in the small gap between posts, which rather defeats the point of having it all down the page. If the picture was to the right, it might work better, in terms of filling up the space, and being visible. But it's your journal!

If you want screenshots of anything as seen on my system, just shout. Or comment, which may be a little more efficient... ;)

[liv]

Thanks, wychwood, this is incredibly helpful! I should have had the courage of my convictions and put the CSS through a validator myself; I didn't dare because I thought it was going to be a horrible mess! float:center doesn't validate but it seems to work. I will play with that a bit more. The rest is just typos so I can easily fix. Yay.

The syn buttons are in the wrong place in Purple Contemporary. Stupid me forgot to fix them since they only show up in the main view and I've been testing on the friends view (since there's a bigger variety of posts). Thanks for spotting that!

You're right that Belle Epoque is kind of lopsided. There's a quirky reason why it has to be slightly off-centre at low res, so at high res it's exaggerated and maybe I can't get away with it. The trouble is that the background image needs not to overlap the edges of the boxes, or it spoils the illusion of rounded corners. The way I've done the frame, I can't get away with transparent corners, they have to be white. And therefore the background behind them has to be white too or it looks a mess. So putting the background to the right won't work. Not unless I make it a lot skinnier so boxes + picture takes up less than 800px.

I'm considering losing the picture altogether, cos you're right that it doesn't really show up in the small gaps between the boxes. The problem is that without it, the whole screen is full of massive expanses of white space in high res. And also, you can see it really nicely with my calendar. (I didn't care about leaving the calendar transparent because there's not much text you need to be able to read, unlike with the entries!) There may be a way to have the picture either absent or on the right for the journal page and centred for the calendar, but I'm not entirely sure how to do that. Will fiddle with it, anyway. About the top of the page being cluttery, hm, when I first made the style I kind of liked it that way, but now I'm not so sure, maybe I should condense it a bit.

[camomiletea.livejournal.com]

If you want to center an icon, you should use 'text-align: center;' , not float.

As for that error message about a colon, you had an extra colon, in a:active:. This validates:

div.usericon_entry_wrap a, div.usericon_entry_wrap a:link, div.usericon_entry_wrap a:visited, div.usericon_entry_wrap a:hover, div.usericon_entry_wrap a:active {background-color: transparent;}

[liv]

If you want to center an icon, you should use 'text-align: center;'
Oooh, brilliant, why didn't I think of that? I suspect because I was being too literal and seeing text-align so I assumed it wouldn't work for images. Silly me.

The extra : I figured out from the validation error message, but thank you anyway.

[pne.livejournal.com]

The way I know to centre an inline elements (such as an image) inside its parent box is text-align: center; did you try that?

For block elements (such as tables), you're supposed to use something else but I won't go into that unless you're curious.

[camomiletea.livejournal.com]

Setting left and right margins to the same amount? Except it doesn't work in IE.

[pne.livejournal.com]

Setting left and right margins to the same amount?

Exactly. Such as using margin-left: auto; margin-right: auto.

Except it doesn't work in IE.

Yup. IE wants to use text-align: center for block elements as well.

So if you want things to work in IE and standards-conforming browsers, you'll have to use both the margin and text-align methods, then override text-align for the table contents so that the cell contents aren't centred as well.

[liv]

The way I know to centre an inline elements (such as an image) inside its parent box is text-align: center;
Yes, that does exactly what I was trying to do, thank you so much for that tip.

Most of my layout is divs rather than tables. Other than the calendar which is a whole other headache. But I'm not overly concerned about that.

[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

[digby-tantrum.livejournal.com]

Speaking as a non tech monkey, I think your design is great: black text on a white background.

Admittedly, it's not as good as white text on a black background, but don't mind me.

[liv]

One of the things about this layout is that it has built-in stylesheets that allow you to override all the colour settings. Sadly this doesn't work in IE. But if you're using a decent browser, you can select the "white_text" stylesheet. There a couple of my CSS effects which look sort of strange if you take away the page colours, but I was pretty careful not to rely on anything graphical for readability.

[emma]

I use Opera, and therefore would be using style=mine to view your journal. But I thought I'd have a look with Firefox anyway. I prefer Purple, except it looks a little odd to me over on the left, as if too little content is taking up too much space. I also prefer the links to have no highlight until you hover them, instead of the reverse, which you have. There could do with being a little space between your subtitle (?) and the RSS buttons. The blue section at the top, with the text and the tabs, seems a little unfinished somehow. Maybe due to the lack of link effects, and the relatively plain font and deep colour background. Maybe the background from the date would look good along that section. I'm not entirely sure.

In Belle Epoque, it seems like there are too many boxes along the top, where they could be combined in some way. Sometimes the read comments link doesn't highly properly and the cursor doesn't change on hover, and I'm not sure what that's about.

They're both pretty nice though :) I'd have to do some tweaking to make them fit my tastes in journal style, but given that they're yours, that doesn't really matter a whole lot.