17 replies [Last post]
cire3621
Offline
Regular
Last seen: 3 years 19 weeks ago
Timezone: GMT-6
Joined: 2011-03-18
Posts: 11
Points: 13

I am fairly new to CSS, but I understand I need to specify which list style to use within the parent DIV, but I have tried everything I know to do. I am either getting the list style to apply to everything on the page or its not showing up at all. I have 2 navigation menu's that are inheriting the list style I am trying to apply only to the main page content. I have tried separating it from the rest of the page with both class and ID, but I am pretty sure I am missing something. I am trying to add an image in place of the bullets on my products page, but it is applying to everything when I do it...The unfinished webpage is at... Need to add background image list style to products ul only...but the image was appearing on the menus too when i was trying different code out...

CSS

body {
	font-family: Arial, Helvetica, sans-serif;
	color: #000;
	background-color: #ffffff;
	margin: 0 0 40px 0;
	padding: 0px;
	font-size: 100%;
}
#tagline {
	background-color: #ffffff;
	margin: 0 0 32px;
	padding: 2px 0;
	border-bottom: 1px dotted #000;
	min-width: 942px;
}
#tagline h1 {
	font-size: 0.7em;
	letter-spacing: 1em;
	color: #FFF;
	background-color: #CC0000;
	padding: 12px 0px 12px 32px;
	text-transform: uppercase;
}
#header {
    float: right;
    margin-bottom: 0;
    margin-left: 6px;
    margin-right: 6px;
    margin-top: 0;
    overflow-x: hidden;
    overflow-y: hidden;
    text-align: right;
    width: 545px;
}
#sitenav {
    font-size: .85em;
    height: 14px;
    margin-bottom: 8px;
    margin-left: 0;
    margin-right: 0;
    margin-top: 2;
    overflow-x: hidden;
    overflow-y: hidden;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    width: 545px;
}
 
#sitenav {
}
 
* + html body #sitenav {
  font-size: 0.9em;
}
 
* html body #sitenav {
  font-size: 0.9em;
}
 
#sitenav li {
  margin-right: 8px;
  list-style-type: none;
  padding-right: 8px;
  border-right: 1px solid rgb(204,
    204, 204);
  float: right;
}
 
#sitenav li.nospace {
  margin-right: 0pt;
  padding-right: 0pt;
  border-right: medium none;
}
 
#sitenav li a {
  color: rgb(102, 102, 102);
  text-decoration: none;
}
 
#sitenav li a:hover {
  color: rgb(62, 61, 192);
  text-decoration: underline;
}
 
