I have <a title="jjj
jjj" />
it appears as jjj new line jjj in itnernet explorer. but in firefox it ignores new lines and replaces them with space.
any solution for this on firefox?
hajjo 0 Junior Poster
hajjo 0 Junior Poster
I have this line:
<td style="cursor:pointer" onclick="abc()" title="Check this option to make A search.
Leave it unckecked for B search.
Use spaces to separate between words.">
<u>Multisearch</u>
</td>
I need to have line break after "A search" and "B search".
In Internet explorer it works just fine with how it is written now.
Running it in Mozilla/Firefox I get one long row instead of 3 seperated rows as I want to.
Admiral 0 Newbie Poster
It seems at this point that you shouldn't be using the `title` attribute any longer, nor is this something that you should be considering javascript as a solution for, if what you're doing is really to be the hover or mouse over state of something. You can accomplish all of this with CSS alone.
If you set the position of an element to absolute without defining `top`, `bottom`, `left` or `right` CSS properties, it will hang out on top of the element that contains it. At that point, you can change it's position using the margin property, with either positive or negative values for margin-top, margin-bottom, margin-left and margin-right. Two added benefits for taking this approach: You get to define the style of the explanation text, and you doesn't disappear until you move your cursor outside of the parent element or the explanation, so users will always have enough time to read the text.
Let's try a quick example of a different approach to you're trying to do here.
<html>
<head>
<style>
body{
font-family: sans-serif;
}
.explain_me{
/*You don't even need to define this class for the example to work.
I just use this style to try and indicate that this is something of interest to hover over.*/
background-color: #ffc;
margin: 2px;
padding: 2px;
display: inline-block;
vertical-align: top;
border: 1px solid #ff0;
width: 128px;
height: 128px;
}
.explain_me .title{
/*Start important bits*/
display: none;
position: absolute;
/*End important bits. Everything after this is gravy.*/
padding: 2px;
border: 1px solid #f90;
background-color: #ff9;
width: 128px;
}
.explain_me:hover .title{
/*Start important bits*/
display: block;
/*End important bits.*/
}
</style>
</head>
<body>
<div class="explain_me">
<span class="title">Actually, we're<br><strong>110% awesome</strong>.<br><br>Oh yeah!</span>
<span>We're 100% awesome!*</span>
</div>
<div class="explain_me">
<span class="title">You could have like...<br><br><br><br>...all the whitespace in here that you want.<br><strong>And styled text too! Wow!</strong></span>
<span>And here's something more I have to say.*</span>
</div>
</body>
</html>Good luck!
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.