list and image lineup

Don't use list-style-image as positioning is too hard. Use list-style: none and instead add the image as a background-image which you can then control with background-position.

brilliant...that seemed to be working thanks very much, I had a problem with my wordpress just spitting the dummy all of a sudden, but I'll set you know how it pans out when I get it fixed. Oh you're in brisvegas? should visit our fishbowl down here at the goldie sometime and get some sun...then you wouldn't be so pale...and be growing horns... \

I head towards the GC plenty of times; on my way to NSW.

Ok I need the lips to sit next to each item on the list.
The id pagenav controls that, so that's where I've put my background image. However, it won't sit to the left of the list with positioning because there is no room. I've left the lips on repeat so you can see the line starts where the list does and there's no room for the image to sit on the left. But there is only 1 set of lips to show normally

}

.pagenav li {
list-style: none;
background-image: url(images/lips.gif) ;
line-height: 14px;
margin-left: 45px;
}

.page_item ul {
margin-left: 5px;
padding: 0px;
}
.page_item li {
list-style: none;
margin-left: 15px;
padding: 0px;
}

You need to add some padding left.

brilliant that worked...for some reason it didn't work the first few times I tried to add padding, thankyou very much. What about the lack-of space underneath the word yoga? I tried adding padding in the .page_item ul id but that didn't work. I don't know where to add the padding-bottom in my code for that one..interested to know where you find the time to design web pages and answer questions on this forum, I don't have time to do my own website let alone answer questions...

here's the code now

html {
height: 100%;

}
body {
padding-left: 30px;
margin-left: 30px;
background: url(images/bg2.gif);
background-repeat: repeat-x;
margin: 0px;
height: 100%;
background-color: #99ffcc;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}

#container {
text-align: left;

}
#header {
width: 995px;
height: 310px;
background: url(images/title.jpg) no-repeat;
}

#content {
width: 1200px;
margin-top: 10px;
margin-left:15px;
colour: #66cc99;

}
#footernote {

height: 30px;
margin-right: 80px;
margin-top: 80px;
margin-left: 20px
}

#title {
float: left;
width: 300px;
height: 65px;
margin-left: 50px;
color: #333333;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;

}
#title a:link {
color: #003333;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
text-decoration: none;
}
#title a:visited {
color: #003333;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
text-decoration: none;
}
#title a:hover {
color: #003333;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
text-decoration: none;
}

#headerright {
float: right;
width: 450px;
height: 210px;

}
#headerleft {
float: left;
width: 480px;
height: 210px;

}

#search {
margin-top: 40px;
float: right;
width: 240px;
height: 12px;
margin-right: 0px;
text-align: right;
}

.searchbox {
border: 1px solid #ffffff;
background-color: #ffffff;
color: #003333;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
padding: 4px;

}

.textarea {
border: 0px solid #ffffff;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
padding: 4px;
background: #ffffff;
;

}
.searchbutton {
width: 64px;
height: 23px;
margin: 0;
padding: 0;
border: 0;
background: transparent url(images/search.gif) no-repeat center top;
text-indent: -1000em;
cursor: pointer; /* hand-shaped cursor */
cursor: hand; /* for IE 5.x */

}
top;
text-indent: -1000em;
cursor: pointer; /* hand-shaped cursor */
cursor: hand; /* for IE 5.x */
}
.submitcomment {
width: 119px;
height: 27px;
margin: 0px;
padding: 0px;
border: 0px;
background: url(images/sub-com.gif)no-repeat center top;
text-indent: -1000em;
cursor: pointer; /* hand-shaped cursor */
cursor: hand; /* for IE 5.x */
}

#comment-1 {
margin: 0px;
padding: 5px;

}

#comment-2 {
margin: 0px;
padding: 5px;

}
#sidebar {

float: right;
width: 530px;

}

#left {
float: left;
width: 229px;
border-left: 2px solid #002e2e;
list-style: none;
padding-left: 40px;

}

#left img {
float: left;
margin: 0px;

}

#left ul {
list-style: none;
margin: 0px;
padding: 0px;

}

#right {
float: left;
width: 240px;
padding-top: 20px

}

a:link {
color: #333333;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
text-decoration: none;
line-height: 20px;

}
a:visited {
color: #333333;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
text-decoration: none;
line-height: 20px;

}
a:hover {
color: #003333;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
text-decoration: none;
line-height:20px;
color: #333333;

}

.meta {
padding-left: 10px;
padding-right: 10px;

}
.feedback a {
display: block;
text-align: center;
padding-right: 10px;
background: url(images/h3.gif) no-repeat;
width: 230px;
line-height: 28px;
margin-bottom: 30px;

}

blockquote {

border-left: 4px solid #ffffff;
color: #003333;

}
blockquote p {

margin: 25px;

}

h2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
width: 229px;
height: 28px;
line-height: 25px;
background: url(images/h1.gif) no-repeat;
padding-left: 15px;
padding-right: 10px;
list-style-image: none;
font-weight: lighter;
color: #ffffff;
}

h3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
width: 229px;
height: 28px;
line-height: 28px;
background: url(images/h3.gif) no-repeat;
padding-left: 15px;
padding-right: 10px;
list-style-image: none;
font-weight: lighter;
color: #ffffff;
}