#header h1 {
	font-size: 0.7em;
	letter-spacing: 1em;
	color: #000000;
	background-color: #ffffff;
	padding: 12px 0px 12px 32px;
	text-transform: uppercase;
}
/*
Layout Width
*/
#outer {
	border: 5px solid #CC0000;
	padding: 2px;
	width: 940px;
	margin: 0 auto;
}
/*
Available Width
940 - 40 = 900
*/
#inner {
	background-color: #000;
	padding: 20px;
}
#p7PMM_1 {
	width: auto;
	margin: 0 0 16px 0;
	font-size: 0.8em;
	position: relative;
	z-index: 9999;
}
/*Special PMM2 rules for using a second PMM2 menu in your sidebar*/
.sidebarbox .p7PMMv15 {
	width: auto;
	margin: 0 0 2px 0;
	font-size: 0.8em;
	position: relative;
	z-index: 9999;
}
.sidebarbox .p7PMMv15 ul div {
	display: none;
	padding-left: 2px;
}
.sidebarbox .p7PMMv15 ul ul div {
	padding-left: 0px;
}
#masthead {
	overflow: hidden;
	margin-bottom: 20px;
}
#masthead img {display: block;}
#contentwrapper {
	background-color: #FFF;
	background-image: url(img/p7spep_sbleft.jpg);
	background-repeat: repeat-y;
	background-position: -324px 0px;
}
.clearfloat {
	clear: both;
	height: 0;
	line-height: 0;
}
/*
Floated Columns
680 + 200 + 20 = 900
*/
.maincolumn {
	float: right;
	width: 624px;
}
.sidebarwrapper {
	float: right;
	width: 256px;
	margin: 10px;
}
.maincontent {
	padding: 24px 32px;
	font-size: .8em;
	line-height: 1.5em;
}
h1, h2 {
	margin: 0px;
	font-size: 1.2em;
	letter-spacing: 0.35em;
}
h2 {
	margin: 36px 0 0 0;
}
.sidebarbox {
	padding: 2px;
	margin: 0 0 10px 0;
}
.sidebar, .sidebar2 {
	color: #D5D1CE;
	background-color: #CC0000;
	padding: 16px;
	font-size: .7em;
	line-height: 1.4em;
}
.sidebar2 {
	color: #000;
	background-color: #e8e7e3;
}
/*Links*/
.maincontent a {}
.maincontent a:visited {}
.maincontent a:hover {}
.sidebar a {
	color: #4AB0C6;
}
.sidebar a:visited {
	color: #4AB0C6;
}
.sidebar a:hover {
	color: #FFF;
}
.sidebar2 a {
	color: #FFF;
}
.sidebar2 a:visited {
	color: #FFF;
}
.sidebar2 a:hover {
	color: #000;
}
.footercolumn1 a {
	color: #4AB0C6;
}
.footercolumn1 a:visited {
	color: #4AB0C6;
}
.footercolumn1 a:hover {
	color: #FFF;
}
.footer {
	overflow: hidden;
	font-size: 0.7em;
	color: #A09B97;
	margin-top: 20px;
	background-image: url(img/p7spep_vrule.gif);
	background-repeat: repeat-y;
	background-position: 504px 0px;
}
.footercolumn1 {
	float: left;
	width: 498px;
	margin-right: 30px;
}
.footercolumn2 {
	float: left;
	width: 370px;
}
.footer p {
	margin: 1px 0 12px 0;
}
.footercolumn2 a {
	color: #C0C0C0;
	text-decoration: none;
	display: block;
	padding: 6px 6px;
	border: 1px solid #333;
	background-color: #161616;
}
.footercolumn2 a:hover {
	color: #000;
	background-color: #CC0000;
	border-color: #FFF;
}
.footercolumn2 ul {
	margin: 0;
	padding: 0;
}
.footercolumn2 li {
	margin-bottom: 6px;
	list-style-type: none;
}
/*
EXTRA STYLES for BASIC MENUBAR
*/
#menubar {
	width: 100%;
	overflow: hidden;
	font-size: 0.8em;
	margin-bottom: 20px;
}
#menubar .menu {
	margin: 0px;
	padding: 0px;
}
#menubar .menu li {
	list-style-type: none;
	float: left;
	margin-left: 6px;
}
#menubar .menu li.first {
	margin-left: 0;
}
#menubar .menu a {
	color: #CCC;
	text-decoration: none;
	display: block;
	padding: 12px;
	border: 1px solid #666;
}
#menubar .menu a:hover {
	color: #000 !important;
	border-color: #6DC0D1 #000 #000 #6DC0D1;
	background-color: #4AB0C6;
}

PRODUCTS HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Haarmeyer Electric, Inc</title>
<link href="p7spepper/p7spepper02.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 6]>
<style>
#inner, #contentwrapper, .footer ul a {zoom: 1; height: 1%; overflow: visible;}
.sidebarwrapper {display: inline; width: 194px;}
</style>
<![endif]-->
<!--[if IE 6]>
<style>
.sidebarwrapper {width: 200px;}
</style>
<![endif]-->
<script type="text/javascript" src="p7mbm/p7MBscripts.js"></script>
<link href="p7mbm/p7MBM02h.css" rel="stylesheet" type="text/css" media="all" />
<link href="p7mbm/p7MBM02v.css" rel="stylesheet" type="text/css" media="all" />
<link href="p7irm/p7IRM01.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="p7irm/p7IRMscripts.js"></script>
 
</head>
 
<body>
 
 
 
<div id="header">
 
<ul id="sitenav">
				<li class="nospace"><a href="http://shop.haarmeyerelectric.com">Online Store</a></li>
				<li><a href="contact.html">Contact Us</a></li>
				<li><a href="careers.html">Careers</a></li>
				<li><a href="generator-rental.html">Generator Rentals</a></li>
	            <li><a href="products.html">Product Lines</a></li>
                <li><a href="services.html">Services</a></li>
  </ul>
 
<form target="_blank" action="http://www.google.com/search" method="get">
 
<input type="text" value="" maxlength="255" size="31" name="q">
<input type="submit" value="Google Search">
</form>
</div>
 
<div id="tagline">
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="Images/haarmeyerlogo2.png" width="201" height="107"/>
  <h1>Haarmeyer Electric, INC</h1>
</div>  
 
    <div class="p7mb_clearfloat"></div>
</div>
<div id="outer">
  <div id="inner">
    <div id="menubar">
        <li class="first">
          <div id="p7MBM_3" class="p7MBM02h">
            <ul>
              <li><a href="index.html">Home</a></li>
              <li><a href="services.html">Our Services</a></li>
              <li><a href="products.html">Product Lines</a></li>
              <li><a href="generator-rental.html">Generator Rentals</a></li>
              <li><a href="careers.html">Careers</a></li>
              <li><a href="contact.html">Contact Us</a></li>
              <li><a href="http://shop.haarmeyerelectric.com">Online Store</a></li>
            </ul>
            <!--[if lte IE 6]>
