Jump to content

Trouble with CSS & DIV positioning


AndreasB

Recommended Posts

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

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

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.

Link to comment
Share on other sites

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...