homepage Welcome to WebmasterWorld Guest from 50.17.86.12
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, Moderators: not2easy

CSS Forum

    
CSS, div background incorrect in Netscape 6
Div background shows as body background
HarryM

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 536 posted 11:30 pm on Jan 16, 2003 (gmt 0)

I have a 700px wide container div centered in the window. Within that is an internal div 604px wide positioned relative to the container div so that it is centered.

The internal div has a background jpg 604px wide set at the bottom. This displays correctly in IE6, and scrolls as part of the page as it should.

But in NN6 it displays at the bottom left of the window. The page can be scrolled, but the background jpg stays fixed, exactly as if it were specified in the body.

In Opera 6 it doesn't show at all! - But then that's Opera :(

My code for the internal div is:

div.innerdiv {
position:relative;left:48px; /* relative to container div */
width:604px;
padding:0px;
text-align:left;
background-image:url(http://domain/image.jpg);
background-attachment:fixed;
background-position:0% 100%;
background-repeat:no-repeat;
}

I have also tried "background-position: bottom left;"

I would be gratefull for any ideas. The web site is in my profile.

 

SuzyUK

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



 
Msg#: 536 posted 1:50 am on Jan 17, 2003 (gmt 0)

background-attachment: fixed is not widely supported as you've described. The symptoms in each different browser makes the design incompatible.

now presuming that you want this graphic to appear in each browser showing at the bottom (with a nice overlap as observed in IE6) then I would not use attachment:fixed; but instead I would position the div relatively (or not position at all!) but give it a negative top margin which would give the "overlap" and should appear relative(default) to the content in which ever browser...

Suzy

<edit> attachment (not position)</edit>

[edited by: SuzyUK at 2:29 am (utc) on Jan. 17, 2003]

HarryM

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 536 posted 2:17 am on Jan 17, 2003 (gmt 0)

Thanks SuzyUK,

I think I get what you mean. Will give it a go. Bet one the browsers won't like it! :)

SuzyUK

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



 
Msg#: 536 posted 2:48 am on Jan 17, 2003 (gmt 0)

Harry that's a given..

Worst case is that you put the graphic in a "footer" so it will always be at the bottom you just won't have that pleasant overlap that IE6 shows...

but look on the bright side it'll look like you want it to in a few years time!

Suzy:)

<added> that's when we're all older and wiser of course ;)</added>

HarryM

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 536 posted 3:07 am on Jan 17, 2003 (gmt 0)

SuzyUK,

I just had a brainwave and removed the line "background-attachment:fixed;"

It now works perfectly in IE6 and NN6 with overlap.

In Opera the image is at the bottom of the div, although there's no overlap, and it puts in acres of extra space between the links and the image. But I can probably get around that.

I think my problem arose because this is the first background image I had tried, and I didn't properly understand what some of the terms meant.

Still, you live and learn! Hopefully! :)

Harry

SuzyUK

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



 
Msg#: 536 posted 3:19 am on Jan 17, 2003 (gmt 0)

Harry that's great, glad it works..

always living and learning is my motto!

try adding padding: 0; margin: 0; too if possible (again IE box model might restrict? if you're using the div properties for something else) but otherwise it should hopefully make Opera play ball...

Suzy

DrDoc

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



 
Msg#: 536 posted 3:42 am on Jan 17, 2003 (gmt 0)

The problem with rules like
fixed is that each browser interprets it differently.

Most browsers understand it as absolute

IE is probably the most inconsistent in its interpretation. Opera the most correct, then Mozilla/Gecko ..
If it works in OP/MZ, it usually works the way it should in IE too :)

WibbleWobble

10+ Year Member



 
Msg#: 536 posted 10:18 am on Jan 17, 2003 (gmt 0)

If it works in OP/MZ, it usually works the way it should in IE too :)

IE renders position:fixed terribly, at least in 5.5, so while I don't know about v6 this seems a bold statement, especially given you just said IE was inconsistent :)
Moz does it lovely.

I must seem like such a theatric Moz fan.

theonliest

10+ Year Member



 
Msg#: 536 posted 2:52 pm on Jan 17, 2003 (gmt 0)

HarryM, yer post should've been called:
'CSS, div background incorrect in IE 6'
Netscape is displaying the 'background:fixed' property correctly, ie the background is fixed relative to the browser window NOT it's containing div, which doesn't make sense to me but thats the way it works.

HarryM

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 536 posted 7:47 pm on Jan 17, 2003 (gmt 0)

theonliest,

Netscape is displaying the 'background:fixed' property correctly

Sorry, but as an IE6 fan I have to disagree with that! :)

The property was applied to a div. If NN considered it incorrect it should have ignored it, not applied it to the body.

Anyhow it works now. Thanks everybody for your help.

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