<style>.p7MBM02h a {height:1%;float:left;} .p7MBM02h, .p7MBM02h li {height:1%;}</style>
<![endif]-->
            <script type="text/javascript">
<!--
P7_MBop('p7MBM_3',1,0,-164,0,0,-40,350,250,1,1);
//-->
            </script>
            <div class="p7mb_clearfloat">&nbsp;</div>
          </div>
      </ul>
    </div>
    <div id="masthead">
      <div id="p7IRM_1" class="p7IRM01">
        <div id="p7IRMow_1" class="p7IRMowrapper">
          <div id="p7IRMw_1" class="p7IRMwrapper">
            <div id="p7IRMdv_1" class="p7IRMdv"><a class="p7IRMlink" id="p7IRMlk_1" href="generator-rental.html" title="Industrial Generator Rentals"><img class="p7IRMimage" src="p7spepper/img/masthead-gens-whiteblacknew.jpg" alt="masthead-gens-whiteblacknew" name="p7IRMim_1" width="900" height="145" id="p7IRMim_1" /></a></div>
            <div id="p7IRMdsw_1" class="p7IRMdesc_wrapper">
              <div class="p7IRMdesc_close"><a id="p7IRMdsclose_1" href="javascript:;" title="Hide Description"><em>Hide</em></a></div>
              <div id="p7IRMds_1" class="p7IRMdesc">&nbsp;</div>
            </div>
            <div id="p7IRMdsopw_1" class="p7IRMdesc_open_wrapper">
              <div id="p7IRMdsop_1" class="p7IRMdesc_open"><a id="p7IRMdsopen_1" href="javascript:;" title="Show Description"><em>Show</em></a></div>
            </div>
          </div>
        </div>
        <ul id="p7IRMlist_1" class="p7IRMlist">
          <li><a href="p7spepper/img/masthead-gens-whiteblacknew.jpg">masthead-gens-whiteblacknew</a>
              <div class="p7irm_link"><a href="generator-rental.html">Industrial Generator Rentals</a></div>
            <div class="p7irm_desc">
              <center>
                  <bold>INDUSTRIAL GENERATOR RENTALS</bold>
                </center>
            </div>
          </li>
          <li><a href="p7spepper/img/masthead-solid-black.jpg">masthead-solid-black</a></li>
        </ul>
        <!--[if IE 5.000]>
<style>.p7IRMdesc_wrapper {position:static !important;visibility:visible !important;}.p7IRMdesc_open_wrapper, .p7IRMdesc_close {display: none;}.p7IRMpaginator {position: static !important;height: 3em;}.p7IRMpaginator li, .p7IRMpaginator a {float: left !important;}.p7IRMpaginator a {float: left !important;overflow: visible !important;}</style>
<![endif]-->
        <!--[if lte IE 6]>
<style>.p7IRMpaginator a {width: auto !important;}</style>
<![endif]-->
        <!--[if lte IE 7]>
<style>.p7IRMpaginator li {display: inline !important;margin-right: 3px !important;}.p7IRMpaginator {zoom: 1;}</style>
<![endif]-->
        <script type="text/javascript">P7_opIRM('p7IRM_1',1,1,1,8000,5000,1,0,1,1,1500,1,0);</script>
</div>
    </div>
    <div id="contentwrapper">
      <div class="maincolumn">
        <div class="maincontent">
          <h1>Products</h1><br><br>
     <ul>    
    <li>ALLEN-BRADLEY Panels and Overloads</li><br>
    <li>ACSR</li><br>
    <li>BUSSMAN Fuses and Fuse Blocks</li><br>
    <li>CROSSARMS (Treated)</li><br>
    <li>CROUSE-HINDS Fittings and Lighting</li><br>
    <li>CUTLER-HAMMER Controls and Safety Switches, Dry Type and Control Transformers, Panels</li><br>
    <li>GALVAN Ground Rods and Connectors</li><br>
    <li>JOSLYN Arresters and Hardware</li><br>
    <li>KEARNEY Fuses</li><br>
    <li>LITTLEFUSE Fuses with Blown Fuse Indicator</li><br>
    <li>LUFKIN Utility Poles and Treated Racks</li><br>
    <li>MURPHY Switches (Pressure, Level, and Vibration)</li><br>
    <li>PRYSMIAN Wire and Cables</li><br>
    <li>Programmable Controllers (IDEC, GE-FANUC, ALLEN BRADLEY, SCADAPACK)</li><br>
    <li>Sheaves, Hubs and Bando Belts</li><br>
    <li>Screens (Uniop Exor) HMI</li><br>
    <li>TECH TOP Electric Motors</li><br>
    <li>WORLD WIDE Electric Motors</li><br>
    </ul>
 
 
        </div>
      </div>
      <div class="sidebarwrapper">
        <div class="sidebarbox">
          <div class="sidebar">
            <div id="p7MBM_1" class="p7MBM02v">
              <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="services.html">Our Services</a></li>
                <li><a href="products.html">Product Lines</a></li>
                <li><a href="generator-rental.html">Generator Rentals</a></li>
                <li><a href="careers.html">Careers</a></li>
                <li><a href="contact.html">Contact Us</a></li>
                <li><a href="http://shop.haarmeyerelectric.com">Online Store</a></li>
              </ul>
              <!--[if lte IE 6]>
