How can I achieve this without tables?

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>

3825

Newbie Poster

23 posts since Mar 2010

Reputation Points: 10

Solved Threads: 0

3 Months Ago

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?

hericles

Practically a Posting Shark

823 posts since Nov 2007

Reputation Points: 136

Solved Threads: 169

3 Months Ago

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.

teedoff

Posting Pro

599 posts since Jul 2010

Reputation Points: 21

Solved Threads: 60

3 Months Ago

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

mi.mac.rules

Light Poster

33 posts since Oct 2010

Reputation Points: 10

Solved Threads: 1

3 Months Ago

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>

epicrevolt

Junior Poster in Training

94 posts since Oct 2010

Reputation Points: 16

Solved Threads: 6

This article has been dead for over three months

You