:before :after elements on new lines : The Official Microsoft ASP.NET Forums

Reply

ajmo

Member

18 Points

:before :after elements on new lines

Dec 12, 2012 03:07 AM|LINK

I have a CSS menu and I'm trying to add rounded corners with an image before and after each element, but they won't appear on the same line as the element - the before is above and to the left, and the after is below and to the left.

What do I need to do to get them on the same line as the <li> elements?

Here is the code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html dir="ltr">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body style="background-color:#EBEBEB">

<style>
ul#GoMenu,ul#GoMenu ul{
	margin:0;list-style:none;padding:0;border-width:0px;border-style:solid;border-color:#5f5f5f;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
ul#GoMenu ul{
	display:none;position:absolute;left:0;top:100%;-moz-box-shadow:3.5px 3.5px 5px #000000;background-color:#AAAAAA;border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;border-color:#d4d4d4;padding:0px;}
ul#GoMenu li:hover>*{
	display:block;}
	
ul#GoMenu>li:before{
 content:url("http://alecmonger.com/img/TopmenuLeftSide.png")}
ul#GoMenu>li:after{
 padding:0px; width:10px;height:44px;content:url(http://alecmonger.com/img/TopmenuRightSide.png); }

ul#GoMenu li{
	position:relative;display:block;white-space:nowrap;font-size:0;float:left;}
ul#GoMenu li:hover{
	z-index:1;}
ul#GoMenu{
	font-size:0;z-index:999;position:relative;display:inline-block;zoom:1;padding:0;
	*display:inline;}
* html ul#GoMenu li a{
	display:inline-block;}
ul#GoMenu>li{
	margin-left:4px;} <!--space between items-->
ul#GoMenu a:active, ul#GoMenu a:focus{
	outline-style:none;}
ul#GoMenu a{
	display:block;vertical-align:middle;text-align:left;text-decoration:none;font:14px Calibri;color:#ffffff;cursor:pointer;padding:8px 15px 8px 15px;background-color:#000000;background-position:0 0;border-width:0 0 0 1px;border-style:solid;border-color:#C0C0C0;}
ul#GoMenu ul li{
	float:none;margin:0;min-width:100px}
ul#GoMenu ul a{
	text-align:left;padding:8px 8px 8px 8px;background-color:#AAAAAA;background-image:none;border-width:0;-webkit-border-radius:2px;font:12px Calibri;color:#FFFFFF;text-decoration:none;}
ul#GoMenu li:hover>a,ul#GoMenu li a.pressed{
	background-color:#aaaaaa;border-color:#C0C0C0;border-style:solid;color:#ffffff;background-position:0 100px;text-decoration:none;}
ul#GoMenu ul li:hover>a,ul#GoMenu ul li a.pressed{
	background-color:#DDDDDD;background-image:none;color:#000000;text-decoration:none;}
ul#GoMenu li.TopMenu>a{
	/*border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;*/
	margin-left:10px; margin-right:10px}
</style>

<ul id="GoMenu" class="TopMenu">
	<li class="TopMenu"><a href="#">Home</a></li>
	<li class="TopMenu"><a href="#"><span>StopStart</span></a>
	<ul>
		<li><a href="#">Stop</a></li>
		<li><a href="#">Start</a></li>
	</ul></li>
	<li class="TopMenu"><a href="#">Products</a></li>
	<li class="TopMenu"><a href="#"><span>World Class</span></a>
	<ul>
		<li><a href="#">Fast Reliable Secure</a></li>
		<li><a href="#">Reliable</a></li>
		<li><a href="#">Secure</a></li>
	</ul></li>
	<li class="TopMenu"><a href="#">Difference</a></li>
	<li class="TopMenu"><a href="#">Services</a></li>
	<li class="TopMenu"><a href="#">Redundancy</a></li>
	<li class="TopMenu"><a href="#">FAQs</a></li>
	<li class="TopMenu"><a href="#">Fees</a></li>
</ul>

</body>
</html>

Did this post enlighten or entertain you? Please send unmarked bills.