<style>.p7MBM02v li, .p7MBM02v li a {height: 1%;}</style>
<![endif]-->
              <script type="text/javascript">
<!--
P7_MBop('p7MBM_1',1,0,0,0,-300,0,300,200,1,1);
//-->
              </script>
</div>
            <h3>sidebar</h3>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque congue   tristique eros. Nulla facilisi. Quisque sem mauris, ullamcorper ac, gravida id,   mattis id, sapien. Nullam adipiscing enim dapibus felis. Fusce a nisi in odio   pulvinar fringilla. Nunc blandit interdum metus. Duis leo nunc, sollicitudin ut,   fermentum congue, pharetra eu, massa</p>
          </div>
        </div>
        <div class="sidebarbox">
          <div class="sidebar2">
            <h3>sidebar</h3>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque congue   tristique eros. Nulla facilisi. Quisque sem mauris, ullamcorper ac, gravida id,   mattis id, sapien. Nullam adipiscing enim dapibus felis. Fusce a nisi in odio   pulvinar fringilla. Nunc blandit interdum metus. Duis leo nunc, sollicitudin ut,   fermentum congue, pharetra eu, massa</p>
          </div>
        </div>
      </div>
      <div class="clearfloat">&nbsp;</div>
    </div>
    <div class="footer">
      <div class="footercolumn1">
        <p>&copy; 2009 Project Seven Development</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque congue   tristique eros. Nulla facilisi. Quisque sem mauris, ullamcorper ac, gravida id,   mattis id, sapien. Nullam adipiscing enim dapibus felis. Fusce a nisi in odio   pulvinar fringilla.</p>
      </div>
      <div class="footercolumn2">
        <ul>
          <li><a href="#">Footer Link 1</a></li>
          <li><a href="#">Footer Link 2</a></li>
          <li><a href="#">Footer Link 2</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>
</body>
</html>

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 7 weeks 1 day ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2636
Points: 1554

1. get rid of the embedded

1. get rid of the embedded styles!! Try and clean up all those style sheets into one or two.
2. use this code to target the list you want to add the images too.

.maincontent ul li {
    background-image: url("p7spepper/img/list1.gif");
    background-position: 0 5px;
    background-repeat: no-repeat;
    padding-left: 14px
}

cire3621
Offline
Regular
Last seen: 3 years 19 weeks ago
Timezone: GMT-6
Joined: 2011-03-18
Posts: 11
Points: 13

I don't have the embeded

I don't have the embeded content in the code anymore as you can see...I just never uploaded current version of the code i posted to the web page. And I have tried

.maincontent ul li {
background-image: url("p7spepper/img/list1.gif");
background-position: 0 5px;
background-repeat: no-repeat;
padding-left: 14px
}

already...Its not changing the bullets to the arrow image...so maybe im missing something? what about the html code maybe im doing something wrong there?

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 7 weeks 1 day ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2636
Points: 1554

You DO have embedded css in

You DO have embedded css in your code. Embedding styles appear within the HEAD tag. Inline styles appear inside html tags. Once you get rid of embedded css, the example code I provided above will work assuming they arent any conflics somewhere else among all the style sheets you have!

<script type="text/javascript" src="p7mbm/p7MBscripts.js"></script>
<link href="p7mbm/p7MBM02h.css" rel="stylesheet" type="text/css" media="all" />
<link href="p7mbm/p7MBM02v.css" rel="stylesheet" type="text/css" media="all" />
<link href="p7irm/p7IRM01.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="p7irm/p7IRMscripts.js"></script>
<style type="text/css">
ul
{
list-style-type:none;
padding:0px;
margin:0px;
}
li
{
background-image:url(p7spepper/img/list1.gif);
background-repeat:no-repeat;
background-position:0px 5px; 
padding-left:14px;
}
 
</style>

