homepage Welcome to WebmasterWorld Guest from 54.197.147.90
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
CSS and opera
positioning all wrong, wrong, wrong
edit_g




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

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




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

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




msg:1211951
 12:35 pm on Oct 18, 2002 (gmt 0)

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

Nick

Birdman




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

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




msg:1211953
 12:47 pm on Oct 18, 2002 (gmt 0)

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




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

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




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

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




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

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




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

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




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

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

Nick

edit_g




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

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




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

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




msg:1211961
 11:08 am on Oct 21, 2002 (gmt 0)

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved