I've been having some fun today. Apart from not getting out of bed to earn my keep (aren't laptops great) I've been playing with techniques from the book "CSS Mastery" by Budd, Moll and Collison. This playtime will form the Genesys Consulting website, which will go online when I'm done with it.
However, I've run into a big problem. The Fuzzy CSS Shadow technique in the book (also found on A List Apart) has the annoying problem that it floats the image to the left. This causes me whole swathes of problems because this image needs to be centered. I've uploaded a test version to my beta site (beta.steel-software.com) so you can have a look.
The following ideas do not work:
- If I apply ato it, nothing happens
- If i remove the float:lefts from the CSS, the shadows break
- The page is liquid layout and having margin-left: 40% produces different results in FF compared to Opera/Safari
- I would also want to be using different images for that section, loaded in from a db, not all of them will be the same width, so a margin-left: 300px won't do either.
This is all explained in a plea I made on CodingForums.com. So, I'm now asking you lot, the people who read my blog (yes, all 2 of you). If you know what I can do to fix this problem, please leave the answer in a comment, send me an email (steve dot workman at gmail dot com) or write on my facebook wall.
Currently Listening to: Zero 7 Currently Watching: BBC2 Currently Reading: CSS help sites! Currently Eating: Sunday roast, mmmmmmm