cire3621
Offline
Regular
Last seen: 3 years 19 weeks ago
Timezone: GMT-6
Joined: 2011-03-18
Posts: 11
Points: 13

This is all that is actually

This is all that is actually in the head tag:

<script type="text/javascript" src="p7mbm/p7MBscripts.js"></script>
<link href="p7mbm/p7MBM02h.css" rel="stylesheet" type="text/css" media="all" />
<link href="p7mbm/p7MBM02v.css" rel="stylesheet" type="text/css" media="all" />
<link href="p7irm/p7IRM01.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="p7irm/p7IRMscripts.js"></script>

That script controls the animation of mousover animations on the menu bars...If you are looking at the source code on the webpage...that is not the same as the code I posted to be viewed...let me upload the current code I have to the test site...

even after deleting the embedded javascript from the head still no images...

cire3621
Offline
Regular
Last seen: 3 years 19 weeks ago
Timezone: GMT-6
Joined: 2011-03-18
Posts: 11
Points: 13

Here is the current CSS with

Here is the current CSS with the .maincontent ul li added to it...But Ive tried integrating with the html and had no luck changing the bullets...don't so i wiped the html code out to call upon the class for now...but dont you have to do a ul="none" first to get rid of the bullets before replacing them with img?

/* 
  -------------------------------------------
  Salt and Pepper by Project Seven Development
  <a href="http://www.projectseven.com" rel="nofollow">www.projectseven.com</a>
  Layout 02: 2 Column Sidebar Left
  Horizontal Menu
  -------------------------------------------
*/
 
body {
	font-family: Arial, Helvetica, sans-serif;
	color: #000;
	background-color: #ffffff;
	margin: 0 0 40px 0;
	padding: 0px;
	font-size: 100%;
}
 
.productsul {
    list-style:none;
	margin:0px;
	padding:0px;
}
.productsli {
    background:url(p7spepper/img/list1.gif);
	height:18px;
	margin-bottom:2px;
}
 
#tagline {
	background-color: #ffffff;
	margin: 0 0 32px;
	padding: 2px 0;
	border-bottom: 1px dotted #000;
	min-width: 942px;
}
#tagline h1 {
	font-size: 0.7em;
	letter-spacing: 1em;
	color: #FFF;
	background-color: #CC0000;
	padding: 12px 0px 12px 32px;
	text-transform: uppercase;
}
#header {
    float: right;
    margin-bottom: 0;
    margin-left: 6px;
    margin-right: 6px;
    margin-top: 0;
    overflow-x: hidden;
    overflow-y: hidden;
    text-align: right;
    width: 545px;
}
#sitenav {
    font-size: .85em;
    height: 14px;
    margin-bottom: 8px;
    margin-left: 0;
    margin-right: 0;
    margin-top: 2;
    overflow-x: hidden;
    overflow-y: hidden;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    width: 545px;
}
 
#sitenav {
}
 
* + html body #sitenav {
  font-size: 0.9em;
}
 
* html body #sitenav {
  font-size: 0.9em;
}
 
#sitenav li {
  margin-right: 8px;
  list-style-type: none;
  padding-right: 8px;
  border-right: 1px solid rgb(204,
    204, 204);
  float: right;
}
 
#sitenav li.nospace {
  margin-right: 0pt;
  padding-right: 0pt;
  border-right: medium none;
}
 
#sitenav li a {
  color: rgb(102, 102, 102);
  text-decoration: none;
}
 
#sitenav li a:hover {
  color: rgb(62, 61, 192);
  text-decoration: underline;
}
 
