1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

CSS list help needed. Most likely a simple fix.

Discussion in 'CSS' started by fadetoblack22, Sep 25, 2012.

  1. #1
    dp.jpg

    Hello, I am having a small issue with a list on my site. I have a list and when the text wraps to the next line it goes under the bullet point rather than inline with the first line of text. Can someone help me get it inline with the first line of text. I think I need to use list-style-position: outside; but I can't get it to work.

    - See the image attached for what is happening.



    The list is in a sidebar with the id = "sidebar"

    Here is the css for the page:

    /*
    ------------------------------------------------------------------------
    
    /* ------- Main color scheme -------- */
    .topnav li.current_page_item a span, 
    .topnav li.current-cat a span, 
    .topnav li.current-cat-parent a, 
    .topnav li.current_page_parent a {color: #01ADF1;}
    
    .topnav a, 
    .topnav li ul li a span, 
    .topnav li.current_page_item ul li a span, 
    .topnav li.current-cat ul li a span {color: #454545;}
    
    .topnav a:hover {color: #ff0505;}
    
    .post h2, 
    .post h2 a {color: #4D4D4F;}
    
    .tagline {color:#333333;}
    .tagline a {text-decoration:none; color:#333333;}
    
    .post p+p {padding-top: 12px;}
    .post {color: #4d4d4f;}
    .post a {color: #0e73b8;}
    .post a:hover, 
    .post .postmetadata a.comments-link:hover, 
    .post .postmetadata .category a:hover, 
    .post .postmetadata small .author {color: #ff0505;}
    
    #sidebar h2 {color: #4D4D4F;}
    #sidebar .widget {color: #454547;}
    #sidebar .widget a {color: #4D4D4F;}
    #sidebar .widget a:hover {color: #0e73b8;}
    
    #sidebar .widget#widget_text, 
    #sidebar .widget#widget_calendar, 
    #sidebar .widget#widget_recent_comments, 
    #sidebar .widget#googlemapWidget {color: #454547;}
    
    #sidebar .widget#widget_text a, 
    #sidebar .widget#widget_calendar a, 
    #sidebar .widget#widget_recent_comments a, 
    #sidebar .widget#googlemapWidget a {color: #0e73b8;}
    
    #sidebar .widget#widget_text a:hover, 
    #sidebar .widget#widget_calendar a:hover, 
    #sidebar .widget#widget_recent_comments a:hover, 
    #sidebar .widget#googlemapWidget a:hover {color: #ff0505;}
    
    #sidebar .widget#widget_text, 
    #sidebar .widget#widget_calendar, 
    #sidebar .widget#widget_recent_comments, 
    #sidebar .widget#googlemapWidget {}
    
    #footer {color: #666666;}
    /* ------- END Main color scheme -------- */
    
    
    * {margin: 0pt; padding: 0pt;}
    body {font-family:Arial, Helvetica, sans-serif; font-size:14px; background:#EDEEEF; line-height:20px;}
    a { text-decoration: underline; color: rgb(39, 134, 194); outline-color: -moz-use-text-color; outline-style: none; outline-width: medium; cursor: pointer; }
    a:hover { color: rgb(247, 83, 66); cursor: pointer; text-decoration: none; }
    .clear { display: block; clear: both; visibility: hidden; }
    .tab-title {display:none; overflow:hidden; visibility:hidden;}
    p+p {margin-bottom: 15px;}
    
    /* Fonts */
    h1 {font-size: 30px;}
    h2 {font-size: 1.6em; margin: 0;}
    h3 {font-size: 1.3em; padding: 0; margin: 0;}
    h1, h2, h3 { font-family:"Trebuchet MS",Arial,Helvetica,sans-serif; line-height:30px; }
    h2, h2 a { color:#141415; font-size:24px; font-weight:bold;}
    h1, h1 a, h1 a:hover, h1 a:visited, #headerimg .description {text-decoration: none;}
    h2, h2 a, h2 a:hover, h2 a:visited, h3, h3 a, h3 a:hover, h3 a:visited, #sidebar h2, #wp-calendar caption, cite {text-decoration: none;}
    .entry p {margin-bottom:0px; margin-top:0px; font-size: 14px;}
    code {margin: 0pt; padding: 1px 3px; background: rgb(255, 255, 225) none repeat scroll 0% 0%; font-family: Monaco,monospace; font-style: normal; font-variant: normal; font-weight: normal; font-size: 11px; line-height: normal; font-size-adjust: none; font-stretch: normal; -x-system-font: none;}
    em { font-style: italic; }
    hr { border: medium none ; margin: 0pt 0pt 1.4em; background: rgb(178, 204, 255) none repeat scroll 0% 0%; color: rgb(178, 204, 255); clear: both; float: none; width: 100%; height: 0.1em; }
    pre { padding: 10px; background: rgb(249, 249, 212) none repeat scroll 0% 0%; overflow: auto; margin-bottom: 15px; }
    acronym, abbr, span.caps {font-size: 0.9em;letter-spacing: .07em; cursor: help;}
    acronym, abbr {border-bottom: 1px dashed #999;}
    blockquote {background:transparent url(images/blockquote_bg.gif) no-repeat scroll left top; color:#000000; font-style:italic; margin:0 0 1em; min-height:1.5em; overflow:auto;
    padding:30px 10px 13px 18px;}
    blockquote p.source {color:#999999; font-size:11px; font-style:normal;}
    blockquote cite {margin: 5px 0 0; display: block;}
    .center {text-align: center;}
    .hidden { display: none;}
    a img {border: none;}
    
    .entry h2, .entry h3, .entry h4, .entry h5 {font-weight:normal; line-height:135%; margin:25px 0 10px; padding-bottom:5px;}
    .entry h1 {font-weight:normal; line-height:35%; color: #000000; padding:5px 0px 20px 0px;}
    .entry h3, .entry h2 {color: #000000; margin-bottom: 0px; padding-bottom: 0; font-weight: bold; text-transform:uppercase;}
    .entry h2 {font-size: 19px;}
    .entry h3 {font-style: italic; font-size: 17px;}
    .notice {background: #FFF6BF; border-top: 2px solid #FFD324; border-bottom: 2px solid #FFD324; text-align: center; margin: 10px auto; padding: 5px 20px;}
    .alert {background: #FCE4E0; border-top: 2px solid #EB6D59; border-bottom: 2px solid #EB6D59; text-align: center; margin: 10px auto; padding: 5px 20px;}
    span.highlight {background:#F9F1ED none repeat scroll 0 0; color:#F75342; font-style:italic;}
    span.highlight-bold {font-size:120%; font-weight:bold; line-height:150%;}
    span.inset-left, span.inset-right {border:1px solid #E5E5E5; color:#333333; display:block; font-size:100%; font-style:italic; margin-top:25px; padding:12px 8px 8px; position:relative; text-align:center; width:30%;}
    span.inset-right-title, span.inset-left-title {background:#FFFFFF none repeat scroll 0 0; color:#F75342; display:block; font-size:100%; font-weight:bold; left:10px; padding:3px 8px; position:absolute; top:-15px;}
    span.inset-right {float:right; margin-left:15px;}
    span.inset-left {float:left; margin-right:15px;}
    span.dropcap {display:block;float:left;font-size:400%;line-height:100%;margin:0 4px 0 0;}
    .important {border:1px solid #E5E5E5; margin:25px 0 10px;padding:15px; position:relative;}
    span.important-title {background:#FFFFFF none repeat scroll 0 0; color:#F75342; display:block; font-size:120%; left:10px; padding:3px 8px; position:absolute; top:-0.8em;}
    
    /* Begin Lists */
    html > body .entry ul {margin-left: 0px; padding: 0 0 0 30px; list-style: disk; padding-left: 10px; text-indent: 0px;}
    html > body .entry li {margin: 7px 0 8px 10px;}
    html > body .entry li a {font-size: 14px;}
    .entry ol {padding: 0 0 0 35px; margin: 0;}
    .entry ol li {margin: 0; padding: 0; list-style: decimal outside;}
    .postmetadata ul, .postmetadata li { display: inline; list-style-type: none; list-style-image: none;}
    .entry dl { margin: 1.5em 0pt; }
    .entry dd{margin:0; padding:0 15px 15px; }
    .entry table { margin: 0pt auto;}
    .entry th, .entry td { height: 1em; line-height: 18px; padding:10px; }
    ol li, #sidebar ul ol li {list-style: decimal outside;}
    
    ul.bullet-1, ul.bullet-2, ul.bullet-3, ul.bullet-4, ul.bullet-5, ul.bullet-6 {}
    ul.bullet-1 li, ul.bullet-2 li, ul.bullet-3 li, ul.bullet-4 li, ul.bullet-5 li, ul.bullet-6 li {list-style-image:none; list-style-position:outside; list-style-type:none; margin-bottom:5px !important; padding-bottom:3px !important; padding-left:22px !important;}
    ul.bullet-1 li {background:url(images/bullets/3.gif) no-repeat 0 5px;}
    ul.bullet-2 li {background:url(images/bullets/4.gif) no-repeat 0 5px;}
    ul.bullet-3 li {background:url(images/bullets/1.gif) no-repeat 0 5px;}
    ul.bullet-4 li {background:url(images/bullets/2.gif) no-repeat 0 5px;}
    ul.bullet-5 li {background:url(images/bullets/5.gif) no-repeat 0 5px;}
    ul.bullet-6 li {background:url(images/bullets/6.gif) no-repeat 0 5px;}
    /* End Entry Lists */
    
    
    #topstrip {height: 78px; background-color:#0C91DC; margin: 0 auto; border-top: 8px solid #111E6B;}
    
    #header {height:272px; background-image:url('images/header/strip.jpg'); backround-repeat: repeat-x;}
    #headercontent {width: 960px; margin: 0 auto;}
    #headercontent .boxx {float: left; height: 209px; width: 620px; background-image:url('images/header/boxstrip.jpg'); backround-repeat: repeat-x; border: 5px solid #0A9AE3;position:relative;top:25px; right:0px;}
    #headercontent .boxximg {padding-top: 10px; padding-left: 15px; padding-right: 15px; float: left; width: 149px;}
    #headercontent .textbox {height: 200px; width: 428px; padding: 6px; float: left;}
    #headercontent h1 {font-size:23px;color:#ffffff;line-height:26px;font-weight:bold; margin-bottom: 12px;}
    #headercontent p {padding-top: 7px;}
    
    .textbox {font-weight: bold; color: #111E6B;}
    
    .textbox ul
    {
    margin-left: 8px;
    padding-left: 7px;
    list-style-type: disk;
    }
    
    .textbox li
    {
    list-style-type: disk;
    line-height: 26px;
    font-size: 12px;
    }
    
    .newsletterbox {float: left; width: 280px; padding-top: 30px; padding-left: 10px;}
    .newsletterbox p, .newsletterbox h2 {color: white;}
    .newsletterbox p {margin-bottom: 10px;}
    .newsletterbox h2 {font-size: 19px; padding-left: 15px;}
    
    .content-pad {width: 920px; background-color:#fff; text-align: left; margin: 0pt auto; padding:0 30px; position: relative; z-index: 1000;}
    .top { margin: 15px 0px 10px 0px; float:left; width: 970px; border-bottom:1px solid #EEEEEE; border-top:1px solid #EEEEEE;}
    .bot {background:url(images/main-bot.png) no-repeat; height:13px; clear:left; margin: 0px auto 0 auto; width: 995px;}
    #logo {padding-top: 12px; width: 960px; margin: 0 auto;}
    .tagline {position:absolute; font-size:12px; font-weight:bold; text-transform:uppercase; background:#fff; padding:6px 17px 4px 12px; top:50%; right:0px;}
    .head-img {margin-bottom:20px; position:relative;}
    .head-img img {border:0px;}
    
    /* Search form */
    #top_search {height:25px; position:absolute; right:30px; top:50px; width:370px;}
    .search-input {background:transparent url(images/search.png) no-repeat scroll 0 0; border:medium none; color:#9499A1; float:left; font-family:Arial; font-size:13px; height:17px; margin:0; padding:5px 10px 0 38px; width:240px;}
    .search-submit {border:0 none; float:right; height:30px; margin-top:-2px; width:73px;}
    
    .topposts p {font-size: 13px; margin-top: 10px;}
    .topposts p+p{padding-top: 12px;}
    
    .columns {width: 920px; border-bottom:1px solid #eeeeee; }
    .thumb {float:left;}
    img.attachment-thumbnail {float: left; padding: 0 10px 0 0 !important;}
    .narrowcolumn {float: left; padding: 12px 0 20px 0; margin: 0; width: 670px;}
    .vidarea {width: 630px; padding-top: 20px; padding-bottom: 30px;  margin: auto; text-align: center; float: left;}
    .vidbox {width: 295px; float: left; margin-right: 20px;}
    .vidbox a {font-size: 20px;}
    
    .list1 ul
    {
    margin-left: 0;
    padding-left: 0;
    list-style: none;
    }
    
    .list1 li
    {
    padding-left: 25px;
    background-image: url(images/siteimages/bullet.gif);
    background-repeat: no-repeat;
    background-position: 0 5px;
    line-height: 26px;
    font-size: 13px;
    }
    
    .list2 ol {
    font-family: Georgia, Times, serif;
    color: #0C91DC;
    margin-left: 20px;
    font-size: 35px;
    font-style: italic;
    }
    
    .list2 ol p {
    color: #000000;
    font-family:Arial, Helvetica, sans-serif; 
    font-size:14px; 
    line-height:24px;
    font-style: normal;
    padding-bottom: 16px;
    margin: 0;
    padding-top: 5px;
    }
    
    .list2 ol .r {counter-reset: chapter 5;}
    
    .list2 li {margin: 0;}
    .list2 li:before {content: none !important;}
    
    .narrowcolumn h2, .narrowcolumn h1 {margin-bottom: 10px;}
    .narrowcolumn h3 {margin-bottom: 10px; }
    
    .breakline {border-top:3px dotted #d5d5d5; margin-top: 10px; margin-bottom: 10px;}
    
    .vidclick {font-size: 14px; font-style: italic;}
    .vidclick p+p {margin-top: 7px;}
    .vidclick a {font-weight: bold; font-size: 15px;}
    
    .emailofferbox {width: 670px; background-color:#EDEEEF; padding: 10px; border: solid 4px #06B0F8; background-image: url('images/siteimages/book2.jpg'); background-repeat: no-repeat; background-position: 520px 60px; margin-bottom: 25px;}
    
    .emailofferbox h3 {color:#CB3939;}
    .emailofferbox h4 {font-size: 16px; padding-bottom: 10px;}
    
    .emailofferbox ul
    {
    margin-left: 30px;
    padding-left: 0;
    list-style-type: square;
    margin-bottom: 10px;
    }
    
    .emailofferbox li
    {
    margin-left: 12px;
    list-style-type: square;
    line-height: 26px;
    font-size: 13px;
    }
    
    .emailofferbox p {font-style: italic;}
    
    .bottomoffer {width: 870px; padding: 8px; border-top:2px solid #EDEEEF;}
    .bofferimage {width: 250px; float: left;}
    .boffertext {float: left;}
    
    .boffertext ul
    {
    margin-left: 0;
    padding-left: 0;
    list-style: none;
    }
    
    .boffertext li
    {
    padding-left: 25px;
    background-image: url(images/siteimages/bullet.gif);
    background-repeat: no-repeat;
    background-position: 0 5px;
    line-height: 26px;
    font-size: 13px;
    }
    
    .post {margin:0px 10px 0px 0px; text-align:left;}
    .post .postmetadata img {float:left;width:30px;margin:0 5px 0 0;}
    .post .postmetadata {font-size:11px; border-top:3px dotted #d5d5d5; padding:3px 2px 10px 2px; text-align:left; margin-top:15px; color:#878789;}
    .post .postmetadata .category {margin:5px 0 6px 0; display:block;}
    .post .postmetadata .category a {background:url(images/ico-category.gif) no-repeat 0px 2px; padding-left:12px; color:#878789; margin-right:5px;}
    .post .postmetadata .category a:hover{}
    .post .title {position:relative;}
    .post .title h2 {line-height:35px;}
    .post .title h2 a {font-size:26px;  color: #141415;}
    .post .title h2 a:hover {color: #F75342;}
    
    .post .title h1 {line-height:35px; font-size:26px; color: #292727;}
    
    .postadbox {float: left; height: 99px; width: 650px; border: dashed 3px red; background-color: #ECEEF5; margin-bottom: 15px;}
    .postadboxvid {float: left; width: 100px;}
    .postadboxtext {float: left; width: 270px; color: #000000; text-align: center;}
    .postadboxtext2 {float: left; height: 33px;  margin-top: 30px; margin-left: 5px; background-image: url(images/siteimages/vidarrow.gif); background-repeat: no-repeat;}
    .postadboxtext2 p {padding-left: 80px; padding-top: 5px; font-size: 18px;}
    
    .singlepage .post .title {position:relative; width:700px;}
    .fullwidth.singlepage .post .title {width:865px;}
    .singlepage .post .title h2 {line-height:27px; overflow:hidden; max-height:55px;}
    .post small {font-size:11px; color:#878789; padding-left:3px;}
    .post small a.cat{ background:url(images/ico-meta.gif) 1px center no-repeat; padding:0 0 0 11px; color:#878789;}
    .post .comments { position:absolute; top:0px; left:500px; background:url(images/comment-bg.gif) no-repeat; padding-left:13px; padding-top:3px; display:block; height:30px; width:74px;}
    .post .comments a {font-size:11px; color:#FFF; text-decoration:none; }
    .post .comments a:hover { color:#FFF; text-decoration:underline;}
    .post .date {background:url(images/date_bg.jpg) no-repeat;  height:42px; width:77px; position:absolute; left:3px;} 
    .post .post-month {color:#FFFFFF; display:block; font-size:11px; line-height:11px; margin-left:2px; padding-top:5px; text-align:center;}
    .post .post-day {color:#FFFFFF; display:block; font-size:18px; font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; line-height:18px; margin-left:-3px; padding-top:4px; text-align:center;}
    .post .entry { margin-top:6px; color: black;}
    
    
    .slideshow-bg {width:970px; position:relative; overflow:hidden;}
    .slideshow-bg #left-arrow {left: 15px; background:url("images/arrow-left.jpg") no-repeat;}
    .slideshow-bg #right-arrow {right:15px; background:url("images/arrow-right.jpg") no-repeat;}
    .slideshow-bg #left-arrow, .slideshow-bg #right-arrow {position:absolute; top:45%; display: block; width:21px; height:28px;}
    .slideshow-bg #left-arrow:hover, .slideshow-bg #right-arrow:hover {opacity:0.5;}
    .slideshow-bg .slideshow-main {padding:5px 25px 30px 60px;}
    .slideshow-bg .slideshow {overflow:hidden; width:970px; margin-bottom:15px; background:#F9F9F9; position:relative;}
    .slideshow-bg .slideshow, .slideshow-bg .slideshow > div {height:230px; width:970px;}
    .slideshow .desc {float:left; width:370px; padding:13px; margin-top:10px;}
    .slideshow .desc h2 {padding-bottom:28px;}
    .slideshow .desc h2 a {font-size:41px; font-weight:bold;}
    
    #slideshow-nav {position:absolute; left:47%; bottom:0px;}
    #slideshow-nav a.activeSlide {background:url("images/pagination-small.png") no-repeat 0 0;}
    #slideshow-nav a {background:url("images/pagination-small.png") no-repeat 0 -9px; display:block; float:left; height:9px; margin:0 1px; text-indent:-9999px; width:9px;}
    
    
    #sidebar {float:right; padding:0 0 10px 0; width:240px; color:#454547;}
    #sidebar h2 {margin: 0px 0px 10px 0px; padding: 0; font-size:19px; color: #06B0F8;}
    #sidebar a {color:#878789; }
    #sidebar ul li.widget {float:left; width:220px; padding:10px 10px 30px 10px; -moz-border-radius-bottomleft:5px; -moz-border-radius-bottomright:5px; -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px; margin-bottom:15px; list-style-type: none;}
    #sidebar ul #meta.widget  {background:none;}
    #sidebar ul li.widget a {text-decoration:none;}
    #sidebar ul li.widget a:hover {text-decoration:underline;}
    #sidebar ul li.widget#widget_search .search-input {width: 150px;}
    #sidebar ul li { float:none; width:auto; border-bottom:1px solid #e8e8e8; padding-bottom:5px !important; list-style-type: none;}
    #sidebar ul li ul li:last-child {border-bottom:none;}
    #sidebar ul li ul li:last-child.rss {border-bottom:1px solid #e8e8e8;}
    #sidebar ul li ul li ul {padding:0px !important; margin:0px !important;}
    #sidebar ul li ul li ul li{ margin:0px 0px 0px 10px !important; padding:0px !important; border:0px !important;}
    #sidebar ul p, #sidebar ul select {margin: 5px 0 8px;}
    #sidebar ul ul ul, #sidebar ul ol {margin: 0 0 0 10px;}
    #sidebar ul ul li, #sidebar ul ol li {margin: 5px 0 0; padding: 0;}
    #sidebar .widget ul li a {background:url(images/ico-meta.gif) no-repeat 0 8px; padding:4px 0 4px 15px; line-height:16px;}
    #sidebar #widget_tag_cloud h2 {margin:0px;}
    #sidebar #widget_tag_cloud a {line-height:25px;}
    #sidebar #widget_text .textwidget {margin-top:7px;}
    #sidebar #widget_search h2 {float:left; padding-right:15px;}
    #sidebar #widget_recent_comments ul li a {background:none;}
    #sidebar #widget_text {line-height:18px;}
    #meta .rss {background:url("images/rss.gif") no-repeat right 3px;}
    #meta .twitter {background:url("images/twitter-small.gif") no-repeat right;}
    
    #twitter .rightlink {background:url("images/ico-twitter.png") no-repeat scroll 120px 5px transparent; display:block; height:22px; padding-top:10px;}
    #sidebar .map {width:300px; height:300px; border:3px solid #FFF; margin-left:5px; margin-bottom:15px;}
    #sidebar #widget_search .c_simg {top:8px;}
    
    #footer {border-top:2px solid #EDEEEF; padding: 0px 0pt 10px 0px; margin-bottom:0px !important; font-weight: normal; font-size: 0.9em; line-height: 15px; color: rgb(150, 150, 150); text-align:center; }
    #footer a {color: rgb(255, 255, 255);}
    #footer a:hover {color: rgb(247, 83, 66);}
    #footer .lt {float:left;}
    #footer .rt {float:right;}
    #footer .rt img.png {margin-top:-5px;}
    
    #ftbottom {width: 968px; height: 70px; margin: 0 auto; background-color: #0C91DC; padding: 6px; border-bottom: 8px solid #111E6B;}
    
    .botlinks {float: left; margin-top: 15px; color: white;}
    .botlinks a {padding: 0 10px 0 10px; color: white;}
    .bottext {padding: 4px;}
    
    /* Navigation */
    #menu {padding-top:5px;}
    #menu a {font-size: 20px; text-decoration: none; padding-right: 15px;}
    #menu a {font-size: 20px;}
    
    
    Code (markup):
     
    Solved! View solution.
    fadetoblack22, Sep 25, 2012 IP
  2. HNC-Web

    HNC-Web Peon

    Messages:
    12
    Likes Received:
    0
    Best Answers:
    1
    Trophy Points:
    0
    #2
    Is it possible to simplify your problem as HTML section and respective CSS sections only?
    It is most likely that you're overriding list-style-position somewhere but it's hard to really search through your CSS.
     
    HNC-Web, Sep 25, 2012 IP
  3. HBz

    HBz Peon

    Messages:
    51
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #3
    This would be a lot easier if you just linked to the live site, where we (or you! :)) can use debugging tools to see all the CSS definitions at a glance.

    But this is a text-wrapping issue. It doesn't sound at all like you're overriding list-style-position, which frankly doesn't appear to be related.

    Your issue is that whatever is containing this UL is not wide enough to accommodate the text. Increase the width and you should see that it won't wrap anymore. However, that isn't a permanent or necessarily good solution - how can you account for various text size/DPI settings, and so on? It would be better if you didn't define what I suspect is a fixed pixel width here. Make use of a % width with min/max-width in ems, or just fix-width in terms of ems, with the font size also in em.

    That *should* be more sound.

    Granted, probably nobody is going to stop you from just increasing the px and leaving it at that. Given the overall look of your CSS, that might be the fastest and most straightforward 'solution', even if it isn't a real one.
     
    HBz, Sep 25, 2012 IP
  4. HNC-Web

    HNC-Web Peon

    Messages:
    12
    Likes Received:
    0
    Best Answers:
    1
    Trophy Points:
    0
    #4
    @HBz
    I think what he means is like:

    * | Lorem ipsum dolor
      | sit amet.
    Code (markup):
    Rather than him now having:
    * | Lorem ipsum dolor
    sit amet.
    Code (markup):
    Which can be done by setting list-style-position property to 'outside' or 'inside'
     
    HNC-Web, Sep 25, 2012 IP
  5. HBz

    HBz Peon

    Messages:
    51
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Oh - my bad. You are probably correct. I read it as "on the same line as the first line", oops.
     
    HBz, Sep 25, 2012 IP
  6. fadetoblack22

    fadetoblack22 Well-Known Member

    Messages:
    2,399
    Likes Received:
    62
    Best Answers:
    0
    Trophy Points:
    160
    #6
    Hey guys, thanks for the replies. Yes, I may have not explained it as well as I could have, but HNC-Web is correct. Any idea how to do that? I have tried but it doesn't seem to be working as there are so many nests of ul and li.
     
    fadetoblack22, Sep 26, 2012 IP
  7. HNC-Web

    HNC-Web Peon

    Messages:
    12
    Likes Received:
    0
    Best Answers:
    1
    Trophy Points:
    0
    #7
    @fadetoblack22
    Is it possible that you output the html mark-up for your list along with it's wrapper?
     
    HNC-Web, Sep 26, 2012 IP
  8. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #8
    Aye, CSS without the HTML it's applied to may as well be gibberish for all the help we can 'give' you -- and as others said a live copy of the site would be far, FAR more enlightening.

    Much less some formatting on that CSS instead of the painfully difficult to work with 'stuff everything onto one line' rubbish. I can't even figure out where you're setting the padding to place that image into in the first place!
     
    deathshadow, Sep 26, 2012 IP
  9. fadetoblack22

    fadetoblack22 Well-Known Member

    Messages:
    2,399
    Likes Received:
    62
    Best Answers:
    0
    Trophy Points:
    160
    #9
    Hi guys, the reason I didn't put a live copy of the page is because the pages aren't indexed yet and I have had things copied before, so I'm being very careful.

    It's a popular wordpress theme: delicate. All the formatting was done by the author.

    This is what outputs the list in my first post:

    
    
       <div id="sidebar" class="profile">
         <ul>
    		<li id="widget_recent_entries" class="widget png_scale">		<h2 class="blocktitle"><span>Recent fat loss articles</span></h2>		<ul>
    				<li><a href="http://site.com/" title="">title 1 </a></li>
    				<li><a href="http://site.com/" title="">title 2 </a></li>
    				</ul>
    		</li><li id="widget_categories" class="widget png_scale"><h2 class="blocktitle"><span>Weight loss Topics</span></h2>		<ul>
    	<li class="cat-item cat-item-4"><a href="http://www.site.com/category/build-muscle" title="View all posts filed under Build muscle">Build muscle</a>
    </li>
    	<li class="cat-item cat-item-6"><a href="http://www.site.com.com/category/lose-fat" title="View all posts filed under Lose fat">Lose fat</a>
    </li>
    	<li class="cat-item cat-item-5"><a href="http://www.site.com.com/category/lose-weight" title="View all posts filed under Lose weight">Lose weight</a>
    </li>
    	<li class="cat-item cat-item-3"><a href="http://www.site.com/category/nutrition" title="View all posts filed under Nutrition">Nutrition</a>
    </li>
    		</ul>
    </li> 
    </ul>   </div>    
    
    <div class="clear"></div>   
    
    <div class="bottomoffer">
    
    <div class="bofferimage">
    <a href="http://site.com/wp-content/themes/delicate/" target="_blank" rel="nofollow"><img src="http://site.com/wp-content/themes/delicate/images/siteimages/></a>
    </div>
    
    
    Code (markup):
     
    fadetoblack22, Sep 27, 2012 IP
  10. Gigaports

    Gigaports Peon

    Messages:
    44
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #10
    add this to your CSS:

    #widget_recent_entries li li a, #widget_categories li li a {
    background:url(images/bullet.png) no-repeat 0 50%;
    max-width: 300px; /* max width of text on the sidebar */
    line-height: 1.4;
    }
    Code (markup):
    Regards,
     
    Gigaports, Sep 27, 2012 IP
  11. fadetoblack22

    fadetoblack22 Well-Known Member

    Messages:
    2,399
    Likes Received:
    62
    Best Answers:
    0
    Trophy Points:
    160
    #11
    Hello, thanks for the reply. I added this code to the css and it doesn't seem to be working. Nothing changes...
     
    fadetoblack22, Oct 1, 2012 IP
  12. #12
    Actually it's rather simple.

    wordpress. org/extend/themes/delicate (delete space, I'm not allowed to post links)

    Is that the theme you're using? I didn't read through whole CSS because I know that issue with this theme.

    Add this line:
    
    [LIST]
    [*][COLOR=#C80000]display[/COLOR]: block;
    [/LIST]
    Code (markup):
    to #sidebar .widget ul li a
    or any other "a" element that you want to move to right

    Last line of the code should be added, to be displayed as a block, instead of plain text. Please let me know if it doesn't work on my PM
     
    ntmedia, Oct 6, 2012 IP
    fadetoblack22 likes this.
  13. fadetoblack22

    fadetoblack22 Well-Known Member

    Messages:
    2,399
    Likes Received:
    62
    Best Answers:
    0
    Trophy Points:
    160
    #13
    That worked perfectly! Thanks!
     
    fadetoblack22, Oct 7, 2012 IP