Forum Moderators: not2easy
My problem may be stupid but I've been trying to solve it for quite sometime without success. I have a background image that i'm trying to position at the bottom right corner. Everything is fine with IE6 and opera 7, but when i tested with netscape 7.0 and opera 6 ... the background image forces one big chunk of white space into the right of the outer div, together with itself, now the total registerOuter width becomes 500px + image-width. But when i place the image in the inner div, everything appears fine. How do i solve the problem.
#registerOuter { position: relative ; left: 0px ; top: 0px ; z-index=5; width:500px ; padding-bottom: 70px ; padding-top: 0px ; padding-left: 60px ; padding-right: 60px ; background: #ffffff ; background-image: url "/resource/pic/pageDeco/00.gif") ; background-position: right bottom ; background-repeat: no-repeat ; }
#registerInner { position: relative ; left: 0px ; width: 380px ; top: 0px ; z-index=10; padding-bottom: 0px ; padding-top: 0px ; padding-left: 0px ; padding-right: 0px ; }
There is an error in your background-image call. You have
background-image: url "/resource/pic/pageDeco/00.gif")
It should be formatted like this:
background-image: url(/resource/pic/pageDeco/00.gif);
You could also use shorthand for your padding and background calls, upi need no units for 0 values, use colon(":") instead of equals ("=") and a relatively positinioned layer does not take a left or top value:
#registerOuter {
position: relative;
z-index:5; //: instead of =
width:500px;
padding: 0 60px 70px 60px; //top-right-bottom-left
background: #fff url(/resource/pic/pageDeco/00.gif) no-repeat right bottom;
//color-image-repeat-position
}
HTH
I've realised that somehow i have copied and pasted my code to miss out "(". Anyway, I've done some trimming of my code as suggested and ... the problem persists. The protruding background always persists even when i removed the image. So finally i decided to include a table inside #registerOuter and set it to cntain the background and my problem has been solved .. not very cleaver but at least i'm half a happy man now. sigh ...
#registerOuter { position: relative ; left: 0 ; top: 0 ; width: 500px ; z-index: 5 ; padding: 0 0 0 0 ; }
.registerOuter { background: #ffffff url(/resource/pic/pageDeco/01.gif) no-repeat bottom right ; }
#registerInner { position: relative ; left: 0 ; top: 0 ; width: 380px ; z-index: 10 ; padding: 0 60px 70px 60px ; }
