align problem in wordpress theme unordered lists

Discussion in 'CSS' started by largo6, Jan 16, 2012.

  1. #1
    hello
    i have a wordpress theme i modifyed to look like my client old website,
    i'm not an css experts but the odd thing that in the right sidebar there is ul list and when the
    text jump to the second line it doesn't start in the point of the first line is starting
    before that under the heart pic.
    i can't find the line to edit so when the text continune in the second line it will start from
    the point the first line is starting.
    css style attached.
    image below with marks
    Untitled.png
    thanks

    p.s

    can't post urls so if you need the site url just say

    
    
    
    /* reset */ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}      /* basic */ body {     background-color: #EDEAE5;     margin: 0px 0px 20px 0px;     font: 11pt/150% Arial, sans-serif;     color: #444444; }  /* links */ a {     color: #7D6827;     text-decoration: none;     outline: none; } a:hover {         color: #7A1505;     text-decoration: underline; }  /* text */ p {     margin-bottom: 18px; } blockquote, q {      margin: 0px 0px 11px 0px;      padding: 0px 0px 0px 40px;      overflow: hidden;      color: #666666;     font-style: italic; } blockquote i,  blockquote em,  blockquote cite {     font-style: normal; } acronym, abbr {      cursor: help;      border-bottom: 1px dashed #999999; } code, pre {      font: normal 9pt/160% 'Courier New', Courier, Fixed; } pre {      margin: 0px 0px 11px 0px; overflow: auto; } sup, sub {     height: 0;     line-height: 1;     position: relative;     vertical-align: baseline;     font-size: small; } sup {     bottom: 1ex; } sub {     top: .5ex; } small {      font-size: small; } big {     font-size: large; } ins {     background: #ffc; }  /* lists */ ul {     list-style: disc;     margin: 0 36px 18px 0; } ol {     list-style: decimal;     margin: 0 36px 18px o; } ol ol {     list-style: upper-alpha; } ol ol ol {     list-style: lower-roman; } ol ol ol ol {     list-style: lower-alpha; } ul ul, ol ol, ul ol, ol ul {     margin-bottom: 0; } dl {     margin: 0 0 24px 0; } dt {     font-weight: bold; } dd {     margin-bottom: 18px; }  /* form */ input, select, textarea {      background-color: #F9F9F9;     padding: 8px 8px;     border: solid 2px #EDEAE5;     font-family: Arial,Verdana, Tahoma, sans-serif;     font-size: 14px; line-height: 100%;     color: #7d6843;     } textarea { line-height:150%; } input:hover, select:hover, textarea:hover, input:focus, select:focus, textarea:focus {     border-color: #C9C9C9;     } input.button,  #submit {      padding: 9px 8px 9px 8px;      } input.button:hover,  #submit:hover {     background-color: #EDEAE5; }  /* tables */ table, th, td {      border: solid 1px #E8E8E8;      border-collapse: collapse;      padding: 2px 5px 2px 5px; } th {      background-color: #E8E8E8; }  /* headings */ h1, h2, h3, h4, h5, h6 {      line-height: 150%;      margin: 10px 0px 10px 0px;  } h1 {      font-size: 180%;  } h2 {      font-size: 160%;  } h3 {      font-size: 140%;  } h4 {      font-size: 120%;  } h5 {      font-size:100%;      } h6 {      font-size: 80%;  }   #outdated {     width: 100%;     overflow: hidden;     position: fixed;     top: 0; left: 0;     background-color: #EDEAE5;     border-bottom: solid 1px #f7941d;     text-align: center;     font-size: 12px; } #outdated p {     margin: 5px 0; padding: 0; }  /* hides things only visible when printing */ .print-view {     display: none; }   /* wrapper */ #wrap {     width: 920px;     margin: 0px auto 0px; padding: 0px;     clear: both; }  /* menu */ .menu {     margin: 0px; padding: 0px;     background: #971505;     overflow: visible;     font-family: sans-serif;     font-size: 13px; line-height: 100%;     font-style: normal;     list-style: none; list-style-image: none;     clear: both;     -moz-border-radius: 10px 10px 0px 0px;     -webkit-border-radius: 10px 10px 0px 0px;     border-radius: 10px 10px 0px 0px; }     .menu li, .menu li a {         display: inline-block;     }     .menu li {         margin: 0px; padding: 0px;         position: relative;     }          ul.menu > li:after {         content: "|";         color: #FFFFFF;     }          .menu li a {         padding: 12px;             color: white;     }     .menu li a:hover {         color: #333333;         text-decoration: none;     }               /* sub menu */     .menu li ul {         display: none;         margin: 0px; padding: 0px;         position: absolute; right: 0; top: 100%;         text-transform: none;         list-style: none; list-style-image: none;     }     .menu li:hover > ul {         display: block;         z-index: 2;     }     .menu li ul li a {         width: 150px;         display: block;         background: #971505;     }     .menu li ul li a:hover,     .menu li ul li.current_page_item > a {         text-decoration: underline;     }          /* sub-sub menu */     .menu li ul li ul {         display: none;     }     .menu li ul li:hover ul {         left: 100%; top: 0;     }      #secondary-menu {         margin-bottom: 10px;     }  /* header */ #header {         height:226px;     padding: 0px 0px 0px 0px;     overflow: hidden; }     #header a {         color: #333333;     }     #header a:hover {         color: #333333;         text-decoration: none;     }      #header h1 {         margin: 0px; padding: 0px;         font: bold 38px/100% 'Droid Sans', Helvetica, Arial, sans-serif;         letter-spacing: -1px;         text-shadow: 1px 1px 1px rgba(255,255,255,0.5);     }     #header h4 {         font: normal 15px/170% 'Droid Serif', Georgia, serif;         font-style: italic;         margin: 10px 0px 0px 0px; padding: 0px;         text-shadow: 1px 1px 1px rgba(255,255,255,0.5);         color: #858585;     }  /* wide template */ .page-template-wide-php #content #c2,  .attachment #content #c2 {     width: 900px;     margin: 0px; } .page-template-wide-php #content #c1,  .page-template-wide-php #content #c3, .attachment #content #c1, .attachment #content #c3 {     display: none; }  /* content */ #content {     overflow: hidden; }      #c1 {         width: 290px;         float: left;         overflow: hidden;         display: none;     }     #c2 {          width: 610px;                 height:1832px;         float: left;         padding: 0px 30px 30px 30px;         overflow: hidden;         border-bottom : solid 10px #96180C; border-left: 0; border-right: 0;         background: #FFFFFF;         line-height: 170%;         color:#7d6843;         -moz-border-radius: 0px 0px 0px 10px;     -webkit-border-radius: 0px 0px 0px 10px;     border-radius: 0px 0px 0px 10px;     }     #c3 {         width: 250px;         float: left;         overflow: hidden;         -moz-border-radius: 10px 0px 0px 10px;     -webkit-border-radius: 10px 0px 0px 10px;     border-radius: 10px 0px 0px 10px;     }  /* page header */ .page-head {      margin: 0px 0px 20px 0px; padding: 0px 0px 20px 0px;     overflow: hidden;     border-bottom: dotted 2px #EAEAEA; }  /* posts */ .post, #content .attachment {      margin: 0px 0px 40px 0px; padding: 0px;     overflow: hidden;      clear: both; } .sticky {     padding: 30px;     margin: 0px -30px 40px -30px; }      h1.post-title {         margin: 1px 0px 0px 0px; padding: 1px 0px 0px 0px;         font: normal 32px/130% 'Droid Serif', Georgia, serif;         font-style: italic;         text-shadow: 1px 1px 1px #ffffff;     }     h1.post-title a {         color: #333333;     }     h1.post-title a:hover {         color: #666666;         text-decoration: none;     }      .post-text {         overflow: hidden;         margin: 0px 0px 20px 0px;     }      .post-meta {          overflow: hidden;         padding: 10px 0px 10px 0px;         border-top: dotted 2px #EAEAEA; border-bottom: dotted 2px #EAEAEA;         clear:both;         color: #B1B1B1;         font-style: italic;         font-size: 8pt;         letter-spacing: 1px;     }         .post-meta a {             color: #B1B1B1;             text-transform: uppercase;             font-style: normal;         }         .post-meta a:hover {             text-decoration: none;             color: #868686;         }         .post-meta em {             font-style: normal;             text-transform: uppercase;         }         .post-comments {             float: right;         }      /* read more link */ .more-link {     display: inline-block;     margin: 20px 0px 10px 0px; padding: 10px 15px 10px 15px;     line-height: 100%;     text-decoration: none;     clear: left; }  /* post page navigation */ .post-pages, .navigation {     overflow: hidden;     margin: 30px 0px 30px 0px; }     .post-pages a span, .post-pages span,     .navigation a, .navigation span {         display: inline-block;         padding: 8px 10px;         cursor: pointer;         font-size: small;         line-height: 100%;     }     .post-pages span,     .navigation span {         background: none;         border: none;     }      .navigation .prev {         float: left;         margin: 0px 5px 0px 0px;     }     .navigation .next {         float: right;         margin: 0px 0px 0px 5px;     }  /* next/previous post navigation */ .post-nav {     margin: 30px 0px 30px 0px; }     .post-nav .alignleft {         display: inline-block;         width: 20%;         padding: 0px 0px 0px 40px;         background: url('images/icon_left.png') left top no-repeat;     }     .post-nav .alignright {         display: inline-block;         width: 20%;         padding: 0px 40px 0px 0px;         background: url('images/icon_right.png') right top no-repeat;         text-align: right;             }     .post-nav i {         color: #999999;         font-size: 8pt;         letter-spacing: 1px;     }  /* read more/post pages/navigation styling */ .more-link,  .post-pages a span, .navigation a {     background: #e6e6e6;     border: solid 2px #d1d1d1;     color: #666666; } .more-link:hover,  .post-pages a:hover span,  .navigation a:hover {     background: #D7D7D7;     border-color: #C1C1C1;     color: #666666;     text-decoration: none;  }  /* comments */     .comment-heading {         clear: left;     }     .leave-one {         display: inline-block;         margin-top: 10px; padding-right: 25px;         background: url('images/icon_right_small.png') right 2px no-repeat;     }     .comment-heading a {          float:right;         font-size: 50%;     }     .commentlist {         margin: 0px; padding: 0px;         overflow: hidden; clear: both;         list-style: none; list-style-image: none;     }     .commentlist ul {         margin: 0px; padding: 0px;         list-style: none; list-style-image: none;     }     .comment {         margin: 0px 0px 0px 40px; padding: 0px;         overflow: hidden;     }     .comment.depth-1 {         margin: 0px 0px 10px 0px;     }         .comment-body {             margin: 0px 0px 0px 0px; padding: 10px;             overflow: hidden;             position: relative;             border-bottom: solid 1px #E1E1E1;         }         .comment.depth-1 > .comment-body {             border-top: solid 1px #E1E1E1;         }         .bypostauthor > .comment-body {             background: #F8F3E4;         }              #content .comment .avatar {             position: absolute;             top: 10px; left: 10px;         }         .comment-wrap {             margin-left: 60px;         }         ul.children .comment-wrap {             margin-left: 40px;         }             .comment-meta {                 overflow: hidden;                 margin-bottom: 10px;                 font-size: 11px;                 color: #A8A8A8;             }                          #content ul.children .avatar {                 width: 30px; height: 30px;             }                          .comment-date, .comment-edit-link {                 color: #A8A8A8;             }             .comment-date:hover, .comment-edit-link:hover {                 color: #7C7C7C;                 text-decoration: none;             }             .comment-meta h4 {                 margin: 0px; padding: 0px;                 display: inline;                 font-size: 15px;                 color: #666666;                             }                  .comment-text {                 overflow: hidden;             }                 .comment-body blockquote {                      background: #FFFFFF url('images/quote.png') 10px 10px no-repeat;                     padding: 10px 10px 10px 50px;                     border: solid 1px #E8E8E8;                 }                 .comment-body blockquote blockquote {                      border: 0;                 }         .comment-reply-link {             display: none;         }         .comment-body:hover .comment-reply-link {              position: absolute; bottom: 10px; right: 10px;             padding: 6px 10px 6px 10px;             display: block;             font-size: 11px; line-height: 100%;             background: #ffffff;             color: #555555;             border: solid 1px #E1E1E1;         }         .comment-body:hover .comment-reply-link:hover {             text-decoration: none;             background: #E1E1E1;         }          .trackbacklist {         margin: 30px 0px 30px 0px;         padding: 0px 0px 0px 30px;         overflow: hidden;         clear: both;     }         .trackbacklist .comment-author cite, .trackbacklist .comment-author cite a {             font-weight: normal;         }          #commentform {         margin: 0px 0px 10px 0px;     }              .cancel-comment-reply {             padding: 0px 0px 20px 0px;         }                  #commentform p {             clear: both;             overflow: hidden;             margin-bottom: 10px;         }                  .comment-form-author label,          .comment-form-email label,          .comment-form-url label,         .comment-form-comment label {             float: right;             padding-top: 8px;             display: inline-block;             width: 90px;             text-align: right;         }         .comment-form-url label,         .comment-form-comment label {             width: 90px;             padding-right: 20px;         }         .required {             float: right;             display: inline-block;             width: 15px;             padding: 8px 0px 0px 5px;             color: red;         }         .comment-notes .required {             float: none;             padding: 0px;             width: auto;         }                  #commentform #author,          #commentform #email,          #commentform #url,          #commentform #comment {             float: right;         }              .comment-form-author input {             background-image: url('images/icon_user.png');             background-position: 8px 8px; background-repeat:no-repeat;             padding-left: 35px;         }         .comment-form-email input {             background-image: url('images/icon_mail.png');             background-position: 10px 10px; background-repeat:no-repeat;             padding-left: 35px;         }         .comment-form-url input {             background-image: url('images/icon_web.png');             background-position: 8px 8px; background-repeat:no-repeat;             padding-left: 35px;         }              #commentform p input {             width: 220px;             margin-right: 10px;         }         #commentform textarea {             width: 350px;             max-width: 350px;             height: 200px;         }  /* widgets */ .widgets {      list-style: none;      margin: 0px; padding: 0px;     background-color:#DED499; }     .widget {              height:1842px;         margin: 10px 0px 0px 0px; padding: 10px;         overflow: hidden;         color:#7D6827;     font-weight:bold;     border-bottom : solid 10px #96180C; border-left: 0; border-right: 0;         -moz-border-radius: 10px 10px 0px 10px;     -webkit-border-radius: 10px 10px 0px 10px;     border-radius: 10px 10px 0px 10px;     }     .widget:first-child {          margin-top: 0px;     }          .widget h2 {             display: inline-block;             margin: 0px 0px 10px 0px; padding: 8px 10px 8px 10px;             font: normal 8pt/100% Georgia, serif;             letter-spacing: 1px;             text-transform: uppercase;             text-shadow: 1px 1px 1px rgba(255,255,255,0.6);         }                  .widget ul,.widget ol {                          padding-right: 00px;              margin: 0 0 0 0px;             list-style-image: url('images/sideMenu_HeartIcon.jpg');                           list-style-position: inside;              border-bottom: solid 1px #FFFFFF;         }         .widget a {         margin: 0 10px 0 0;         }                  .widget li {              padding: 5px 0px 5px 0px;             border-top: solid 1px #FFFFFF;         }         .widget li:first-child {             border-top:0;         }           .widget ul li ul.children {             border: 0;                       }         .widget ul li ul.children li {              margin: 5px 0px 0px 0px;             border: 0;                     }                  .widget li>ul {         list-style: disc;          border:none;             }      #searchform label {         display: block;     }     #searchform #s {          background-image: url('images/icon_search.png');         background-position: 95% 10px;         background-repeat: no-repeat;         width: 50px;     }     #searchform #searchsubmit {         display: none;     }  /* footer */ #footer {     color: #999999;     font-size: 11px;     letter-spacing: 1px;     text-shadow: 1px 1px 1px rgba(255,255,255,0.5);     overflow: hidden;     padding-top: 30px; }     #footer a {         color: #999999;         text-transform: uppercase;         font-style: normal;     }     #footer a:hover {         color: #666666;         text-decoration: none;     }        /* images, aligns, and captions */ #content img {     margin: 0;     width: auto; height: auto;     max-width: 100%; }  #content .alignleft, #content img.alignleft {     display: inline;     float: left; } #content img.alignleft, #content .wp-caption.alignleft {     margin-right: 24px;     margin-top: 4px; }  #content .alignright, #content img.alignright {     display: inline;     float: right; } #content img.alignright, #content .wp-caption.alignright {     margin-left: 24px;     margin-top: 4px; }  #content .aligncenter, #content img.aligncenter {     clear: both;     display: block;     margin-left: auto;     margin-right: auto; }  #content img.alignleft, #content img.alignright, #content img.aligncenter {     margin-bottom: 12px; } #content .wp-caption {     background: #f1f1f1;     line-height: 18px;     margin-bottom: 20px;     padding: 4px;     text-align: center; } #content .wp-caption img {     margin: 5px 5px 0; } #content .wp-caption p.wp-caption-text {     color: #888;     font-size: 11px;     margin: 5px; } #content .wp-smiley {     margin: 0; } #content .gallery {     margin: 0 auto 18px; } #content .gallery .gallery-item {     float: left;     margin-top: 0; margin-bottom: 20px;     text-align: center;     width: 33%; } #content .gallery .gallery-caption {     display: block;     clear: both;     color: #888;     font-size: 12px;     margin: 10px 0px 0px 0px; } #content .gallery dl {     margin: 0; } #content .gallery img {     border: 10px solid #f1f1f1; } #content .gallery a:hover img {     border-color: #E4E4E4; } #content .gallery br+br {     display: none; } #content .attachment img {     display: block;     margin: 0 auto; }  /* gallery */ .category-gallery .size-thumbnail img {     border: 10px solid #f1f1f1;     margin-bottom: 0; } .category-gallery .gallery-thumb {     float: left;     margin-right: 20px;     margin-top: -4px; } #content .category-gallery .entry-utility {     padding-top: 4px; }  /* calendar */ #wp-calendar, #wp-calendar th, #wp-calendar td { background:none; border:none; } #wp-calendar { background:none; empty-cells: hide; width:100%; font:normal 11px/200% Verdana, Arial, Helvetica, sans-serif; } #wp-calendar th { font-style:normal; font-weight:normal; text-transform: capitalize; } #wp-calendar td { text-align: center; background-color:#E1E1E1; padding:0px; } #wp-calendar td:hover { background-color:#CFCFCF; } #wp-calendar a { text-decoration:none; display:block; background-color:#CDCDCD; color:#333333; } #wp-calendar a:hover { background-color:#B9B9B9; } #wp-calendar caption { font-weight:bold; text-align:center; } #wp-calendar #today { background-color:#FFFFFF; } #wp-calendar caption { text-align: center; width:100%; } #wp-calendar .pad { background-color:#F0F0F0; } #wp-calendar #next a { padding-right:10px; text-align:right; } #wp-calendar #prev a { padding-left:10px; text-align:left; } #wp-calendar .pad, #wp-calendar .pad:hover { background:#F3F3F3; }
    
    Code (markup):
     
    largo6, Jan 16, 2012 IP
  2. Piotr Aszoff

    Piotr Aszoff Active Member

    Messages:
    38
    Likes Received:
    3
    Best Answers:
    2
    Trophy Points:
    53
    #2
    Hi, are you familiar with firebug or chrome dev. tool?
    Anyway write a link to your site. It will be much easier to find the issue.
    Even if you can't write url's you can write www dot yoursite dot com (or whatever)
     
    Piotr Aszoff, Jan 16, 2012 IP
  3. largo6

    largo6 Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    hey thanks

    right side,text doesn't continune straight with the first line

    192 DOT 115 DOT 76 DOT 7/~lovestor/
     
    largo6, Jan 16, 2012 IP
  4. Piotr Aszoff

    Piotr Aszoff Active Member

    Messages:
    38
    Likes Received:
    3
    Best Answers:
    2
    Trophy Points:
    53
    #4
    line 708 of style.css file:
    (delete these lines or comment them out)
    list-style-image: url('images/sideMenu_HeartIcon.jpg');
    list-style-position: inside;

    line 719 (.widget li in style.css):
    add these lines:
    background: url('images/sideMenu_HeartIcon.jpg') no-repeat right 50% !important;
    padding-right: 20px !important;

    (the heart will be at the right in the middle, if you want it just on top right side do not write
    background: url('images/sideMenu_HeartIcon.jpg') no-repeat right 50% !important; just write
    background: url('images/sideMenu_HeartIcon.jpg') no-repeat right top !important;)

    if you do not want to use !important statement you have to change rtl.css file also
    at line 37 of that file delete or comment out these lines
    padding: 5px 1px 5px 0px;
    background-position: right 10px;
    and do not use !important statement
     
    Piotr Aszoff, Jan 16, 2012 IP
  5. Piotr Aszoff

    Piotr Aszoff Active Member

    Messages:
    38
    Likes Received:
    3
    Best Answers:
    2
    Trophy Points:
    53
    #5
    line 708 of style.css file:
    (delete these lines or comment them out)
    list-style-image: url('images/sideMenu_HeartIcon.jpg');
    list-style-position: inside;


    line 719 (.widget li in style.css):
    add these lines:
    background: url('images/sideMenu_HeartIcon.jpg') no-repeat right 50% !important;
    padding-right: 20px !important;


    the heart will be at the right in the middle, if you want it just on top right side do not write
    background: url('images/sideMenu_HeartIcon.jpg') no-repeat right 50% !important; just write
    background: url('images/sideMenu_HeartIcon.jpg') no-repeat right top !important;

    if you do not want to use !important statement you have to change rtl.css file also
    at line 37 of that file delete or comment out these lines
    padding: 5px 1px 5px 0px;
    background-position: right 10px;

    and do not use !important statements then
     
    Piotr Aszoff, Jan 16, 2012 IP
  6. Piotr Aszoff

    Piotr Aszoff Active Member

    Messages:
    38
    Likes Received:
    3
    Best Answers:
    2
    Trophy Points:
    53
    #6
    Sorry for sending same answer twice. I had to click two times
     
    Piotr Aszoff, Jan 16, 2012 IP