Forum Moderators: not2easy
A very similar technique is described by Eric Meyer, but the popups in his demo [meyerweb.com] all appear in the same place and I want the popups to appear next to the href tag that fires them
EM's code uses <div id="idName"> whereas I want to re-use the code in many places, hence <div class="className"> and the aim of this exercise is to present tabular data, hence the table
Anyhoo... I have hit a brick wall
= = = = = = = = = = = = = = = = = = = = = = = =
The html and css that I have now is valid and works exactly as desired ONLY in FF2 with HTML4 strict + dtd (and transitional standard mode but not quirks)
In IE7, all of the <span> is a link EXCEPT the image
In Opera9, it completely falls to bits... I have positioned the span so that it does not obscure the letter M in MNOPQRSTUVVXYZ and, in Opera, if you hover over the M then the popup is 'ragged'
I have tried this with three TRs with three TDs each and, in Opera, it was even weirder...
But for now I'd like to figure out how to get just one instance displaying as intended
Any ideas?
= = = = = = = = = = = = = = = = = = = = = = = =
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-GB">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
body{
margin-left:100px;
}
.popUp a {
position : relative;
border-bottom : 1px dotted #006;
text-decoration : none;
z-index:0;
}
.popUp a:hover {
border-bottom : 1px dotted #F00;
z-index:2;
}
.popUp a span {
display : none;
border : none;
z-index:3;
}
.popUp a:hover span {
display : block;
position : absolute;
z-index:99;
left : 1em;
top : 1.9em;
color : #00F;
background : #FF0! important;
border : 1px solid #0F0;
width : 200px;
padding : 1em;
}
</style>
<title>
PopUp on Hover
</title>
</head>
<body>
<table class="popUp">
<tr>
<td>
<p>
<a href="../example.html">
MNOPQRSTUVVXYZ
<span>
<img alt="my alt" src="images/test003.JPG" height="128px">
<br/>
Ab 0123456789
<br/>
Aliquam venenatis augue ut mauris sit amet porta leo dui quis nibh
</span>
</a>
<!-- the padding text below included simply to illustrate the 'ragged bug' when run in Opera -->
<br/> Nulla vel condimentum gravida, nulla nulla lacinia libero
<br/>
<br/>
<br/> Nulla vel condimentum gravida, nulla nulla lacinia libero
<br/> Nulla vel condimentum
<br/>
<br/>
<br/> Nulla vel condimentum gravida, nulla nulla lacinia libero
<br/> Nulla vel condimentum
<br/>
<br/>
<br/> Nulla vel condimentum gravida, nulla nulla lacinia libero
<br/> Nulla vel condimentum
<br/>
<br/>
<br/> Nulla vel condimentum gravida, nulla nulla lacinia libero
<br/> Nulla vel condimentum
</p>
</td>
</tr>
</table>
</body>
</html>
In IE7, all of the <span> is a link EXCEPT the image
that might be because you're putting a block level element (
imgspantry making
span { display: block; }
or
span a { display: inline; }
and see if that helps
Isn't your suggestion the same as what I have already?
.popUp a:hover span {
display : block;
etc
etc
The img/link issue in IE is the least of my concerns... much more annoying is the weird results in Opera
And Lavazza, I wouldn't say what you want to is really at all like the example you gave, since in that example, like you mentioned, the images all appear in the same spot, As well as the fact that there's no text by the images.
All it seems like to me is a pop-up menu-like thing, just with 1 item instead of a menu of multiple items, and with an image beside text instead of just image (which is somewhat common in menus anyways)
A problem seems to be the display:block set on the span, but not on the anchor that is containing it!
Also, not sure why you have that P tag there, but especially if you don't need it, get rid of it or move it, because P tag closes itself as soon as it encounters another block element (Which I always thought was a stupid behaviour).
Also, I don't know what's up with those z-indexes... they all seem unnecessary (0 is "default", z-index isn't needed on something that's display:none, and the last one has an oddly high value). Realize that child objects that are positioned, are always put above it's parent element (unless it's given a negative z-index), and also keep in mind of stacking contexts.
[edited by: Xapti at 11:46 pm (utc) on Aug. 6, 2007]
the images all appear in the same spotYes, relative to the link that fires the popup...
All it seems like to me is a pop-up menu-like thing, just with 1 item instead of a menu of multiple itemsI want a <table> with three pretty much identical <td>s per <tr>
As well as the fact that there's no text by the imagesUmmm... not floating around them no... but there is underneath
A problem seems to be the display:block set on the span, but not on the anchor that is containing itI don't understand
Also, not sure why you have that P tag thereIt fails HTML4 strict validation without nesting within a block level element... or so I think
"A problem seems to be the display:block set on the span, but not on the anchor that is containing it"
"I don't understand"
right now you have the A tag (anchor) containing the span, which is set to block-level. You don't want inline elements containing block elements, which is what the A tag is doing with the SPAN tag.
"Also, not sure why you have that P tag there"
"It fails HTML4 strict validation without nesting within a block level element... or so I think"
Well, you might want to verify that if you're not sure, but something I do know is that the P tag is rather strange in that its' not a true block element, since as soon as it encounters another block element "inside" it (after it opens), it will automatically close itself, and will NOT contain anything after the block element it encountered.
right now you have the A tag (anchor) containing the span, which is set to block-level. You don't want inline elements containing block elements, which is what the A tag is doing with the SPAN tag.
No.. first off it isn't tags, it's elements - the anchor element is an inline element and CAN contain a <span> element because it also inline - What you might suggest, via CSS, does not change the property of an HTML element! it will only suggest an alternative way that a browser might like to display it.. e.g. if you make it
display: block;but something I do know is that the P tag is rather strange in that its' not a true block element, since as soon as it encounters another block element "inside" it (after it opens), it will automatically close itself, and will NOT contain anything after the block element it encountered.
This is true, but it's not strange.. a <p> element [w3.org] is an in flow block element but it is not a block-level element, it cannot contain other block elements, much like <header> elements. The reason it "auto" closes itself on hitting another block element is legacy HTML.. remember that if you use certain strains of HTML, closing tags are optional, so how can you expect a browser to know a block element is closed if there's no closing tag.. simple..
follow the rules - it's closed when a new one is opened ;)
[edited by: SuzyUK at 10:33 pm (utc) on Aug. 8, 2007]
sorry no solutions yet.. but was just looking to see what you meant by ragged, and it sure is!
To be honest, I'm out of my depth on this one - but that doesn't preclude my curiosity getting the better of me
I'm fascinated by the way it (mis)behaves in Opera... not only the ragged-ness but the complete lack of response to links in a 3rd (or 4th) <tr>
In IE7, all of the <span> is a link EXCEPT the image
a:hoverIn Opera9, it completely falls to bits... I have positioned the span so that it does not obscure the letter M in MNOPQRSTUVVXYZ and, in Opera, if you hover over the M then the popup is 'ragged'
I see there is a vertical spacing issue in IE, it's giving the <br>s height causing extra whitespace if the br's are on a new line. In your sample it was only visible on hover but I changed the show/hide method as one of my trials for Opera and realised that this made the vertical spacing issue visible in IE before the hover too. So it's got something to do with the AP div.. the usual fix of putting the <br> at the end of the line of text instead of on a new line fixes it.. I'm not happy with this method but as you say the text is only there for padding I'm not sure if it will be an issue. I did also find that white-space: nowrap applied to the spanned text (I wrapped text in span for testing fixes) fixed the issue too, but again as I'm not sure about your application I'm not sure that's an appropriate solution in your case. - you can let us know further about this issue if it is indeed one ;)
so anyway here's the code I ended up with, like I said there's extra span/classes in there but some are not necessary they were just a way to target the areas to test fixes
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-GB">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>PopUp on Hover</title>
<style type="text/css">
html, body {padding: 0; margin: 0;}
body{ margin-left:100px;}.popup a {display: block; color: #00f;background: #eee;} /* display: block; here fixes Opera */
.popup a:hover {position: relative; color: #f00; background: #ff0; cursor: hand; /* cursor for IE! */}
.popup p span {display: block;} /* doesn't do anything but thought it'd make sense ;) */.popup a span.pop {
color : #00F;
background : #FF0;
padding : 1em;
border : 1px solid #0F0;
width : 200px; /* this causes problems in Opera */
position : absolute;
top: 10px;
left : -9999px; /* AP method of hiding */
/*display: none;*/
}.popup a:hover span.pop {
left: 10px; /* AP method of showing */
/* display: block; */
}.popUp a span.pop img {display: block;}
/* span.text {white-space: nowrap;}*/ /* CSS IE fix if maniuplating br's isn't an option */
</style>
</head>
<body>
<table class="popup" border="1" cellspacing="3" cellpadding="5">
<tr><td>
<p>
<a href="http://www.example.com">
<span class="linktitle">MNOPQRSTUVVXYZ</span>
<span class="pop">
<img alt="my alt" src="images/test003.JPG" height="128" width="180" />
Ab 0123456789<br />Aliquam venenatis augue ut mauris sit amet porta leo dui quis nibh
</span>
</a>
<span class="text">
<br>Nulla vel condimentum gravida, nulla nulla lacinia libero<br>Nulla vel condimentum<br><br><!-- IE Fix -->
<br>Nulla vel condimentum gravida, nulla nulla lacinia libero<br><!-- IE Fix -->
Nulla vel condimentum
<br>
<br>
<br>Nulla vel condimentum gravida, nulla nulla lacinia libero
<br>Nulla vel condimentum
<br>
<br>
</span></p>
</td></tr>
</table>
</body>
</html>
added whitespace:nowrap fix to commented CSS to clarify
[edited by: SuzyUK at 10:06 am (utc) on Aug. 9, 2007]
And I wasn't asking why the P element closes itself, I'm just mentioning the behaviour to lavazza because it's not going to contain the content that was put in there. It should be taken out unless it has a use.
[edited by: Xapti at 5:55 pm (utc) on Aug. 9, 2007]
I did not say that making the link block is useless, I said
if you make it display: block; you are only suggesting a change to the display properties, not making the HTML element something it's not!
I stand by that, When tackling a code problem, you need to get the basics correct first - Opera (which was the only browser showing the bug) obviously decided to take the CSS display properties a bit too literally in this case. I'm pretty sure that if you were to read about this "raggedy/irregular display" issue you will find it under Opera Bug in many pages.
Now next, I've most often said as have many others who have bothered to read/interpret the recommendations that there is a lot of leeway in how you interpret CSS recommendations, it's what makes it hard for most, not least the browser manufacturers ;)
All I actually said, once I took the time to find a solution, was that it made sense in a certain way - if you transfer HTML property validation rules to CSS, it makes sense in a weird way.. weird/funny/peculiar way because every part of me that's even tried and tested CSS specs (that's a lot!), knows that the two should not be linked.. that's the point of CSS - keep it separate
I still have not made the <a> element into a block-level element.. I cannot change its HTML properties via CSS alone (would need to write a custom Doctype for that!).. it still cannot contain a block-level HTML element regardless if their CSS is set to display:inline e.g <p>, <div> and still validate..
short way of saying all this...
CSS is only a suggestion to the browser about how to display the code, it is not a pixel perfect science - this is much more obvious these days, as opposed to 3 or 4 years ago, because of all the different ways to display/browse a document.. however the HTML rules and their respective Doctypes are the basics of all basics, get them right and you're off to a roaring good start.. I haven't broken any of those rules with my solution whereas you were giving confusing advice?
right now you have the A tag (anchor) containing the span, which is set to block-level. You don't want inline elements containing block elements, which is what the A tag is doing with the SPAN tag.
The the reason I said the span was block-level, is because while by default span is inline, in the CSS it is set to block. The anchor element, which is inline, should not be containing the span block element.
as above.. the <a> can contain the span regardless of its assigned CSS properties, HTML rules don't change uless the Doctype does.
regardless of the CSS properties and values, the <a> tag can contain a <span> tag - it is perfectly valid HTML! the CSS, can, however, suggest how to display this code but it has no bearing whatsoever on the tag/element's HTML properties
@Suzy,
I'm gobsmacked! WOW!
I have used your code in a multi-tr table, and it WORKS, across browsers!
Your concise in-line comments proved invaluable, as they prompted me to go a-googling and I now have a clearer picture of how much I do and don't know...
I have lots to learn, but I'm confident that I can, esp when there are experts willing to share their insights that come with experience
@Xapti,
Thanks for questioning my use of the <p>s... you were right, they are superfluous to both the on-screen look AND 4.0 strict validation
It's certainly no fun when you try something that should (according to the rules) work and it cracks up.. but it does prove a valuable learning ground, I learnt a lot about CSS by dissecting bugs rather than reading the manuals ;)
anyway glad it helped!
And yes, as Xapti says, the <p> is superfluous in this instance, re valid HTML, because of the <td>!
I learnt a lot about CSS by dissecting bugs rather than reading the manuals
Instead, I like finding a few examples of work that (collectively) ought to do something similar to what I need/want, and then making it happen... which can take quite a while
One of my favourite quotes:
"The time you enjoy wasting is not wasted time"
Bertrand Russell
