anchors, bg images, and floating.

[travisbrown]

I've been using graphics for links like below.

<a href="javascript:;" class="buttons" id="manageto" ><span>Add/Manage Time Off</span></a>

However, if I don't use float, the width collapses and you can't see the graphic. Is there a better way to do this? Specifically, I want to use anchors inline. eg:

<li>text <a href="javascript:;" id="manageto" class="buttons"><span>link</span></li>

The css is below.

a#manageto.buttons {
	background-image: url(/cops/_common_buttons/btn_manage_to.jpg);
	background-repeat: no-repeat;
	float: left;
	height: 16px;
	width: 76px;
}

a#manageto.buttons:hover {
	background-image: url(/cops/_common_buttons/btn_manage_to_f1.jpg);
	background-repeat: no-repeat;
}

a.buttons span {
	display: none;
}

 

[Vragabond]

Inline elements cannot have a set width (just think about it, it is pretty logical). If you want to have them appear in one line, you need to float them, if you want them one above the other, you just use block level elements instead.

 

[travisbrown]

Inline elements cannot have a set width (just think about it, it is pretty logical)."

Some block specified as inline elements can.

<table style="display:inline; width:200px; background-color:#990000;">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
<table style="display:inline; width:200px; background-color:#00FFCC;">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

I know generally they don't, though. So what's the solution? Floating isn't exactly inline all the time. Floating sort of breaks from the inline and box model. The code below floats the button to the next line and far left. I don't want to put the graphics in the html: they are not content.

 <p class="msg">Note, this contact is currently on leave or rest until....<a href="javascript:;" class="buttons" id="manageto" ><span>Add/Manage Time Off</span></a></p>

 

[BillyRayPreachersSon]

I don't want to put the graphics in the html: they are not content.

That's a good stance if you're looking for any sort of accessibility or DDA compliance... but given your site uses tables and JavaScript for links, I'm guessing that's not anything you're really concerned about. So why not just do that if it fixes the problem?

Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[travisbrown]

Well, couple things. It's an intranet app, so I know 100% of users use IE6/PC with js on, so I'm working within established corporate standards for the client's desktop build. Also, I'm not generally using javascript for links. I just put href="javascript:;" in for the sake of this post. The real urls have all sorts of derived querystrings and the like so I stripped them out. Force of habit. I should have done this:

<li>text <a href="page.html" id="manageto" class="buttons"><span>link</span></li>

Tables aren't in question here. I was just posting an example of an inline element with declared width. FWIW, I usually just use tables for tabular data. Sometimes in a pinch, but...

I keep the button images in the css because they are shared among the whole app, I apply different stylesheets for different mediums, there are a couple (very few) users who dial up on the WAN and have images turned off, and just because I generally keep style in the stylesheets and content in the pages. If the client wants the button changed, as clients are prone to do, it's a lot easier to change it once in the css rather than a hundred times in the scripts. It's a big app. Elements iterate prolificly throughout

Nonetheless, any better ways to set the bg image for an anchor without floating or converting to a block element? I can get by, but sometimes am working around keeping floated elements where I want them.