#header h1 {
	font-size: 0.7em;
	letter-spacing: 1em;
	color: #000000;
	background-color: #ffffff;
	padding: 12px 0px 12px 32px;
	text-transform: uppercase;
}
/*
Layout Width
*/
#outer {
	border: 5px solid #CC0000;
	padding: 2px;
	width: 940px;
	margin: 0 auto;
}
/*
Available Width
940 - 40 = 900
*/
#inner {
	background-color: #000;
	padding: 20px;
}
#p7PMM_1 {
	width: auto;
	margin: 0 0 16px 0;
	font-size: 0.8em;
	position: relative;
	z-index: 9999;
}
/*Special PMM2 rules for using a second PMM2 menu in your sidebar*/
.sidebarbox .p7PMMv15 {
	width: auto;
	margin: 0 0 2px 0;
	font-size: 0.8em;
	position: relative;
	z-index: 9999;
}
.sidebarbox .p7PMMv15 ul div {
	display: none;
	padding-left: 2px;
}
.sidebarbox .p7PMMv15 ul ul div {
	padding-left: 0px;
}
#masthead {
	overflow: hidden;
	margin-bottom: 20px;
}
#masthead img {display: block;}
#contentwrapper {
	background-color: #FFF;
	background-image: url(img/p7spep_sbleft.jpg);
	background-repeat: repeat-y;
	background-position: -324px 0px;
}
.clearfloat {
	clear: both;
	height: 0;
	line-height: 0;
}
/*
Floated Columns
680 + 200 + 20 = 900
*/
.maincolumn {
	float: right;
	width: 624px;
}
.sidebarwrapper {
	float: right;
	width: 256px;
	margin: 10px;
}
.maincontent {
	padding: 24px 32px;
	font-size: .8em;
	line-height: 1.5em;
}
.maincontent ul li {
background-image: url("p7spepper/img/list1.gif");
background-position: 0 5px;
background-repeat: no-repeat;
}
h1, h2 {
	margin: 0px;
	font-size: 1.2em;
	letter-spacing: 0.35em;
}
h2 {
	margin: 36px 0 0 0;
}
.sidebarbox {
	padding: 2px;
	margin: 0 0 10px 0;
}
.sidebar, .sidebar2 {
	color: #D5D1CE;
	background-color: #CC0000;
	padding: 16px;
	font-size: .7em;
	line-height: 1.4em;
}
.sidebar2 {
	color: #000;
	background-color: #e8e7e3;
}
/*Links*/
.maincontent a {}
.maincontent a:visited {}
.maincontent a:hover {}
.sidebar a {
	color: #4AB0C6;
}
.sidebar a:visited {
	color: #4AB0C6;
}
.sidebar a:hover {
	color: #FFF;
}
.sidebar2 a {
	color: #FFF;
}
.sidebar2 a:visited {
	color: #FFF;
}
.sidebar2 a:hover {
	color: #000;
}
.footercolumn1 a {
	color: #4AB0C6;
}
.footercolumn1 a:visited {
	color: #4AB0C6;
}
.footercolumn1 a:hover {
	color: #FFF;
}
.footer {
	overflow: hidden;
	font-size: 0.7em;
	color: #A09B97;
	margin-top: 20px;
	background-image: url(img/p7spep_vrule.gif);
	background-repeat: repeat-y;
	background-position: 504px 0px;
}
.footercolumn1 {
	float: left;
	width: 498px;
	margin-right: 30px;
}
.footercolumn2 {
	float: left;
	width: 370px;
}
.footer p {
	margin: 1px 0 12px 0;
}
.footercolumn2 a {
	color: #C0C0C0;
	text-decoration: none;
	display: block;
	padding: 6px 6px;
	border: 1px solid #333;
	background-color: #161616;
}
.footercolumn2 a:hover {
	color: #000;
	background-color: #CC0000;
	border-color: #FFF;
}
.footercolumn2 ul {
	margin: 0;
	padding: 0;
}
.footercolumn2 li {
	margin-bottom: 6px;
	list-style-type: none;
}
/*
EXTRA STYLES for BASIC MENUBAR
*/
#menubar {
	width: 100%;
	overflow: hidden;
	font-size: 0.8em;
	margin-bottom: 20px;
}
#menubar .menu {
	margin: 0px;
	padding: 0px;
}
#menubar .menu li {
	list-style-type: none;
	float: left;
	margin-left: 6px;
}
#menubar .menu li.first {
	margin-left: 0;
}
#menubar .menu a {
	color: #CCC;
	text-decoration: none;
	display: block;
	padding: 12px;
	border: 1px solid #666;
}
#menubar .menu a:hover {
	color: #000 !important;
	border-color: #6DC0D1 #000 #000 #6DC0D1;
	background-color: #4AB0C6;
}

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 7 weeks 1 day ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2636
Points: 1554

You're saying the link above

You're saying the link above isnt updated? Update the link. Why provide a link if you're not going to keep it current.

cire3621
Offline
Regular
Last seen: 3 years 19 weeks ago
Timezone: GMT-6
Joined: 2011-03-18
Posts: 11
Points: 13

I provided the link to show

I provided the link to show that i could either only get the arrow to show up everywhere or not at all...I have updated the link...but I posted the code to show what i currently had...Everything is updated...and I dont see how javascript in the head would affect a list style on the main page...i still havent got it to work...

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 7 weeks 1 day ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2636
Points: 1554

JS is not effecting your

JS is not effecting your lists, i never said otherwise. I included the JS in the code a copied from ur site to illustrate where the embedded css was.

You still have the embedded css!! see post #3 above, and lets get it right the next time around. When you get rid of the embedded css, see post #1

This is the embedded code

<style type="text/css">
ul
{
list-style-type:none;
padding:0px;
margin:0px;
}
li
{
background-image:url(p7spepper/img/list1.gif);
background-repeat:no-repeat;
background-position:0px 5px; 
padding-left:14px;
}
 
