chima

Specify width with percentage or em:s, not specific pixel width. Check out W3schools CSS dimension section - all the properties you need are listed right there.

I think it looks fine, but it would look better with some more padding and bigger line-height.

I know, I know... I'm one of those people that are too quick to get a visual sample done, tidying up the code afterwards, rather than building from solid foundations on up. I usually end up re-writing the css altogether as soon as I feel the "actual page" is done. It's backwards, and I feel that nagging shame about it I also get when having too much dessert :/ Dizi, thanks! That's one of the things I think was bugging me - the background should be spunky, but not take up too much attention and weigh everything down (which also happened right now, with the brown top fade).

I wouldn't render at least the main heading with the same font as the logo, but otherwise, it's neat! Edit: not really a big fan of super-patterned backgrounds, either, but that's a taste issue.

Thanks guys. I changed the link styling and went for a semi-patterned background. Better? Worse?

Aww come on. I need some piece-tearing here.

Bumpetty.

I think it's great! Very neat and simple. Maybe what it lacks is a "wow" factor - nothing really jumps at me; there's no focus for the eyes to grab upon as an entryway into the page. Try popping whatever you want visitors to latch on to first.

I've tried shifting the palette around, but even beyond the color issue, I feel there's something not just there. It's not meshing. I want to be able to look at it from afar and experience the website as a seamless whole - and this just isn't doing that yet.

I think the main idea is great, the basic design looks clean. However I want to reiterate what other people have already pointed out - the logo looks very mismatched: and I want to go further and say that you could benefit from making the links look a little cleaner. By "cleaner" I mean that the background for the rounded links looks a bit too much, and actually does nothing to enhance the "round" feeling the rest of the site has. I'd work on making them look a little less photoshopped. The "start here" hover effect is also a bit too much; I like the background color change - maybe just do away with the bold and underline alltogether?

But isn't it too... yellow? O__o

I've been working on this lovechild for a week straight now, and am beginning to lose all direction on how to tidy it up and finally bring it together. I'm satisfied with the basic design - yet there is something still off, and at this point, I've lost my spider sense as to what that is. The site. (links not up yet; some minor kinks in Safari still, I think.) Does the sub-menu white line make it too cluttered? Is the background too fruity? I'm not getting that sense of wholeness and simplicity I tried to pull off originally. Is the shadow on the main content onto the sidebar too harsh? Any critique much appreciated. I really want this one to be good. Help me nail it!

Nope - offending pixel rupture still there.

I remove or set my own margin and padding on every element - but targeting the entire html is so much more elegant a solution. I'll try it out for curiosity's sake right away.

Update: I solved it by setting all four divs to the same size, and skipping borders altogether by slapping them on in photoshop and changing the image size accordingly. Yet still! It's a headscratcher. Why does the way Safari deal with borders and size differ so much? And how come only the #minimenu was affected - I didn't change a thing in the content wrap? One more reason to just say no to Macs.

Hi! I've been doing CSS for a while, but it's my first post on the forum. I'm now working on a new site after a long hiatus from designing. I have three-four consecutive divs, and use background images that when divs are aligned together look pixel-perfect. In all browsers except Safari on Mac, that is. At first I thought Safari had found a way to implode the time-space continuum: my #minimenu looks as if it is 2 pixels bigger than its actual background image size! Here's the scoop. - wrapper: 762px - header: 750px, plus border. - menu: 750px, plus border. Both divs close here. This should put my #minimenu (752px, no border) within the wrapper, not within header or menu - so, it should not matter that it is 2 px bigger than preceding divs: I know this has caused some bg-img issues in Safari. And yet! 2px expanded on both sides. I pushed it 1px to the left by slapping a position:relative on it. Yep, it made #minimenu align in Safari - but only on the left side. Apparently, Safari renders #minimenu as 1px left beyond the header & menu, and the #inwrap (wrapper for content) 1px to the right beyond the header & menu widths. I'm at a loss. I've never really designed for Mac-browser compatibility before, since European customers using Mac are such a small share of visitors. A quick google for known Safari bugs only advised me to use "0 0" or % rather than "top right" when positioning; it didn't solve the problem. Here's a screenshot (Safari 3), and the relevant code. (I have display:table-itis, I've found it to take care of a lot of padding issues in Firefox). Any, and I mean any, help will be greatly appreciated! I know I can re-think my approach completely, and somehow make it work, but it just feels so frustrating to have it be such a clockwork in every other browser only to get show down by Safari. http://img91.imageshack.us/img91/6666/safariuffhk2.jpg #wrap { margin:0 auto; background:#fff; padding:0; width:762px; border:1px solid black; display:table; } #header { padding:0; width:750px; height:250px; margin: 0 auto; margin-top:5px; background:url(img/header3.jpg) 50% 50%; border:1px solid #333; display:table; } #menu { width:750px; height:90px; padding:0; margin: 0 auto; border:1px solid #000; border-top:0; border-bottom:0; background:#f8a500 url(img/menu.jpg) bottom center no-repeat; display:table; } #minimen { width:752px; height:63px; padding:0; margin:0 auto; margin-bottom:-1px; background:url(img/mini2.jpg) 0 0 no-repeat; display:table; } #inwrap { width:752px; background:url(img/shadow2.jpg) 0 0 repeat-y; padding-top:20px; padding-bottom:20px; margin-bottom:25px; margin:0 auto; display:table; }