Jump to content

Trouble with CSS & DIV positioning


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 post
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 post
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 post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...