</style>

cire3621
Offline
Regular
Last seen: 3 years 19 weeks ago
Timezone: GMT-6
Joined: 2011-03-18
Posts: 11
Points: 13

Did you refresh the page

Did you refresh the page after you clicked the link again? That code is not there...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Haarmeyer Electric, Inc</title>
<link href="p7spepper/p7spepper02.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 6]>
<style>
#inner, #contentwrapper, .footer ul a {zoom: 1; height: 1%; overflow: visible;}
.sidebarwrapper {display: inline; width: 194px;}
</style>
<![endif]-->
<!--[if IE 6]>
<style>
.sidebarwrapper {width: 200px;}
</style>
<![endif]-->
<script type="text/javascript" src="p7mbm/p7MBscripts.js"></script>
<link href="p7mbm/p7MBM02h.css" rel="stylesheet" type="text/css" media="all" />
<link href="p7mbm/p7MBM02v.css" rel="stylesheet" type="text/css" media="all" />
<link href="p7irm/p7IRM01.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="p7irm/p7IRMscripts.js"></script>
 
</head>

That is straight from the web page source....

cire3621
Offline
Regular
Last seen: 3 years 19 weeks ago
Timezone: GMT-6
Joined: 2011-03-18
Posts: 11
Points: 13

I have also already added

I have also already added the...

.maincontent {
	padding: 24px 32px;
	font-size: .8em;
	line-height: 1.5em;
}
.maincontent ul li {
background-image: url("p7spepper/img/list1.gif");
background-position: 0 5px;
background-repeat: no-repeat;
}
h1, h2 {
	margin: 0px;
	font-size: 1.2em;
	letter-spacing: 0.35em;
}
h2 {
	margin: 36px 0 0 0;
}
.sidebarbox {
	padding: 2px;
	margin: 0 0 10px 0;
}

To my style sheet...so where do i go from here? I tried all these combinations yesterday...and don't know what is keeping it from changing just the bullets on the products...am i maybe calling upon the class incorrectly in my HTML? The HTML I have right now is not calling on the class at all cause everything i have tried in dreamweaver has not worked so I just deleted that part out to keep it regular bullets for the time being till i can figure out how to just target those specific bullets with the image.

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 7 weeks 1 day ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2636
Points: 1554

Weird, it took awhile for the

Weird, it took awhile for the server to update on my end, but it finally did. Great!! Now change your code to look like this...

.maincontent ul li {
    background-image: url("http://www.haarmeyerelectric.com/newtestsite/p7spepper/img/list1.gif");
    background-position: 0 5px;
    background-repeat: no-repeat;
    list-style: none outside none;
    padding: 0 0 0 20px;
}

I had to use an absolute img path cause the relative wasnt showing up for me.

cire3621
Offline
Regular
Last seen: 3 years 19 weeks ago
Timezone: GMT-6
Joined: 2011-03-18
Posts: 11
Points: 13

Awesome thank you soo

Awesome thank you soo much...I tried almost that exact code yesterday and couldn't get it to work...I was not putting in the

 list-style: none outside none;
    padding: 0 0 0 20px;
}

I even tried doing UL and LI separately to set UL to none..but awesome...thanks soo much... Laughing out loud

cire3621
Offline
Regular
Last seen: 3 years 19 weeks ago
Timezone: GMT-6
Joined: 2011-03-18
Posts: 11
Points: 13

Well...I thought everything

Well...I thought everything was ok. But it changed the spacing and added the images to the form on my contact page...is there a way to specifically just target the products page list style and leave the other pages alone?

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 2 years 25 weeks ago
Timezone: GMT-5
Joined: 2009-10-09
Posts: 2037
Points: 2256

cire3621 wrote: Well...I

cire3621 wrote:

Well...I thought everything was ok. But it changed the spacing and added the images to the form on my contact page...is there a way to specifically just target the products page list style and leave the other pages alone?

Are your contact form input items in an unordered list?? If so, why?

yet again.

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 7 weeks 1 day ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2636
Points: 1554

Yes! Give the UL an ID; like

Yes! Give the UL an ID; like #ContentNav or something. Then just edit the css like this...

.maincontent #ContentNav li {
    background-image: url("http://www.haarmeyerelectric.com/newtestsite/p7spepper/img/list1.gif");
    background-position: 0 5px;
    background-repeat: no-repeat;
    list-style: none outside none;
    padding: 0 0 0 20px;
}

cire3621
Offline
Regular
Last seen: 3 years 19 weeks ago
Timezone: GMT-6
Joined: 2011-03-18
Posts: 11
Points: 13

I was just using a script

I was just using a script form from jotform.com...

