unwanted automatic text wrap when usng CSS layers
wen I layer two spans over each other using absolute position, CSS layers basically, for some reason the text wraps at almost every space down to the next line for no apparent reason. I have to use the nowrap property to get decent behaviour.
I am including a picture of some text layered over two graphics. The text has exactly the exactly the same offset as the spinning arrow graphic.
also including the code. Though I have managed to hack a way out... I really don't want to have to do that and I need to know why it is behaving like this!!
The objects are inside a td, which happens to be more than large enough to hold the text.
<td style="position:absolute;">
<span style=" visibility:;">
<span style="position:absolute; top:130; left:200; z-index:1; color:black;"><img src="mpSitePics/resediticon.gif" height="124" width="128"></span>
<span style="position:absolute; top:200; left:270; z-index:2; color:red;"><img src="mpSitePics/ajax-loader.gif"></span>
</span>
<span style="position:absolute; top:200; left:270; z-index:3; color:red; font-weight:bold;">This text wraps for no reason unless I use the nowrap whitespace attrib</span>
</td>ok it isn't letting me upload a screenshot I think... I'll try, but I hope you get the idea.
pr0gr4mm3r posted this at 17:38 — 25th January 2009.
He has: 1,502 posts
Joined: Sep 2006
I have never seen tables with absolute positioning on the table cells. That is probably what is causing your problems.
Can you link to the page?
scorpius420 posted this at 15:04 — 27th January 2009.
They have: 7 posts
Joined: Jan 2009
well now I took the absolute position out of the
here is the code...
<td style=" border-style:solid" valign="top">
<span style=" position: absolute; visibility:visible; ">
<span style="position:absolute; top:130; left:200; z-index:1;"><img src="mpSitePics/resediticon.gif" height="128" width="128"></span>
<span style="position:absolute; top:200; left:270; z-index:2;"><img src="mpSitePics/ajax-loader.gif"></span>
<span style="position:absolute; top:200; left:270; z-index:2;">sample long text that goes one and one and on and on...</span>
</span>
For some reason it is not letting me post pictures... I'll try again this time. Ok.. it says some sort of error occured..but then it reports that the screenshot is uploaded... so... if you can recover it.. it'll help.
Anyway... the crappy work around is using nowrap and trying to calculate where I have to insinuate a because it won't wrap properly itself.
decibel.places posted this at 21:35 — 27th January 2009.
He has: 1,494 posts
Joined: Jun 2008
I have removed your position and replaced your top/left with margins.
(see attached file)
Is this sort of what you want?
I noticed in your original code ypou left out the "px" value eg top:200px
<td style="border: thin solid #000000;" valign="top">
<div style="margin: 130px 0 0 200px; z-index:1;"><img src="mpSitePics/resediticon.gif" height="128" width="128"></div>
<div style="margin: 200px 0 0 270px; z-index:2;"><img src="mpSitePics/ajax-loader.gif"><div style="margin: 0; z-index:2;">sample long text that goes one and one and on and on...</div></div>
</td>
scorpius420 posted this at 18:59 — 1st February 2009.
They have: 7 posts
Joined: Jan 2009
Thanks... but what I wanted was the effect that position:absolute gives... where it floats at some specified location above the background. you seem to have put in the z-index but not put in any positioning attrib. Is that kosher?
decibel.places posted this at 19:34 — 1st February 2009.
He has: 1,494 posts
Joined: Jun 2008
try it with position: absolute
notice that I nested the divs differently than your code...
in general you are better off using divs as generic containers and reserving span for specific inline tweaks such as changing a font
I thought you're better off with (default) relative positioning, maybe you could attach an image mockup of what you want?
scorpius420 posted this at 14:13 — 20th March 2009.
They have: 7 posts
Joined: Jan 2009
Ok, I'm using CSS visibility property to make pop-up panes appear and disappear. These panes are encased in spans with position absolute.
The following code works:
function showNotebookHelp()
{
document.getElementById("notebookhelp").style.visibility = "visible";
//document.getElementById("NAPane").style.visibility = "visible";
}
function hideNotebookHelp()
{
document.getElementById("notebookhelp").style.visibility = "hidden";
//document.getElementById("NAPane").style.visibility = "hidden";
}
And so does the following to make the "addnotebook" pane appear:
function showAddNotebook()
{
document.getElementById("addnotebook").style.visibility = "visible";
}
BUT!!! the following code to make the "addnotebook" pane disappear does not work.
The function gets called. And the error console of firefox and opera report absolutely no errors, but the pane does not go away.
function hideAddNotebook()
{
alert("hide add called");
document.getElementById("addnotebook").style.visibility = "hidden";
}
Here is the code of the actual pane, which happens to be enclosed in a div that contains a sub-interface:
<td class="notetabletd" title="Make New Notebook" onClick="showAddNotebook();">+<span id="addnotebook" name="addnotebook" style="position:absolute; visibility:hidden; z-index:3; ">
<table cellpadding="5px" width="300px" bgcolor="white" style="position:absolute; z-index:4; left:30; top:-30; border-style:solid; border-width:2px;font-size:12; font-weight:bold;">
<tr>
<td>Notebook Name:</td>
<td><input type="text" value="" id="addNotebookName" name="addNotebookName"></td>
</tr>
<tr>
<td>Urgency/Importance:</td>
<td>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr><td><input type="button" value="Cancel" onClick="hideAddNotebook();"></td>
<td><input type="button" value="Create!" onClick="doAddNotebook();"></td>
</tr>
</table>
</span>
</td>
The td which contains the span is inside a table that is inside a div. This is so bizarre it has me pulling my hair out. please help.
scorpius420 posted this at 15:11 — 20th March 2009.
They have: 7 posts
Joined: Jan 2009
reason for the error was that the whole td was the onclick area for popup and the popup pane was logically part of the td so clicking on any part of the td caused the pane to remain. solved. thanks anyhoo!
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.