Hi I am trying to insert left and right side images for my UL. The Blueprint css framework is included in my app. Can anyone tell me what I am doing wrong please. Thanks
CSS
body{
margin:0;
}
#header {
height:150px;
background: url("../images/header_bg.png") repeat-x;
border-bottom: 1px solid #ccc;
}
#logo{
height:100%;
width:40%;
float:left;
}
#top_nav{
width:100%;
height:65px;
}
#navigation{
height:100%;
width:55%;
float:right;
padding-right:50px;
text-align: right;
}
#navigation ul:BEFORE{
background-image: url("../images/header_menu_left.png");
}
#navigation ul:AFTER{
background-image: url("../images/header_menu_right.png");
}
#navigation li{
list-style: none;
float:right;
background: url("../images/header_menu_bg.png");
height:35px;
padding-top:10px;
padding-left:15px;
padding-right:10px;
}
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link href="css/blueprint/screen.css" rel="stylesheet" type="text/css" media="print" />
<link href="css/blueprint/print.css" rel="stylesheet" type="text/css" media="print">
<link href="css/screen.css" rel="stylesheet" type="text/css">
<!--[if IE]><link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection" /><![endif]-->
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Site Ismi | Page Title</title>
</head>
<body>
<div class="container">
<!-- Header Div Start -->
<div id="header" class="span-24 last">
<div id="logo"></div>
<div id="navigation">
<div id="top_nav"></div>
<div id="menu_nav">
<ul>
<li class="first">Item 1</li>
<li>Item 2</li>
<li class="last">Item 3</li>
</ul>
</div>
</div>
</div>
<!-- Content Div Start -->
<div id="content" class="span-24 last">
Ruby Content Here
</div>
<!-- Footer Div Start -->
<div class="footer"></div>
</div>
</body>
</html>
I don't see anything particularly wrong with it, if I use it in jsFiddle with an image that exists, it shows up in the list items:
http://jsfiddle.net/pZ9Xj/1/
Make sure the images actually exist. Also, make sure you don't use Internet Explorer, which doesn't support :before and :after.