CSS suggestions

[barrysfarm]

I'm working on a redesign (and refocus) of my website. It used to be a blog that sold handmade t-shirts and I'm switching it to a shirt store that has a blog attached.

Here are the two templates, one of the main page, and one of an individual shirt. I've used css a couple times before for layout, and am using it for this. I want this site to be written as efficiently as possible, keeping the design in mind. So any suggestions on how to do anything better would be appreciated. I know that I can use the same style sheet file for both, and plan too, I just haven't gotten around to it. I also plan to redo the header (which I did with photoshop and imageready) as explained in another thread.

Everything looks fine in Safari, Firefox (mac and pc), and Netscape, but I'm having trouble with IE for windows on the product page. The picture box is in the wrong position.

front
product
front style sheet
product style sheet

Any suggestions?

 

[Rower_CPU]

It looks to me like an issue of IE's box model. Try adjusting the widths of your "main" and "photo" divs as well as the padding between them to get them both to fit into your "container" div. You might also try just increasing the width of your container div slightly.

If that doesn't work, check out this article on IE's expanding box bug.

 

[barrysfarm]

Thanks!

I found out if I changed the width of the divs it would look correct in IE, but in nothing else, and I do know how to make separate stylesheet files for different browser, but I investigated further.

The way I fixed it was under a different tutorial on that site. Basically there's a bug in IE that makes divs with "float:left;" double there margin value. There is a simple workaround, however. Just add "'display:inline;" in the css under the div with the float in it. Seems to have worked for me.

If anything sees anything blatantly wrong with my site, or can think of a better way to do anything, let me know.

 

[Rower_CPU]

Glad you found a solution. Looks fixed.