Web Design critique request

[DreamThrall]

Hello everyone... I'm working on my wife's e-commerce site for her jewelry design business, peapod treasures. I'm usually more of a programmer than a designer, so it would be great if I could get some feedback on the design and "artsyness" side of the website:

http://www.peapodtreasures.com

Note it is still a work in progress... and please ignore the green "add to cart" square, that's going to be changed. The main page is the only one I've done so far, but you can see where I'm going with the design and such from there. Please let me know what you think! Thanks!

EDIT: Oh, there are two pictures of her products on the site there, and you can see more of what she does at http://peapodtreasures.etsy.com and compare the jewelry to the style of the site Thanks again!

 

[Munro]

Sorry, I don't know if it's just me but I can't seem to establish a connection with your site ;(

 

[No Limit]

Design looks nice and simple but you have a lot of CSS alignment issues in IE 6.0 and in Firefox. Have you tested your site in these 2 browsers?

 

[DreamThrall]

i've tested in both IE7 and FF2, but not IE6 or FF1.5 :\ ... but things are supposed to be overlapping (with the exception of the aforementioned ugly green "add to cart" box) - that's part of the "artsyness" i was talking about

 

[No Limit]

i've tested in both IE7 and FF2, but not IE6 or FF1.5 :\ ... but things are supposed to be overlapping (with the exception of the aforementioned ugly green "add to cart" box) - that's part of the "artsyness" i was talking about

In IE 6 and Firefox 2 the prices for the 2 items overlap the descriptions making both hard to read. I am running on 1280x1028

 

[DreamThrall]

Oh yeah the price is screwed up because of the "add to cart" box... sorry, should've said that too. Both the box and the price are supposed to be at the baseline of that yellow box there.

By the way, doing this layout in both FF and IE was a HUGE pain the ass because of the way they each calculate margin/padding into the width and height of the element... so basically anything that's positioned absolutely or relatively has to have two separate CSS selectors... one normal one and one with * html for IE... blech. So for that reason there might be slight size/position irregularities between IE and FF because I cba to make them exactly the same. I don't think it really matters as long as they both look good.

 

[Munro]

Finally got it working, forgot to turn off an IP blocker :E

On first glances, it's quite bright but not overly so. The layout is clean and simple which I like. The only problem of course is the alignment issues.

In IE6 and Firefox2 the content is completely out of position and needs looking at. On the front page the "add to cart" box is overlapping the product description as well as the price. On the product pages all of the content is flung to one end or the other. I don?t know if this is another error but the product page text needs to be nested in a box like the front page or the font text changed - it is very hard to read light green text on a light yellow background IE also doesn't display the top logo properly.

I've included two screenshots that show this.

Get the alignment/display bugs fixed and you have yourself a good looking site.

 

[DreamThrall]

damnit, does IE6 and earlier not support the PNG format correctly or something? also, the only page that is done correctly is the front page... the product detail/shopping cart pages aren't currently styled at all, so what you see there is just the remnants of the default template from prostores.

 

[No Limit]

damnit, does IE6 and earlier not support the PNG format correctly or something? also, the only page that is done correctly is the front page... the product detail/shopping cart pages aren't currently styled at all, so what you see there is just the remnants of the default template from prostores.

Nope, IE has not supported PNG transparency until their latest release, and even now I'm pretty sure they have problems with it. That logo image doesn't have too many colors, you should be okay using a simple gif. Might make the size a bit larger but at least it will display properly.

Edit:

My advice to you for now would be to use a table layout and drop the CSS positioning until you can get more used to it. I personally can not stand CSS. Its a great concept and idea but until Microsoft and Firefox get on the same page it is a total pain in the ass to work with. I know a lot of people have jumped on the "tables suck" bandwagon but tables are still very effective in standard HTML layout.

 

[DreamThrall]

ugh, i hate working with tables... its incredibly confining. I wouldn't be able to do any of the neat overlapping stuff I'm doing now unless I use the same CSS positioning i'm doing now, and then I may as well be using divs anyways.

its not that i'm not used to it, its just that it's a tedious pain in the butt. i'd still rather fight through it than have tables though.

don't get me wrong - I'm not a bandwagon jumper - in fact, until very recently, I was all about making me some table-based layouts. there's just so much more you can do with divs, the css float property, and positioning.