Hi,
I've run into a bit of a snag. I need to have an inline element with a width, but this is obviously not going to happen as XHTML 1.0 doesn't allow width on an inline element.
What I'm trying to do, to put this into a real-world context, is process an XML document. The specifics of this are not necessary. Server-side, basically, I produce an XHTML page from this document by parsing different tags and giving them an XHTML equivalent (say, <document><title>XYZ</title><body><header>XYZ</header><content>Hello world</content></document> only considerably more complex.) One of the tags in the document must be represented by a leader. For instance, if I had <text>Item A<leader style="line" />p. 99</text> the display would look like...
Item A___________________________p.99
It's a very general-purpose thing. A leader element can be anywhere, even in the middle of text, so a table would not work. To make matters worse, a specific width is included with the XML element, meaning I can't just put a few underline characters and be done with it - it has to correspond to a width CSS attribute. And anyways, the style attribute corresponds to a border style (solid, double, etc..)
How can I acheive this? I'm running out of ideas to try. It has to be valid XHTML 1.0, too, so I can't just stick an inline div in there (not that it works, anyhow... it's still an inline element so the width isn't applied)
Help would be greatly appreciated. :) Thanks in advance.
5  5182 
Hrm, is there an edit button? Anyhow...
I think I've figured out a solution.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
</head>
<body>
<div>
<span>This is a <img alt="" src="ii_spacer.gif" style="height:0px;width:250px;border-bottom:3px double red;" /> leader test!</span>
</div>
</body>
</html>
I basically use a blank image. And it works fine in IE and FF, and the W3C validator claims it's valid XHTML. Awesome. Very, very awesome.
I guess I solved my own problem after all. Heh. It's always when you resort to posting on a message board that you figure out the answer to these things...
Ugh. Spacer gifs. So table-ish.
This is a <span style="margin:0 200px">____</span>leader test
Ugh. Spacer gifs. So table-ish.
This is a <span style="margin:0 200px">____</span>leader test
That doesn't work. It just creates a small underlined section in the middle of a wide empty span in IE6 (didn't bother to try it with FF, seeing as it has to work in both browsers.) It doesn't even take a border-bottom.
Compare it with the solution I came up with to see what I'm talking about. I'm under the impression I probably didn't explain myself well enough - I'm not looking for a spacer, but really a way to have a width on an element displayed inline in order to apply a border to the bottom of it.
Thanks nevertheless. :)
I think that's the only way that might work without resorting to floated elements or positioned divs. Span is an inline element, too, so, by itself, won't help.
I think that's the only way that might work without resorting to floated elements or positioned divs. Span is an inline element, too, so, by itself, won't help.
Actually, no. Not only is it not the result I'm looking for (display-wise), what I posted in my second post not only works but is also valid XHTML 1.0. It's just not a very pretty solution, IMO.
Your solution relies on text, which can't work at all with what I have. What if the leader has to be, say, 3px in length? Or what if the user has a different default font or font size (while you can specify them via CSS, they can be overwritten by some browsers)? Even if I attempted to calculate the length of an underscore character and repeated the character as often as necessary, it would still be considerably imprecise and lead to uneven lines (something the client (ie, the person this is being done for, not the browser rendering the page, of course ;) ) will not be happy with.)
And that only covers solid lines. As I've said in my first post, the line could be a double line, dotted, etc.. I suppose dotted lines could be handled via alternating underscore/space characters, and double lines by making them underlined, but the moment the client asks for specific line heights, we'd be, well, screwed. ;)
Sign in to post your reply or Sign up for a free account.
Similar topics
by: Aaron |
last post by:
Hi,
I'm trying to use style sheets instead of tables for layout, but I'm not
sure on how to do something...
I have a div (100% width) containing 3 other divs. Each needs to be lined
up next to...
|
by: i_dvlp |
last post by:
I'm trying to replicate a fancy drop-down control (MS-egads!) with
form <select><option>
It doesn't look like you can specity width as an attribute or define
width with CSS.
It looks like my...
|
by: txican |
last post by:
the HTML is:
----------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>foo</title>...
|
by: CES |
last post by:
All,
I was hoping that someone might be able to help me with a few questions on Aligning Block Elements properly...
Basically I have a row that has a fixed width of 900px. Within the row their is...
|
by: Jannette |
last post by:
I've got this to finally work in IE (its only taken me 2 days solid), but now mozilla isn't displaying the text on the same line as the image. I'm a newby at CSS, and I've think I've worked on trying...
|
by: drchaos |
last post by:
Placing HTML code with inline javascript into a div both as rendered HTML(the intended final purpose) and shown as RAW text HTML (for the user to copy and paste into their own webpage.)
Here is...
|
by: totalstranger |
last post by:
I have a check box with let's say 20 elements. I would like to have it
align as 4 columns, 5 rows. Without using a table and using
understandable CSS is there any way to make the check boxes align...
|
by: Haines Brown |
last post by:
I know I'm missing something obvious. I need a short horizontal rule
to preceed a line of text (in a bibliography in which the author is
repeated). I tried this:
<p>
<div class="rule"></div>,...
|
by: Steve Richter |
last post by:
I would like to use display:inline and other CSS attributes to build
an entry form. Where the heading to the left of the text box is always
a set width.
It is not working so I am experimenting...
|
by: Charles Arthur |
last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
|
by: emmanuelkatto |
last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud.
Please let me know.
Thanks!
Emmanuel
|
by: BarryA |
last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
|
by: Sonnysonu |
last post by:
This is the data of csv file
1 2 3
1 2 3
1 2 3
1 2 3
2 3
2 3
3
the lengths should be different i have to store the data by column-wise with in the specific length.
suppose the i have to...
|
by: Hystou |
last post by:
There are some requirements for setting up RAID:
1. The motherboard and BIOS support RAID configuration.
2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
| |
