homepage Welcome to WebmasterWorld Guest from 54.197.183.230
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Browsers / Opera Browser Usage and Support
Forum Library, Charter, Moderator: open

Opera Browser Usage and Support Forum

    
opera 7 what changed
background image problems
mossimo

10+ Year Member



 
Msg#: 172 posted 6:14 pm on May 7, 2003 (gmt 0)

Background image not aliened in opera 7
My background is made to align perfectly with other page elements it tested o.k. in opera 4 so I thought it must then work in version 7 but I won’t. I am using CSS to call the background witch shouldn’t make a difference but I tried defining it in the <body> no luck. What’s going on HELP!

 

universalis

10+ Year Member



 
Msg#: 172 posted 6:43 pm on May 7, 2003 (gmt 0)

There is a bug in Opera 7 which has existed since the first betas and is still there in the latest version. You problem may be related to this: what happens is that if you place the BG image at the bottom of the body element, and the page is long enough to create a vertical scrollbar, Op7 throws a wobbly and usually manages to display the image in the wrong place, often mostly outside the viewing area.

There is no real workaround for the bug that I can think of, unless you hack something up with divs and place the BG image in a div rather than on the body element.

The bug wasn't there in Opera 6.

tedster

WebmasterWorld Senior Member tedster us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 172 posted 6:53 pm on May 7, 2003 (gmt 0)

Interesting bug - I use O7 as my default and haven't run across it, but I'll keep my eyes open.

Aligning a body background image to the page elements with pixel perfect precision is often a gamble, cross-browser. It doesn't matter whether you call the background image with CSS or use the old-school <body> tag method.

It's the page itself that can shift, not the background image. Problems can come from the default margins and padding which various browsers assign to the block level elements. Unless you are meticulous at defining all these rules, surprises can creep in.

Also, depending on the layout, variations in a browser's font rendering can push various elements a few pixels one way or another.

That said, I'm not aware of a change in these areas for Opera 7. But I didn't get serious about designing for Opera until version 6. To resolve this problem, I think you may need to need to pull your layout apart to find where the problems get generated.

mossimo

10+ Year Member



 
Msg#: 172 posted 7:11 pm on May 7, 2003 (gmt 0)

SOLVED! Opera doesn't handle background images in CSS. Even though page margins are set to "0" in CSS opera won't play ball so in addition to the CSS I also declared BG image and page margins in the <body> statement and it worked.

tedster

WebmasterWorld Senior Member tedster us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 172 posted 7:22 pm on May 7, 2003 (gmt 0)

Are you saying that the problem is that Opera 7 doesn't handle the rule properly if it's in an external stylesheet? Wow, that's a new one on me.

Could we see some snippets for what did and didn't work?

mossimo

10+ Year Member



 
Msg#: 172 posted 7:34 pm on May 7, 2003 (gmt 0)

Original CSS Body declaration:

body {
BACKGROUND-IMAGE: url(images/ns_background.gif);
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
}

I also added the same info to my <body> tag:

<body background="images/top_set.jpg" leftmargin="0" topmargin="0">

And after that Opera rendered the page just fine. I may be wrong but such a simple fix tells me that opera was fumbling with correctly interpreting the CSS body element.

universalis

10+ Year Member



 
Msg#: 172 posted 8:08 pm on May 7, 2003 (gmt 0)

The bug is a positioning bug - Opera 7 reacts badly to background images on the body tag when the image is not fixed. Tedster, I've got a very basic test page that I can send you by sticky mail if you want, but try this CSS on a page, then put in enough text to make the page scroll:

body {
border:2px solid red;
margin:0;
padding:5px 100px;
background:url(name_of_image.gif) no-repeat bottom right;
}

The red border will show the edges of the body element - the image should be within this zone, but in Op7, the image creeps outside.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Browsers / Opera Browser Usage and Support
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