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>

Recommended Answers

All 4 Replies

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?

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.

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

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.