rogerio Posted August 20, 2012 Share Posted August 20, 2012 (edited) EDIT: This is true for FF only: I have a background image that sizes to the browser window. In the center of the image is a clickable div that has a horizontal and vertical margins. The problem is that the entire height of the div is clickable horizontally and I want only the center. See attached image. #bgImg{position:absolute;top:0px;left:0px;width:100%;height:100%;z-index:-1;overflow:hidden;}#content{margin-top:4%;margin-left:23%;margin-right:26%;height:82%;background-color: #fff;opacity:.5;filter: alpha(opacity=0);overflow:hidden;} <body> <div id='bgImg'> <img id='bgImg' src='images/DefaultBG.jpg'/> <a href="pages/main.html"> <div id="content"> </div> </a></div></body></html> Edited August 20, 2012 by rogerio Link to comment Share on other sites More sharing options...
niche Posted August 20, 2012 Share Posted August 20, 2012 (edited) height/width (100%) get inherited. Give your link its own dimensions possibly in a wrapper. Edited August 20, 2012 by niche Link to comment Share on other sites More sharing options...
rogerio Posted August 20, 2012 Author Share Posted August 20, 2012 niche, I tried about a dozen options and they make changes to IE, but FF refuses to cooperate. Given that the height/width are inherited, why doesn't the link span the entire height as it does for the width? Link to comment Share on other sites More sharing options...
dsonesuk Posted August 20, 2012 Share Posted August 20, 2012 1) You can't have multple identical ID references within a page.2) You can't us an block element DIV within a inline A (anchor) element. give the content position: relative; then place anchor within content and give it position: absolute; top:0; left:0; right: 0; bottom:0; Link to comment Share on other sites More sharing options...
rogerio Posted August 20, 2012 Author Share Posted August 20, 2012 I think this is what you said; if so FF is working the same as before and IE has no link. <style type="text/css">#bgImg{ position:absolute; top:0px; left:0px; width:100%; height:100%; z-index:-1; overflow:hidden;}#content{ position:relative; margin-top:4%; margin-left:23%; height:82%; width:51%; background-color: #fff; opacity:.5; filter: alpha(opacity=0);}#link{ position: absolute; top:0px; left:0px; right: 0px; bottom:0px;}</style></head> <body> <div id='bgImg'><img src='images/DefaultBG.jpg' style='width:100%; height:100%'/> <div id="content"> <a href="pages/main.html" id='link'></a> </div> </div></body> Link to comment Share on other sites More sharing options...
dsonesuk Posted August 20, 2012 Share Posted August 20, 2012 1********************************************************) have you define <!DOCTYPE>, no doctype, IEeey does not worky Link to comment Share on other sites More sharing options...
rogerio Posted August 20, 2012 Author Share Posted August 20, 2012 header <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><title>Decision Time</title><meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1'> Link to comment Share on other sites More sharing options...
entropy Posted August 20, 2012 Share Posted August 20, 2012 This seems to work in FF with me: <html><head><style type="text/css">#bgImg{position:absolute;top:0px;left:0px;width:100px;height:100px;z-index:-1;overflow:hidden;}#content{margin-top:4%;height:82%;background-color: #fff;opacity:.5;filter: alpha(opacity=0);overflow:hidden;}#contenta {margin-left:23%;margin-right:26%;}</style></head><body> <div id='bgImg'> <img id='bgImg' src='images/DefaultBG.jpg'/> <div id="contenta"> <a href="pages/main.html"> <div id="content"> </div> </a> </div></div></body></html> Link to comment Share on other sites More sharing options...
rogerio Posted August 20, 2012 Author Share Posted August 20, 2012 I get the link all the way across the page. IE gives me a small image in upper left corner. Link to comment Share on other sites More sharing options...
dsonesuk Posted August 20, 2012 Share Posted August 20, 2012 The img is now back in the flow of other elements, because its position absolute is now removed, it therefore takes up 100% height, and with #bgImg taking a 100% of the browser screen area, and using overflow: hidden; anything forced below this (ie #content) is hidden from view. try #bgImg, #bgImg img{ position:absolute; top:0px; left:0px; width:100%; height:100%; z-index:-1; overflow:hidden;} position absolute; forces it to take up no space, and so the vacated space will be taken up by #content; Link to comment Share on other sites More sharing options...
rogerio Posted August 20, 2012 Author Share Posted August 20, 2012 this is what I ended up with and it works perfect with one minor change to your tip dsonesuk. <style type="text/css">#bgDiv, #bgImg{ position:absolute; top:0px; left:0px; width:100%; height:100%; z-index:-1; overflow:hidden;}#content{ position:relative; margin-top:4%; margin-left:23%; height:82%; width:51%; background-color: #fff; opacity:.5; filter: alpha(opacity=0);}#link{ position: absolute; top:0px; left:0px; right: 0px; bottom:0px;}</style></head><body><div id='bgDiv'><img src='images/DefaultBG.jpg' id='bgImg'/> <span id='tooltip0' class='tooltip'></span> <div id="content" onMouseOver='showText(event, 0);' onMouseOut='HideTip(0);'> <a href="pages/main.html" id='link'></a> </div></div></body></html> Link to comment Share on other sites More sharing options...
rogerio Posted August 21, 2012 Author Share Posted August 21, 2012 quirk - after uploading to the net: if I leave the .css code embedded, everything is fine; if I put it in a separate file, it doesn't work. I know the .css is being found because the background image is getting resized. WHY????? Link to comment Share on other sites More sharing options...
rogerio Posted August 21, 2012 Author Share Posted August 21, 2012 ping, someone must know something... Link to comment Share on other sites More sharing options...
niche Posted August 21, 2012 Share Posted August 21, 2012 Do the usual debugging. Check filenames, take everything out and put it back in one-at-a-time. Try different doctypes. USE YOUR DEVELOPER TOOLS. Link to comment Share on other sites More sharing options...
rogerio Posted August 21, 2012 Author Share Posted August 21, 2012 I do - when they work. I had a problem this morning and neither FF or IE responded; after an hour, I finally found the problem. Debugging is the short coming of all .css, html and javascript. another issue is that I happen to pick a Linux server to use and, of course, it is case sensitive and that took some time to fix that. This whole thing has been a huge learning experience after laying off for many years and all the changes that have developed. Many of the things that I knew in the past are history and it gets me in trouble. Link to comment Share on other sites More sharing options...
niche Posted August 21, 2012 Share Posted August 21, 2012 Self-directed learning is the toughest of all. You're for everything the resources, the answer, and the question. Link to comment Share on other sites More sharing options...
dsonesuk Posted August 21, 2012 Share Posted August 21, 2012 if you have uploaded to net, perhaps a link to said problem page, will help us identify what is preventing this page from functioning as it should. Link to comment Share on other sites More sharing options...
rogerio Posted August 21, 2012 Author Share Posted August 21, 2012 (edited) Everything is working as of a couple of minutes ago, but here is a link anyway and if you have any suggestions I am listening... http://www.voidtoeternity.com/ Edited October 6, 2012 by rogerio 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