CSS and opera

positioning all wrong, wrong, wrong

[edit_g]

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?

[Brett_Tabke]

Start by validating the code. Put the css external and then validate it too. I've found that will cure 75% of most code problems.

[Nick_W]

If that doesn't work: Post the code! It's URL's we don't post ;)

Nick

[Birdman]

The main problem I have in Opera with positioning is margins. You could try setting margins to all divs, whether it be 0 or not. That usually help me.

[edit_g]

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.

Cheers again. :)

[edit_g]

Sorry to bump this up but:

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! :)

[Nick_W]

body {
padding: 0;
}

For some reason Opera puts padding and margin on the body element...

Although if your positioning absolutely I'm not sure this should matter. Confusing isn't it?

Nick

[edit_g]

The strange thing is though- I am positioning absolutely. I'll try it with the padding thanks Nick_W.

Edit: Dang... that doesn't work...

[SuzyUK]

edit_g

I just tried a test of this and it's working fine IE6 and Opera both

along with all the other info above the only other thing I can suggest is to make sure that positioned div code is not nested within any other divs (so inheriting any additional padding)

i.e. I put mine all at the bottom of my page just above the </body> tag

Suzy

[Nick_W]

Can you give ua an "this problem only" Simplified code example?

Nick

[edit_g]

Ok- I'll post the layout bits of the CSS:

body {
margin:10px 10px 0px 10px;
padding:0px;
}

#left {
margin:0px;
position: absolute;
left:10px;
top:78px;
width:200px;
background:#fff;
border:1px solid #000;
}

#center {
margin:0px;
background:#fff;
border:1px solid #000;
/*
IE5x fix
*/
voice-family: "\"}\"";
voice-family: inherit;
margin-left: 201px;
margin-right:201px;
}
html>body #center {
margin-left: 201px;
margin-right:201px;
}

#right {
margin:0px;
position: absolute;
right:10px;
top:78px;
width:200px;
background:#ccccff;
border:1px solid #000;
}

#top {
margin:0px;
background:#000066;
height:60px;
border-top:1px solid #000;
border-right:1px solid #000;
border-left:1px solid #000;
voice-family: "\"}\"";
height:39px;
}
html>body #banner {
height:60px;
}

p,h1,pre {
margin:0px 10px 10px 10px;
}

Any ideas?

[Birdman]

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.

[edit_g]

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! :)