I'm trying to perfect a three column design at the moment. It has three vertical divs and one top "banner" type div. The banner div contains an image which shows up just fine in IE but not in Opera. So while the positioning is fine in IE, the positioning in Opera looks all askew. I think it is the image which is the problem but there is nothing wrong with it in the code.
I heard that we're not supposed to post code here, so I wont, but does anybody have any idea what I am doing wrong?
Cheers guys. I was testing the style on one page- so I was keeping it inline- but when I uploaded the css to its proper place (i.e. its own file) the problem became clear: the image was too big for the div layer at the top- IE must compensate for this but Opera didn't- but it showed me where I was going wrong.
Right... Now I'm having a problem with the left distance of the div in terms of cross browser compatibility. At the moment the value is left:10px; and IE is fine with this. Opera, however, is not. I can change it so that it looks right in Opera (left:6px;) but then it looks 4px off in IE...
This is driving me crazy... ;)
Edit- that first ;) wasn't supposed to be a ;)- just valid mark up! :)
It could be the borders. I've had the same prob with how borders display between Opera and IE. You could try temporarily removing the borders to see if it straightens out. If that is the prob, I can't tell you how to fix it. I don't know if there is a way. I was told to allow a little breathing room between the divs for rendering differences.
The way it works now it renders perfectly in IE and slightly off in Opera. I can change the distances around to get it right in Opera but then it looks slightly off in IE. The slightly askew actually looks ok... So I might just leave it as it is- it is starting to do my head in...
Edit- thanks to all though, where else could I go and get feedback like this! :)