I'm working on a redesign of my website: http://www.gogogadgetearl.com/ . I created a mockup in Fireworks, and then created all the image slices. I created a test page and slapped the images and CSS up there in whatever way I could get them to fit. It looks great in Firefox, but I know my CSS could be cleaner and I know it could work across more browsers. Currently, Firefox is the only browser my test page displays properly in. That's why I'm here. I'm curious if any of you guys (or ladies) might know what parts of my CSS aren't Kosher, and what I could do to get this page to display right in more browsers. I'm not worried about IE - we all know how hopeless it is - but I would like it to display well in Firefox, Opera, Safari, and Konqueror (if it can be done). I know I don't have the menus in there yet - I'm working on it. Any help would be greatly appreciated! Link to my test page: http://www.gogogadgetearl.com/new/ You guys know where to find the [X]HTML and the CSS - I shouldn't have to post it here.
Visbility should be "visible" not "show" You page is missing a title? It looks quite a bit different between Safari and FF. I'm not sure if the missing banner is causing that or not.
OK, I coded for the menu. But it still looks off in other browsers. Where is my CSS wrong/bad and how can I make it better?
The big text ("gogogadgetearl") doesn't show up in safari because you have the :before / :after set as block. There are gaps caused by the bottom padding in divs like the div.day. Hopefully that gets you started with the Safari problems. I didn't test to see how that effects the display in the other browsers, but you can play around with it. Also, be aware that being so exact with all of your dimensions (by using pixels), your layout is not going to work well with anything other than the default font size.