Aligning as span element

[garlinto]

I know that there is no "align" attribute for a <span> element, so I am wondering how I can get a <span> to align. I have a <div> class, in which I have my span contained, like so:

div.cell {
	text-align: left;
	cursor: pointer;
	font-size:8pt;
	width: 220px;
	margin-bottom: 2px;
	padding:2px 10px 0px 0px
	}

span.cell {
	cursor: pointer;
	display: block;
	text-align: left;
	font-size:8pt;
	border:1px solid black;
	margin-bottom: 2px;
	padding:2px 10px 2px 0px
	}

HTML:

<div class="cell">
  <a class="span" href="....">
    <span class="cell">
    <b><span style="color: red">1100R</span>
    &nbsp;&nbsp;&nbsp;1980-1998&nbsp;&#190; &amp; 1 Ton</b><br />
    <span>Without overload springs</span>
  </span></a>
</div>

The <span> statement in red is what I want to align right.
I know that a <p> element is not alowed in a <span>; a <br> is. However, there is no "align" attribute for a <br>, either. And yes, I am aware that I have the <div> set to align left, but I only want the first <span> to align left; I want the second one to align right. Can it be done? Is there a better way to do this? Page can be viewed HERE.

What do you guys think?

[vgarcia]

Try this:
CSS

span.alignRight {
 text-align: right;
}

HTML

<div class="cell">
  <a class="span" href="....">
    <span class="cell">
    <b><span style="color: red">1100R</span>
       1980-1998 ¾ & 1 Ton</b><br />
    <span class="alignRight">Without overload springs</span>
  </span></a>
</div>

[KillAllDash9]

Technically, you shouldn't be able to change the alignment of an inline element such as a span. Alignment is only supposed to affect block level elements.

Since you are separating these two spans with a line break, why not just put them in paragraphs instead? A 'p' is a block level element and you can apply alignment to it. If you don't want a line-space between the two, just adjust the margin/padding on these paragraphs to get the effect you want.

[garlinto]

Vinnie,
Thanks for the post. I tried it and it still didn't work. So I thought that maybe I had some other classes/id's that could be overriding that directive, and after lifting many of the other containers' align attributes, I still could not get them to align. I even made an "align: left" class for the first <span>, and that didn't even work.

An interesting aside is that I have a <span class="cellpkg"> just under each <span class="cell"> that is 'text-aligned: right', and they all work fine. They are also in the same <div> as the other <span> elements I want to align. But I can't quite see what's going on. Any more input would be appreciated.

[garlinto]

KILLALLDASH9,
sorry, posted before I saw your post. I was using <p>'s to get that effect before, however, when I converted my code to XHTML1.0, I had to remove them from the code, since these span's I am trying to align are inside yet another span with "diplay: block". The W3C validator would not validate my code with <p>'s inside the top-most <span>, for obvious reasons.

The reason I want to keep everything in an outer <span> because I can nest everything in an anchor, and have my hover effects apply to the whole <span>, so that even the border changes color on mouseover. I know I can't nest a <div> in an anchor, but is there a way to get the same effect with a <div>?

[KillAllDash9]

Originally posted by garlinto
The reason I want to keep everything in an outer <span> because I can nest everything in an anchor, and have my hover effects apply to the whole <span>, so that even the border changes color on mouseover. I know I can't nest a <div> in an anchor, but is there a way to get the same effect with a <div>?

Looking at the URL you gave in your first post, I am having a difficult time figuring out exactly what part of the page you are reffering to here. The only place I get any hover effect is in the menu at the top-right containing the text "Installation - a Pictoral" and in links in the main body, but these are just your standard underline/overline and background changes on the a tag (it looks like). Keep in mind, I only have access to a Linux box here at h...

Nevermind, I forgot my wife's computer has windows on it. I checked your site and see what you are talking about now. That hover effect does not work *at all* on Mozilla 1.2/Linux (can't say for Mozilla/Netscape on windows or mac).

On the other hand, have you checked your page in a browser like Lynx? Those spans make the navigation impossible to read (also the special chars for fractions) Not that you are necessarily worried about text-only browsers, but supporting them is in the spirit of XHTML, so you should give it some thought. (The rest of the page looks pretty good in Lynx)

The reason your one set of spans *is* aligned to the right is because your stylesheet specifies that 'span.cellpkg' is a block-level element (display:block).

[KillAllDash9]

Also, you were having trouble with putting a div inside of an anchor. Did you try subclassing those anchors as block level elements?

[garlinto]

killalldash9
Thanks for the direction...no, I never did think to add "display: block" to the link class I am using. I'll try that and see what happens.

As far as those other browsers are concerned: Can I just download off the net? What's the url?

This may be a little off-thread here, but I have wondered if there was one program that you could load your page into to see how it would display in each popular browser type, including older browser versions. What a useful tool that would be. Got any ideas, or what do you guys do?

[redux]

i have multiple browsers installed on my machine at work (NS4.79, NS6, NS7, Mozilla1.2, Phoenix0.5, Opera5, Opera6, Lynx, IE5.5SP2 and IE6 on a different machine)...

a link that may be useful http://browsers.evolt.org

[garlinto]

Originally posted by redux
a link that may be useful http://browsers.evolt.org

Thanks, redux. I'm downloading right now...