Support » Themes and Templates » CSS problem….how can I fix this?

  • I was trying to edit the css files on a webpage Im working on so that I could bring the menu bar closer to the logo. I ended up messing something up and now half of the logo is covered, but im not even sure whats covering it because its just white space.

    Heres my css code:

    * { margin: 0px; padding: 0px; list-style:none; text-decoration:none; behavior: url( }
    body { background: #083265 url(images/bkg.gif) repeat-x; font-family:'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Tahoma, Arial, Verdana, sans-serif; font-size:13px; color:#3a3a3a; }
    a:link { text-decoration: none; color : #285ab5; border: 0px; -moz-outline-style: none;}
    a:active { text-decoration: underline; color : #285ab5; border: 0px; -moz-outline-style: none;}
    a:visited { text-decoration: none; color : #285ab5; border: 0px; -moz-outline-style: none;}
    a:hover	{ text-decoration: underline; color : #ca0000; border: 0px; -moz-outline-style: none;}
    a:focus { outline: none;-moz-outline-style: none;}
    #wrapper { width: 923px; margin: 20px auto; }
    #top { background: url(images/top.png) no-repeat; height: 43px; width: 923px; }
    #main { background: url(images/bbg.png) repeat-y; width: 873px; padding:0 25px 20px 25px; line-height:140%; }
    #main h2 { font-size:18px; font-family:Arial; font-weight:normal; color:#285ab5; padding-bottom:5px;}
    #main h2 a { color:#285ab5;}
    .clear { clear:both;}
    .allinfos { font-size:11px; padding-bottom:10px;}
    span.comments { background:url(images/comment.gif) no-repeat 0 0; width:18px; height:11px; padding-left:20px;}
    span.category { background:url(images/category.gif) no-repeat 0 0; width:18px; height:11px; padding-left:20px;}
    .doth { background:url(images/doth.gif) repeat-x; height:1px; padding:0 0 10px 0;}
    #header { width:873px; height:74px; margin: 0 auto 20px; }
    #logo {  float: left; width:500px; }
    #logo h1{text-indent:-10000px;}
    #logo h1 a{display:block; background: url( no-repeat; height:22px; outline:none;}
    #ads { float: right; width: 468px; height:64px; }
    #navbg { background: url(images/navbg.gif) repeat-x; width: 873px; height:55px; }
    #nav { height: 35px; width: 600px; float:left; }
    #searchbox { float:right;}
    #nav ul {}
    #nav ul li {display:inline; font-family:"Trebuchet MS"; font-size:16px; height:35px; line-height:35px; font-weight:700;}
    #nav ul li.page_item a {text-decoration:none;}
    #nav ul li.page_item a:hover { background:url(images/navbg-acho.gif) repeat-x; color:#fff; }
    #nav ul li.current_page_item a { background:url(images/navbg-acho.gif) repeat-x; color:#fff; }
    #nav ul li a { color:#fff;float:left; font-weight:bold;text-transform:uppercase; padding:0 20px 0 20px;}
    #nav ul li a:hover{text-decoration:none;}
    #nav ul li.rss a { color:#fff; font-weight:bold;text-transform:uppercase; padding:0 20px 0 20px; background:url(images/rss.gif) no-repeat right;}
    #nav ul li.rss a:hover { text-transform:lowercase; text-decoration:none;}
    #content { width: 873px;  }
    .entry { float: left; width: 600px; }
    .entry p { padding-bottom:10px;}
    .entry img {margin:0 10px 10px 10px;}
    html>body .entry ul { padding: 0 0 0 30px; padding-left: 10px; domains-indent: -10px; 	}
    html>body .entry li { margin: 7px 0 8px 10px; }
    .entry ul li:before { content: "0BB 020"; }
    .entry ol { padding: 0 0 0 35px; }
    .entry ol li { }
    #sidebar { float: right; width: 230px; background:url(images/dotv.gif) repeat-y; padding-left:20px; }
    #sidebar h2 { font-size:16px; font-family:"Trebuchet MS"; font-weight:bold; color:#285ab5; margin-bottom:5px; background:url(images/h2.gif) no-repeat 0 2px; padding-left:20px;}
    #sidebar ul{ margin:10px auto 20px;}
    #sidebar ul li{}
    #sidebar ul li ul{}
    #sidebar ul li ul li{display:block; background:url(images/bullet.gif) no-repeat 0 1px; padding-left:20px; padding-bottom:5px; border-bottom:1px dotted #dadada;}
    #sidebar p{padding:0 5px;}
    #calendar #calendar_wrap #wp-calendar { width: 100%; }
    #calendar #calendar_wrap #wp-calendar caption { text-align:left; border-bottom:1px solid #dadada; padding-bottom:5px; }
    #calendar #calendar_wrap #wp-calendar th { text-align:left; color:#006699; font-weight:bold; padding-top:5px; }
    #calendar #calendar_wrap #wp-calendar td{ text-align:left; color:#006699; }
    #footer { background: url(images/footer.png) no-repeat; height: 43px; width: 873px; padding:0 25px 0 25px; font-size:11px; }
    .postmetadata { padding:10px; border:1px solid #e5e6c3; background:#feffe5; margin:20px 0 20px 0;}
    h3#respond,h3#comments {font-size:16px; font-family:"Trebuchet MS"; font-weight:bold; color:#285ab5; padding:20px 0 20px 0;}
    #commentform p { padding-bottom:10px;}
    #commentform #author { border:1px solid #dadada; height:20px; width:200px; }
    #commentform #email { border:1px solid #dadada; height:20px; width:200px; }
    #commentform #url { border:1px solid #dadada; height:20px; width:200px;}
    #commentform #comment { border:1px solid #dadada; height:200px; width:500px;}
    .commentlist cite { background:#f9f9f9; padding:5px 5px 5px 10px; }
    .commentlist cite a { color:#333;}
    .commentlist .ctext { background:url(images/doth.gif) repeat-x bottom; font-size:11px;}
    #searchbox { width: 201px; height: 30px; background: url(images/s.gif); margin:3px 5px 0 0; }
    #searchbox #s { float: left; margin: 6px 0 0 6px; border: 0; width: 159px; background: none; }
    #searchbox #go { float: right; margin: 3px 4px 0 0; width:27px; height:24px;  }
    #main {margin:10px 10px 10px 0; color:#000000;}
    img.centered { display: block; margin-left: auto; margin-right: auto; }
    img.alignright { padding: 4px; margin: 0 0 2px 7px; display: inline; }
    img.alignleft { padding: 4px; margin: 0 7px 2px 0; display: inline; }
    .alignright { float: right; }
    .alignleft { float: left ;}
    /**************** Misc *********************/
    acronym, abbr, span.caps { cursor: help; }
    acronym, abbr { border-bottom: 1px dashed #999; }
    blockquote { margin: 15px 30px 0 30px; padding-left: 20px; border-left: 5px solid #ddd; }
    blockquote cite { margin: 5px 0 0; display: block; }
    .center { text-align: center; }
    hr { display: none; }
    a img { border: none; }
    .alignright{float:right; padding:20px;}
    .alignleft{float:left; padding:20px;}
    img.alignright{display:inline;margin:0 0 2px 7px;padding:4px;}
    img.alignleft{display:inline;margin:0 7px 2px 0;padding:4px;}
    pre {border: solid 1px #9a9a9a;color: blue;margin: 10px;padding:10px;background: #f3f2ed}
    code {font-size:1.0em;color: #000}
    /**************** Gallery *********************/
    .gallery {text-align:center;}
    .gallery img {padding:2px; height:100px; width:100px;}
    .gallery a:hover {background-color:#ffffff;}
    .attachment {text-align:center;}
    .attachment img { padding:2px; border:1px solid #999999;}
    .attachment a:hover {background-color:#FFFFFF;}
    .imgnav {text-align:center;}
    .imgleft {float:left;}
    .imgleft a:hover {background-color:#FFFFFF;}
    .imgleft img{ padding:2px; border:1px solid #999999; height:100px; width:100px;}
    .imgright {float:right;}
    .imgright a:hover {background-color:#FFFFFF;}
    .imgright img{ padding:2px; border:1px solid #999999; height:100px; width:100px;}
    /**************** avatar *********************/
    .gravs {margin-top:20px;}
    .avatar {float:left; margin-right:5px; margin-bottom:5px; padding:3px; border:1px solid #999999;}

    Any idea what I need to fix to make the logo show? Thanks.

Viewing 3 replies - 1 through 3 (of 3 total)
  • esmi


    Forum Moderator

    Please don’t post huge chunks of code here. For larger blocks of code, please consider using the WordPress pastebin. Or simply post a link to your site if it’s a display problem. It makes life easier for everyone. 🙂

    With regard to your logo problem, edit style.css line 30

    #logo h1 a {
    background:transparent url( no-repeat 0 0;

    Change height:22px; to height:34px;.

    Thanks for the help. Its not covered up anymore, but theres still a huge gap between the logo and the menu bar. And on top of that, the menu bar isnt lined up well. Is there any way to close up that gap??


    Find this style.css (line 31)

    #ads {

    add this line between the brackets display:none;

    find this style.css (line 27)
    #header {
    margin:0 auto 20px;
    change height to 34px then vary it until its just as you want it

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘CSS problem….how can I fix this?’ is closed to new replies.