Does anyone have a suggestion for creating paragraph-type line spaces within a <li>
tag that includes a hovered pop-up pseudo-class?
I have a <span>
that pops up on a:hover
and I want the text that pops up to be broken into 2 paragraphs. It works with <br>
in FF but I want to do the right thing (now that I've discovered it's wrong!)...
html:
<div id="rightlist">
<ul>
<li><a href="">List item
<span>
words words words that are "paragraph" 1 of List item
<br><br>
different words that make up "paragraph" 2 of List item
</span></a></li>
css:
#rightlist {
margin-top: 10px; margin-right: 5px; width: 387px ; height: 239px ;
background-color: #7EBB11 ;
display: table-cell;
z-index: 100 ;
float: right ;
}
#rightlist ul {
text-align: left;
margin: 0;
margin-top: 6px;
font-family: sans-serif;
font-size: 20px ;
color: black ;
}
#rightlist a
{
display: table-cell;
text-decoration: none; color: black;
background: #7EBB11 ;
}
/*appearance of the <a> item (but before the <span> tag) on hover*/
#rightlist a:hover {
color: white;
}
/*appearance of the spanned content within <a></a> tags when not hovered */
/* %%%%% important - keep position:absolute in this div %%%%% */
#rightlist a span {
display: none;
position: absolute ;
margin-left: -412px;
top: -10px; left: 10px; padding: 10px ;
z-index: 100;
width: 380px; height: 222px;
color: white; background-color: #7EBB11;
font: 0.75em Verdana, sans-serif; font-size: 13px ; color: black;
text-align: left;
}
/*appearance of spanned content within <a> tags when hovered*/
#rightlist a:hover span {
display: table-cell ;
}
Err there's nothing wrong with having <br>
inside <a>
or <span>
. It's perfectly valid according to the HTML 4.01 spec.
Edit: <li>
can contain <p>
, <br>
, and pretty much anything else.
The spec is a bit hard to read but basically says:
LI
can contain block
or inline
block
is made of P
+ some other thingsinline
is made of special
+ some other thingsspecial
is made of A
+ BR
+ some other thingsRegarding <a>
it says:
A
can contain inline
except A
inline
... see above