.pagenav li {
list-style: none;
background: url(images/lips.gif) no-repeat;
background-position: left;
padding-left: 45px;
line-height: 14px;
margin-left: 15px;
}
.page_item ul {
margin-left: 5px;
padding: 0px;

}
.page_item li {
list-style-image: url(images/b3.gif) ;
margin-left: 15px;
padding: 0px;

}

#wp-calendar {
text-align: center;
padding-left: 20px;
}

::-moz-selection{
background:#ffffff;
color:#000000;

}

::selection {
background:#ffffff;
color:#000000;
}

code::-moz-selection {
background: #ffffff;
}

code::selection {
background: #ffffff;

}

#linkcat-1 ul {
list-style-image: url(images/lips.gif) ;
margin-left: 40px;
padding: 0px;
line-height: 14px;

}

.categories {
line-height: 18px;
list-style: none;
margin-left: 10px;
padding: 0px;

}

.categories ul {
list-style: none;
margin: 0px;
padding: 0px

}

.categories a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
padding-left: 25px;
display:block;
color: #333333;
background: url() no-repeat;
text-decoration: none;
border-width: 0px 0px 1px 0px;
border-spacing: 0px;
border-style: dotted dotted dotted dotted;
border-color: green green green green;
border-collapse: separate;
background-color: rgb(204, 255, 204);
padding:5px;

}
.categories a:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
padding-left: 25px;
display:block;
background: url() no-repeat;
color: #333333;
text-decoration: none;
border-width: 0px 0px 1px 0px;
border-spacing: 0px;
border-style: dotted dotted dotted dotted;
border-color: green green green green;
border-collapse: separate;
background-color: rgb(204, 255, 204);
padding:5px;

}
.categories a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
background: url() no-repeat;
background-position: 0px -18px;
text-decoration: none;
color: #333333;
background-color: #ffff99;
border-width: 0px 0px 1px 0px;
border-spacing: 0px;
border-style: dotted dotted dotted dotted;
border-color: green green green green;
border-collapse: separate;
background-color: rgb(204, 255, 204);
padding:5px;

}

.children a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
padding-left: 25px;
background: url() no-repeat;
color: #333333;

}
.children a:visited {
padding-left: 25px;
display:block;
color: rgb(51, 153, 102);
background: url() no-repeat;
}
.children a:hover {

background-position: 0px -12px;
color: #333333;
background: url() no-repeat;
background-color: #ffff99;
}

.metaa {
text-align: left;
line-height: 15px;
list-style: none;
margin-left: 25px;
padding: 0px;

}

#post {
margin: 0px;
padding: 0px;

}

#center {
margin-top:8px;
border-width: 3px 3px 3px 3px;
border-spacing: 2px;
border-style: ridge ridge ridge ridge;
border-color: #003333 #003333 #003333 #003333;
border-collapse: separate;
background-color: rgb(255, 255, 255);
padding-left: 15px;
padding-right: 15px;
padding-bottom: 15px;
width: 590px;
float: left;

}

.archives {
display: block;
line-height: 18px;
list-style: none;
margin-left: 10px;
padding: 0px;
}
.archives ul {
list-style: none;
margin: 0px;
padding: 0px;
}
.archives li {
list-style: none;
margin: 0px;
padding: 0px;
}

.archives a:link {
width: 200px;
font-family: tahoma;
padding-left: 25px;
display:block;
color: #ffffff;
background: url(images/menu3.gif) no-repeat;
}
.archives a:visited {
width: 200px;
padding-left: 25px;
display:block;
color: #ffffff;
background: url(images/menu3.gif) no-repeat;
}
.archives a:hover {
width: 200px;
background: url(images/menu3.gif) no-repeat;
background-position: 0px -18px;
}
.floatright {float:right; padding: 12px; border: 0px;}
.floatleft {float:left; padding: 8px; border: 0px;}

You could do #left .pagenav ul { padding-bottom: .... } You need to add #left in front of the rule because you've specified #left ul with padding 0 elsewhere in stylesheet.

(Also did you realise that #left is actually on the right and that #right is contained within #left?)

As far as time goes: I actually spend less time on here than I used to.

}
#left.page_item ul {
margin-left: 5px;
padding-bottom: 50px;

}

doesn't have any effect. That doesn't really look right really?? :shrug:

and if I put the padding-bottom in the #left ul by itself, it puts the whole thing out of wack

yeass, I know left is right and right is left, it was three columns, I just did my very best with it because I didn't know what I was doing... Like an elephant stomping around a flower garden really. I'm getting a headache with all this left and right business :?

s'ok, I took another way around.....check it out. Not perfect, but finished...

}

doesn't have any effect. That doesn't really look right really??

That's because it's not right. Look back at what I typed; it's different from yours - there's s'posed to be a space between left and .page_item. What I've got refers to an element with a class of page_item inside #left; what you've got refers to an element with a class of page_item and an ID of #left.

I tried both, no effect.

Look back again (I didn't notice the second mistake first time either). You've got:

#left.page_item ul { margin-left: 5px; padding-bottom: 50px; }

And I had:

#left .pagenav ul { padding-bottom: .... }

My code DOES work cos I've tested it.

ok YES now it does work Yippe!! good job my friend. Now if you really care go over to the other thread and kick Eds butt for me