By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
428,853 Members | 2,246 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 428,853 IT Pros & Developers. It's quick & easy.

Inline width?

P: 4
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.
Oct 25 '06 #1
Share this Question
Share on Google+
5 Replies


P: 4
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...
Oct 25 '06 #2

drhowarddrfine
Expert 5K+
P: 7,435
Ugh. Spacer gifs. So table-ish.

This is a <span style="margin:0 200px">____</span>leader test
Oct 25 '06 #3

P: 4
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. :)
Oct 26 '06 #4

drhowarddrfine
Expert 5K+
P: 7,435
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.
Oct 26 '06 #5

P: 4
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. ;)
Oct 30 '06 #6

Post your reply

Sign in to post your reply or Sign up for a free account.