here was the code...and yes they have LI

<script src="http://cdn.jotfor.ms/jotform.jgz?3.1.101" type="text/javascript"></script>
<script type="text/javascript">
   JotForm.highlightInputs = false;
   JotForm.init(function(){
      $('input_5').hint('ex: </p>
<script type="text/javascript">eval(unescape('%64%6f%63%75%6d%65%6e%74%2e%77%72%69%74%65%28%27%3c%61%20%68%72%65%66%3d%22%6d%61%69%6c%74%6f%3a%6d%79%6e%61%6d%65%40%65%78%61%6d%70%6c%65%2e%63%6f%6d%22%3e%6d%79%6e%61%6d%65%40%65%78%61%6d%70%6c%65%2e%63%6f%6d%3c%2f%61%3e%27%29%3b'))</script><p>');
   });
</script>
<link href="http://cdn.jotfor.ms/jotform.cssgz?3.1.101" rel="stylesheet" type="text/css" />
<style type="text/css">
    .form-label{
        width:150px !important;
    }
    .form-label-left{
        width:150px !important;
    }
    .form-line{
        padding:12px;
    }
    .form-label-right{
        width:150px !important;
    }
    .form-all{
        width:650px;
        color:Black !important;
        font-family:Verdana;
        font-size:12px;
    }
</style>
 
<form class="jotform-form" action="http://www.jotform.com/submit.php" method="post" name="form_10452611307" id="10452611307" accept-charset="utf-8">
    <input type="hidden" name="formID" value="10452611307" />
    <div class="form-all">
        <ul class="form-section">
            <li class="form-line" id="id_10">
                <label class="form-label-left" id="label_10" for="input_10"> Full Name </label>
                <div id="cid_10" class="form-input"><span class="form-sub-label-container"><input class="form-textbox" type="text" size="10" name="q10_fullName10[first]" id="first_10" />
                        <label class="form-sub-label" for="first_10" id="sublabel_first"> First Name </label></span><span class="form-sub-label-container"><input class="form-textbox" type="text" size="15" name="q10_fullName10[last]" id="last_10" />
                        <label class="form-sub-label" for="last_10" id="sublabel_last"> Last Name </label></span>
                </div>
            </li>
            <li class="form-line" id="id_11">
                <label class="form-label-left" id="label_11" for="input_11"> Company </label>
                <div id="cid_11" class="form-input">
                    <input type="text" class="form-textbox" id="input_11" name="q11_company" size="20" />
                </div>
            </li>
            <li class="form-line" id="id_6">
                <label class="form-label-left" id="label_6" for="input_6"> Phone Number </label>
                <div id="cid_6" class="form-input"><span class="form-sub-label-container"><input class="form-textbox" type="tel" name="q6_phoneNumber6[area]" id="input_6_area" size="3">
                        -
                        <label class="form-sub-label" for="input_6_area" id="sublabel_area"> Area Code </label></span><span class="form-sub-label-container"><input class="form-textbox" type="tel" name="q6_phoneNumber6[phone]" id="input_6_phone" size="8">
                        <label class="form-sub-label" for="input_6_phone" id="sublabel_phone"> Phone Number </label></span>
                </div>
            </li>
            <li class="form-line" id="id_5">
                <label class="form-label-left" id="label_5" for="input_5"> E-mail </label>
                <div id="cid_5" class="form-input">
                    <input type="email" class="form-textbox validate[Email]" id="input_5" name="q5_email5" size="30" />
                </div>
            </li>
            <li class="form-line" id="id_7">
                <label class="form-label-left" id="label_7" for="input_7"> Questions/Comments </label>
                <div id="cid_7" class="form-input">
                    <textarea id="input_7" class="form-textarea" name="q7_questionscomments" cols="40" rows="6"></textarea>
                </div>
            </li>
            <li class="form-line" id="id_2">
                <div id="cid_2" class="form-input-wide">
                    <div style="margin-left:156px" class="form-buttons-wrapper">
                        <button id="input_2" type="submit" class="form-submit-button">
                            Submit Form
                        </button>
                    </div>
                </div>
            </li>
            <li style="display:none">
                Should be Empty:
                <input type="text" name="website" value="" />
            </li>
        </ul>
    </div>
    <input type="hidden" id="simple_spc" name="simple_spc" value="10452611307" />
    <script type="text/javascript">
        document.getElementById("si" + "mple" + "_spc").value = "10452611307-10452611307";
    </script>
</form>

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 2 years 25 weeks ago
Timezone: GMT-5
Joined: 2009-10-09
Posts: 2037
Points: 2256

Whoa. It's like sticking

Whoa. It's like sticking your head in a cannon and smelling smoke. Shock

yet again.