ferren Posted August 9, 2015 Share Posted August 9, 2015 (edited) 2 out of 3 is good! Now for the remaining change of behavior. For several years, a bit of code has produced a pop-up box containing a footnote or reference when a link was hovered. It still works, but now if the pop-up box overlaps an image, the text avoids the image below. You can see problem if you paste the attached code into the Try It Editor at http://www.w3schools.com/html/tryit.asp?filename=tryhtml_images_mountain and hover on 'paradigm'. Something in <style> needs to be changed (apparently to keep up with bug fixes in html), but I can't find it. It seems to me that z=1 should make the presence of an image at z=0 irrelevant. It used to! (Immediate edit: I didn't see the attachment, so I changed the file from RTF to plain text and reattached...) Still no attachment visible, and it keeps saying 'No file chosen', so in case it means it, here is what the attachment would have said: --------------------------------------------------------------- <!DOCTYPE html><html> <style> a span { display : none ; } /* Author or dagger: blue, no underline */ a.n { color : blue ; text-decoration : none ; } /* Hover to display Reference or Note in popup box */ a.n:hover span { position : relative ; top : 0px ; /* Place box 1 line below anchor */ right : 10px ; /* Keep edge of box on screen */ display : block ; z-index : 1 ; color : black ; text-decoration : none ; font-size : .90em ; background-color: #ffd ; text-indent : 0 ; outline : 2px solid blue ; padding : 3px ; } .fl { float : left ; margin : 4px 16px 4px 0px; } </style> <body> <h2>Spectacular Mountain</h2> <figure> <img class="fl" src="pic_mountain.jpg" alt="Mountain View" style="width:50%"> <figcaption style="color:brown;">Continually syndicate client-centered resources vis-a-vis covalent <a class="n">paradigms<span> In lobortis quam nisl non accumsan. Veniam delenit minim illum ad quod. Qui eorum nihil lorem parum augue</span></a>. Energistically repurpose out-of-the-box total linkage after frictionless e-commerce. Dramatically reinvent vertical supply chains without B2C best practices. </figcaption></figure> <p>Phosfluorescently benchmark high standards in imperatives after strategic catalysts for change. Rapidiously enable user friendly initiatives via state of the art action items. Monotonectally cultivate end-to-end markets and 24/365 users. </p> </body> </html> Edited August 9, 2015 by ferren Link to comment Share on other sites More sharing options...
dsonesuk Posted August 9, 2015 Share Posted August 9, 2015 Maybe if you validated the code it might solve the problem, it would be difficult to offer a solution when current invalid code may prevent it from working as it should. Link to comment Share on other sites More sharing options...
ferren Posted August 9, 2015 Author Share Posted August 9, 2015 Worth a try. I added charset and title to the <head>, and put a picture where the code could find it, and it validated. Code now reads: ----------------------- <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>Test11</title> <style> a span { display : none ; } /* Author or dagger: blue, no underline */ a.n { color : blue ; text-decoration : none ; } /* Hover to display Reference or Note in popup box */ a.n:hover span { position : relative ; top : 0px ; /* Place box 1 line below anchor */ right : 10px ; /* Keep edge of box on screen */ display : block ; z-index : 1 ; color : black ; text-decoration : none ; font-size : .90em ; background-color: #ffd ; text-indent : 0 ; outline : 2px solid blue ; padding : 3px ; } .fl { float : left ; margin : 4px 16px 4px 0px; } </style> <body> <h2>Spectacular Mountain</h2> <figure> <img class="fl" src="http://electromontis.net/evoligion/_C/C-Images/pic.mountain.jpg" alt="Mountain View" style="width:50%"> <figcaption style="color:brown;">Continually syndicate client-centered resources vis-a-vis covalent <a class="n">paradigms<span> In lobortis quam nisl non accumsan. Veniam delenit minim illum ad quod. Qui eorum nihil lorem parum augue</span></a>. Energistically repurpose out-of-the-box total linkage after frictionless e-commerce. Dramatically reinvent vertical supply chains without B2C best practices. </figcaption></figure> <p>Phosfluorescently benchmark high standards in imperatives after strategic catalysts for change. Rapidiously enable user friendly initiatives via state of the art action items. Monotonectally cultivate end-to-end markets and 24/365 users. </p> </body> </html> --------------------- but the pop-up box still doesn't work the way it used to. I was pleased to see that the Nu validator does not fuss about 'width:50%;' for images. (How else do you keep an image proportional to page width as width is changed?) Link to comment Share on other sites More sharing options...
ferren Posted August 9, 2015 Author Share Posted August 9, 2015 (edited) Afterthought. Same code works at http://www.electromontis.net/evoligion/_C/Test11.html Added in edit: In its first working incarnation, the pop-up box did not displace the z=0 text as it now does. It simply hid it, which is acceptable. This suggests a major change in the behavior of the z-stacking algorithm, not entirely smoothed out yet. It might have been more useful if I had mentioned all this when behavior first changed, because it really looks like an HTML edit that did more than necessary. But--as always--I assumed it was something I had done, and in any case, I was focussed on writing rather than programming. Edited August 10, 2015 by ferren Link to comment Share on other sites More sharing options...
Ingolme Posted August 9, 2015 Share Posted August 9, 2015 The z-index only decides whether an element goes above or below another. Since the span is still within the page flow, it is still affected by the <img> element. To remove the span from the page flow you would need to set its position to absolute rather than relative. Floating the span left or right would also prevent the <img> from affecting it. Link to comment Share on other sites More sharing options...
davej Posted August 9, 2015 Share Posted August 9, 2015 You seem to also be missing... </head> Link to comment Share on other sites More sharing options...
dsonesuk Posted August 9, 2015 Share Posted August 9, 2015 Do you want pop-up to overlap image? IF not! applying overflow: hidden to span will prevent that by cancelling the span being affected by float; Link to comment Share on other sites More sharing options...
ferren Posted August 10, 2015 Author Share Posted August 10, 2015 </head> is now in place; Nu missed that one. Thanks for the suggestions: absolute puts the box somewhere the reader (who is presumably looking at the cursor) isn't looking: not good. overflow:hidden; stays within the width of the caption and makes a cramped box if the image is wide, as it sometimes is. References often don't fold gracefully, and do better in long boxes. overflow:hidden AND float:left; sometimes breaks the caption at the anchor and puts the remainder below the image. Not good. float:left; puts a wide box below the image, or for the rare image at 100% with caption beneath, just below the anchor (where it should be). This appears to be as close to the desired original behavior as we can get these days. All things considered, I liked the old behavior better: overlap the image, text in box runs over image. Alas. (Who thought what needed fixing?) Tutorials still tell me that the box model permits boxes to overlap. Why, if its enclosing box overlaps the image, can't the text of the <span> be persuaded overlap it? ... Suppose I wanted to position the pop-up relative to the cursor, obscuring whatever lay below, in the manner of a tool tip? Do we have any control over tool tips? I will look into this further. I found a suggestion using <abbr> which might work--except that none of my browsers know about it: <p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p> TOR kept getting resets. Safari , iCab, Opera, Omniweb, Aviator, Vivaldi, Chrome and Chromium ignore it. Firefox at least underdotted WHO, but I presume that the expected hovering behavior is to display the unabbreviated title. I might make this work, if browsers cooperated .... (In any case, I'm already using underdots to go the glossary for neologism and jargon.) Link to comment Share on other sites More sharing options...
Ingolme Posted August 10, 2015 Share Posted August 10, 2015 If you use position: absolute, you need to wrap the element inside a parent with position: relative and then set the top, left, width and height properties to put the box where you want it to go. Link to comment Share on other sites More sharing options...
dsonesuk Posted August 10, 2015 Share Posted August 10, 2015 Remove float, apply position: relative to figure outer container element, use position: absolute; on span and DO NOT specify top property, it then naturally position itself beneath the link text and stretched full width and overlaps image, tested in IE, FF, Chrome, Opera, and Safari. Even if you shrink browser window and cause the link to move to second or third line it remains just below link. <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>Test11</title> <style> .fig_popup_outer { position: relative; } .fig_popup_outer figcaption { color:brown; } .fig_popup_outer a span { display: none; } /* Author or dagger: blue, no underline */ .fig_popup_outer a.n{ color: blue; text-decoration: none; } /* Hover to display Reference or Note in popup box */ .fig_popup_outer a.n:hover span{ position: absolute; /* top : 0px ; Place box 1 line below anchor */ right: 10px; /* Keep edge of box on screen */ display: block; z-index: 1; color: black; text-decoration: none; font-size: .90em ; background-color: #ffd; text-indent: 0; outline: 2px solid blue; padding: 3px; } .fl { float: left ; margin: 4px 16px 4px 0px; } </style> </head> <body> <h2>Spectacular Mountain</h2> <figure class="fig_popup_outer"> <img class="fl" src="http://electromontis.net/evoligion/_C/C-Images/pic.mountain.jpg" alt="Mountain View" style="width:45%"> <figcaption>Continually syndicate client-centered resources vis-a-vis covalent <a class="n">paradigms<span>Um lobortis quam nisl non accumsan. Veniam delenit minim illum ad quod. Qui eorum nihil lorem parum augue. In lobortis quam nisl non accumsan. Veniam delenit minim illum ad quod. Qui eorum nihil lorem parum augue. Od lobortis quam nisl non accumsan. Veniam delenit minim illum ad quod. Qui eorum nihil lorem parum augue.</span></a>. Energistically repurpose out-of-the-box total linkage after frictionless e-commerce. Dramatically reinvent vertical supply chains without B2C best practices. </figcaption></figure> <p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p> <p>Phosfluorescently benchmark high standards in imperatives after strategic catalysts for change. Rapidiously enable user friendly initiatives via state of the art action items. Monotonectally cultivate end-to-end markets and 24/365 users. </p> </body></html> Link to comment Share on other sites More sharing options...
ferren Posted August 11, 2015 Author Share Posted August 11, 2015 That'll keep me busy for a while! Thanks for the hand-holding! I just noticed related behavior Link to comment Share on other sites More sharing options...
ferren Posted August 11, 2015 Author Share Posted August 11, 2015 in a table: the pop-up box has no problem hiding adjacent boxes where it overlaps a bit, but it still tries to stay inside its <td> box. I shall work on the <img> problem first. 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