I'm learning CSS (well, I've got an understanding of it, let's say experimenting) and a few nights ago I had the idea to make a completely css-based design -- IE: FEW (If ANY!) TABLES!
So I was going along, doing this and that, and I ran into a problem. I've got an image that floats right, but there seems to be two margins on the left and right of them. I've tried margin = 0, border = 0, and I just don't know what the heck is wrong!
The website is here, and the image that's giving me all the trouble is the cow looking one.
Feel free to look at the HTML, CSS, etc. Right now I know the HTML/CSS is messy, that's because I've been trying everything to fix this darn thing!
Another problem is that the design is supported (aka looks good) by IE, as I haven't yet fitted it for Firefox. Is there any documentation that will tell me what exactly Firefox (Mozilla) supports?
If you help, wife baked a fresh batch of cookies....
You must be talking about the famous "3-pixel jog" bug in IE. The way around this is to specify a height for the element to which the margin is being improperly applied. Using -3px margin shifts the object three pixels to the side in all browsers, meaning every other browser will see it screwed up in a different way. Instead, try adding something like height:1% to the element with the extra margin. That should make the margin disappear without causing any harm to the rest of the layout.
Creating one file that works across all browsers is a better scenario than using unreliable browser sniffing to serve up the right CSS file.