Trouble with CSS & DIV positioning

[AndreasB 0]

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

[Err 10]

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.

[AndreasB 0]

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}>

[AndreasB 0]

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

[Err 10]

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;}