Member Avatar for 3825

I have an asp.net mvc web application. I have something like the following in my _Layout.cshtml I would love it if I could get rid of tables here but I could not make it look the same way without cell spacing. Help?

<td>
	<table cellpadding="0" cellspacing="0" style="height:32px;width:130px;border-right:1px solid #3a4044;">
		<tr>
			<td style="background:url(@Url.Content("~/Content/MenuButtonLeft.gif")) no-repeat top right;width:6px;">&nbsp;</td>
			<td class="Menu" id="orderMenuTd" style="background:url(@Url.Content("~/Content/MenuButtonMiddle.gif")) repeat-x;padding:0px 3px;" align="center">@Html.ActionLink("Order", "../Order/Index")</td>
			<td style="background:url(@Url.Content("~/Content/MenuButtonRight.gif")) no-repeat top right;width:6px">&nbsp;</td>																
		</tr>
	</table>
</td>
Edited by 3825 because: clarity
  • 5 Contributors
  • 4 Replies
  • 195 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by epicrevolt

Dani AI

Generated

A simple, semantic way to reproduce the three-slice button without tables is to give the anchor the three images as CSS layered backgrounds (left cap, repeat-x middle, right cap). This keeps markup tiny (ul/li/a), works with 's inline-block idea, and avoids the extra pseudo-element markup suggested. It also makes vertical centering trivial with line-height.

<ul class="menu" role="menubar" aria-label="Main">
  <li><a class="menu-btn" href="/Order/Index">Order</a></li>
</ul>
.menu { list-style:none; margin:0; padding:0; }
.menu li { display:inline-block; vertical-align:top; }

.menu .menu-btn {
  display:inline-block;
  min-width:130px;            /* match your desired button width */
  height:32px;                /* match your slice height */
  line-height:32px;           /* vertical center text */
  padding:0 6px;              /* space for left/right caps (6px each) */
  text-align:center;
  text-decoration:none;
  color:#fff;

  background:
    url('/Content/MenuButtonLeft.gif') left top no-repeat,
    url('/Content/MenuButtonRight.gif') right top no-repeat,
    url('/Content/MenuButtonMiddle.gif') center top repeat-x;

  border-right:1px solid #3a4044; /* the divider from your table */
}

Quick troubleshooting and tips:

  • If text overlaps caps, increase left/right padding to match cap widths.
  • If caps look misaligned, confirm all three images are exactly 32px tall and have no extra transparent padding.
  • Multiple backgrounds are supported in modern browsers (IE9+). For IE8 fallback, add small extra markup (spans for left/right) or use a single-slice sprite.
  • For performance, combine into a single sprite when possible; for high-DPI screens provide a 2x sprite and use background-size to scale.

This approach produces the same visual result, keeps HTML semantic and accessible, and is easy to maintain and style for hover/focus states.

Recommended Answers

All 4 Replies

Member Avatar for hericles

Unless I'm mistaken you are trying to get 3 images to appear side by side. This is easy enough to achieve with CSS. Have you had difficulty with lining them up using CSS?

Member Avatar for teedoff

Would be great if you could give us a link to your live test site. We dont have your images, so cant recreate your issue.

Member Avatar for mi.mac.rules

Each image could be an <li> within a <ul> and you can set the CSS "display" property to "inline-block"

Member Avatar for epicrevolt

You're probably going to want something along the lines of this. The :before and :after selectors may not work in all browsers and I believe it's CSS3.

The code below has not been tested, but I don't see why it shouldn't work.

<html>
<head>
<style type="text/css">
#menu {
	list-style:none;
	margin:0;
	padding:0;
}

#menu li {
	float:left;
}

#menu a:before {
	display:block;
	background:url(@Url.Content("~/Content/MenuButtonLeft.gif")) no-repeat top right;
	width:6px;
	height:32px;
}

#menu a {
	display:block;
	width:130px;
	line-height:32px;
}

#menu a:after {
	display:block;
	background:url(@Url.Content("~/Content/MenuButtonRight.gif")) no-repeat top right;
	width:6px;
	height:32px;
	border-right:1px solid #3a4044;
}
</style>
</head>
<body>
<ul id="menu">
	<li>@Html.ActionLink("Order", "../Order/Index")</li>
</ul>
</body>
</html>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.