AndreasB Posted January 24, 2006 Share Posted January 24, 2006 Hi all you CSS Gurus!I need help, becuase I can not find WHERE I'm going wrong!I have created a webpage (see theWebpage) where the whole page is designed using the DIV-tag and the positioning.Now, to my issue. In Internet Explorer everything looks just GREAT!But when viewing the page with FireFox, some of the backgrounds in some of the DIV's wont show up!I think and think what can be wrong, and now I'm looking for your help, who view the inserts on this FORUM.I have verified the CSS code with W3C CSS Validation page and it appeared to be OK!This is how my CSS skript looks like: /* THIS IS THE CASCADING STYLESHEET FOR REVYMAKARNA.SE */body { background-color: #000000; margin: 0px; padding: 0px; color: #ffffff; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; font-weight: normal;}/* SOME DEFINITIONS FOR UNDERSTANDING PURPOSE CTL = Curtain Top Left CTM = Curtain Top Middle CTR = Curtain Top Right CCL = Curtain Center Left CCR = Curtain Center Right*/div#CTL { position: absolute; top: 0px; left: 0px; width: 138px; height: 220px; z-index: auto; background-color: #000000; background-image: url(imgs/ctl.jpg); background-repeat: repeat-y; background-attachment: fixed; }#CTM { position: absolute; top: 0px; left: 138px; width: 744px; height: 138px; z-index: auto; background-color: #000000; background-image: url(imgs/ctm.jpg); background-repeat: repeat-x; background-attachment: fixed;}#CTR { position: absolute; top: 0px; left: 882px; width: 138px; height: 220px; z-index: auto; background-color: #000000; background-image: url(imgs/ctr.jpg); background-repeat: repeat-y; background-attachment: fixed;}#CCL { position: absolute; top: 220px; left: 0px; width: 138px; height: 376px; z-index: auto; background-color: #000000; background-image: url(imgs/ccl.jpg); background-repeat: no-repeat; background-attachment: fixed;}#CCR { position: absolute; top: 220px; left: 882px; width: 138px; height: 376px; z-index: auto; background-color: #000000; background-image: url(imgs/ccr.jpg); background-repeat: no-repeat; background-attachment: fixed;}#menu { position: absolute; top: 145px; left: 140px; width: 740px; height: 20px; z-index: auto; background-color: #222222;}#main { position: absolute; top: 166px; left: 140px; width: 740px; height: 420px; z-index: auto; background-color: #ffffdd;} Anyone who can help me out?!THANKS 4 any kind of help!--Andreas Link to comment Share on other sites More sharing options...
Err Posted January 25, 2006 Share Posted January 25, 2006 Perhaps it's becuase you have your background-attachment to fixed, if the image you are using is too small it will not show until you scroll past a certain point. The no-repeat attribute might also complicate things. Also it might be better to set all your properties into one decloration like so: background: #000000 url(imgs/ctr.jpg) no-repeat fixed; Hope that helps out some. Link to comment Share on other sites More sharing options...
AndreasB Posted January 26, 2006 Author Share Posted January 26, 2006 Hi there!I thank you for your help, but unfortunately it didn't solve my problem!I was informed that some browers doesn't print the "DIV-tag" if there is no content in the DIV, but I've filled the DIV's with text without any better results anyhow.Anyone else got any suggestions?Thanks!!-Andreas Perhaps it's becuase you have your background-attachment to fixed, if the image you are using is too small it will not show until you scroll past a certain point. The no-repeat attribute might also complicate things. Also it might be better to set all your properties into one decloration like so:background: #000000 url(imgs/ctr.jpg) no-repeat fixed; Hope that helps out some. <{POST_SNAPBACK}> Link to comment Share on other sites More sharing options...
AndreasB Posted January 27, 2006 Author Share Posted January 27, 2006 Please have a look at the site at http://www.revymakarna.se/v2 and see it. Hopefully you have FirFox installed and then able to view how "wierd" it acts!I'm thankful for any kind of tips!--Andreas Link to comment Share on other sites More sharing options...
Err Posted January 27, 2006 Share Posted January 27, 2006 The Positions were fixed, that was causing the problem in other browsers. I removed it, and fixed the background declorations. /* THIS IS THE CASCADING STYLESHEET FOR REVYMAKARNA.SE */body {background-color: #000000;margin: 0px;padding: 0px;color: #ffffff;font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 11px;font-weight: normal;}/* SOME DEFINITIONS FOR UNDERSTANDING PURPOSECTL = Curtain Top LeftCTM = Curtain Top MiddleCTR = Curtain Top RightCCL = Curtain Center LeftCCR = Curtain Center Right*/div#CTL {position: absolute;top: 0px;left: 0px;width: 138px;height: 220px;z-index: auto;background: #000000 url(http://www.revymakarna.se/v2/imgs/ctl.jpg) repeat-y;}#CTM {position: absolute;top: 0px;left: 138px;width: 744px;height: 138px;z-index: auto;background: #000000 url(http://www.revymakarna.se/v2/imgs/ctm.jpg) repeat-x;}#CTR {position: absolute;top: 0px;left: 882px;width: 138px;height: 220px;z-index: auto;background: #000000 url(http://www.revymakarna.se/v2/imgs/ctr.jpg) repeat-y;}#CCL {position: absolute;top: 220px;left: 0px;width: 138px;height: 376px;z-index: auto;background: #000000 url(http://www.revymakarna.se/v2/imgs/ccl.jpg) no-repeat;}#CCR {position: absolute;top: 220px;left: 882px;width: 138px;height: 376px;z-index: auto;background: #000000 url(http://www.revymakarna.se/v2/imgs/ccr.jpg) no-repeat;}#menu {position: absolute;top: 145px;left: 140px;width: 740px;height: 20px;z-index: auto;background-color: #222222;}#main {position: absolute;top: 166px;left: 140px;width: 740px;height: 420px;z-index: auto;background-color: #ffffdd;} Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now