SirChick Posted August 13, 2007 Share Posted August 13, 2007 I have a difficult problem and for the life of me and a few html experts we have not worked out how i even managed to do this. I have this as a layout in 3 layers: Background then on top of the background An image then on top of the image General text Now i used the same code through out and it worked for all but one. Now the difference with this one anomaly is the layers are in this order: Background then on top of the background General Text then on top of the text An Image this is obviously wrong but we don't know why suddenly the text is given 2nd priority instead of 3rd. Meaning the image is over the text so the text is not visible anymore. Normally the text is visible over the image! Image has been attached to show you. What should i been looking for in my html to fix this.. i would like to try myself firstly just need some guidance on what i need to look for... but if no success ill post my html up for you guys to try. [attachment deleted by admin] Quote Link to comment https://forums.phpfreaks.com/topic/64759-layers/ Share on other sites More sharing options...
php_tom Posted August 13, 2007 Share Posted August 13, 2007 I'm not exactly a CSS guru, and I have no idea WHY its doing that (especially without seeing your code) but one possible fix would be to use the CSS z-index specifier to manually set which element is on top of other elements. See this link: http://www.w3schools.com/css/pr_pos_z-index.asp Hope that helps. Quote Link to comment https://forums.phpfreaks.com/topic/64759-layers/#findComment-323021 Share on other sites More sharing options...
ohstereo Posted August 13, 2007 Share Posted August 13, 2007 Would you mind posting your code/CSS so we could find any problems? Quote Link to comment https://forums.phpfreaks.com/topic/64759-layers/#findComment-323026 Share on other sites More sharing options...
SirChick Posted August 14, 2007 Author Share Posted August 14, 2007 <div id="bv_" style="position:absolute;left:76px;top:225px;width:247px;height:79px;z-index:13" align="center"> <img src="menu_gradient.gif" id="Shape2" align="top" alt="" border="0" width="319" height="360"></div> <div id="bv_" style="position:absolute;left:103px;top:291px;width:263px;height:79px;z-index:11" align="left"> <font style="font-size:13px" color="#000000" face="Arial">Your are living at <?= $Country ?>. If you are new to this game why not click the Help Tutorial Link to the right hand side and get to grips with this game!<br> </font></div> <div id="bv_" style="position:absolute;left:150px;top:452px;width:172px;height:70px;z-index:12" align="center"> <font style="font-size:16px" color="#000000" face="Arial"><b><u>Player Stats:<br> </font><font style="font-size:13px" color="#000000" face="Arial"></u></b>Muscle Strength: <?= $Strength ?><br> Muscle Dexterity: <?= $Dexterity ?><br> Self Defence Skill: <?= $Defence ?><br> Agility: <?= $Agility ?><br> Luck: <?= $Luck ?><br> Acumen: <?= $Acumen ?><br> </font></div> <font style="font-size:13px" color="#000000" face="Arial"><b><u>Current User Statistics:<br> </u></b><br> Money: <?= $HandMoney ?> <br> Total Stats: <?= $TotalStats ?><br> </font></div> this is the code Quote Link to comment https://forums.phpfreaks.com/topic/64759-layers/#findComment-323035 Share on other sites More sharing options...
php_tom Posted August 14, 2007 Share Posted August 14, 2007 That doesn't help me much, because you don't have the images, etc. Do you have the page on a server where we could look at it in all its glory? Quote Link to comment https://forums.phpfreaks.com/topic/64759-layers/#findComment-323041 Share on other sites More sharing options...
SirChick Posted August 14, 2007 Author Share Posted August 14, 2007 "<img src="menu_gradient.gif"" second line is the image Quote Link to comment https://forums.phpfreaks.com/topic/64759-layers/#findComment-323042 Share on other sites More sharing options...
dbrimlow Posted August 14, 2007 Share Posted August 14, 2007 Without seeing your whole code in context (but judging by what I DO see) it looks to me like this is 100% quirks mode, non-valid code that "MAY" only ever work as intended in IE. A real browser would choke on the "<div id="bv_"..." being used three times. NEVER use a named ID more than once on a page. HTML Pros should have spotted that immediately. You also are not setting the overflow and/or visibility elements. You designate the image once, yet use three different absolute positioned elements. This code is a mess which means anything goes. Browsers TRY to guess what you intend when you use non-valid code. Show us the whole page (change your links and urls to generic junk if you are nervous). But without seeing the entire context, it is impossible to debug. This is a very simple CSS layout solution that is being used within markup. Any CSS Pro could slap this together easily. But not from a page snippet that suggests the entire page may be flawed. Quote Link to comment https://forums.phpfreaks.com/topic/64759-layers/#findComment-323887 Share on other sites More sharing options...
SirChick Posted August 14, 2007 Author Share Posted August 14, 2007 i got it working just now. all i had to do was re-order the index numbers! Basically the lower the index number the "older" the item is. So that would mean the index 1 was made first so if index 2 is in the same place as index1 it would be "above" index 1. it is a bit messy cos i had to take out the php in between Quote Link to comment https://forums.phpfreaks.com/topic/64759-layers/#findComment-323899 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.