Welcome to WebmasterWorld Guest from 54.166.178.177

Forum Moderators: not2easy

Message Too Old, No Replies

CSS and opera

positioning all wrong, wrong, wrong

     
12:31 pm on Oct 18, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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?

12:33 pm on Oct 18, 2002 (gmt 0)

WebmasterWorld Administrator brett_tabke is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



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.
12:35 pm on Oct 18, 2002 (gmt 0)

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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

Nick

12:36 pm on Oct 18, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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.
12:47 pm on Oct 18, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

1:42 pm on Oct 18, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

1:44 pm on Oct 18, 2002 (gmt 0)

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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

1:53 pm on Oct 18, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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...

5:25 pm on Oct 18, 2002 (gmt 0)

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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

5:36 pm on Oct 18, 2002 (gmt 0)

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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

Nick

9:54 am on Oct 21, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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?

11:03 am on Oct 21, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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.
11:08 am on Oct 21, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

 

Featured Threads

Hot Threads This Week

Hot Threads This Month