1. This website uses cookies. By continuing to use this website you are giving consent to cookies being used.
    For information on cookies and how you can disable them visit our Cookie Usage page.
    Dismiss Notice

CSS CSS Extremely Wierd Problem

Discussion in 'Web Development' started by TemplateUser, Jul 16, 2007.

  1. TemplateUser

    TemplateUser New Member

    I keep loading in my new css after DELETING the whole old one and it won't let me use the new one and for some reason it keep becoming the old even though I'm using the new one's code please help me.

    The CSS new is:
    HTML:
    html, body, ul, li, h1, h2, h3, h4 {
     margin: 0;
     padding: 0;
     list-style: none;
    }
    h1 img {
     display: block;
    }
    img {
     border: 0;
    }
    a {
     color: #333;
     font-weight: bold;
     text-decoration: none;
    }
    a:hover {
     color: #f00;
    }
    .left {
     float: left;
    }
    .right {
     float: right;
    }
    .more {
     text-align: right;
    }
    .clear {
     clear: both;
    }
    body {
     text-align: center;
     font: 12px arial, sans-serif;
     background: #eee;
    }
    #outer {
     background: top center url(images/header_bg.jpg) repeat-x;
    }
    #wrapper {
     text-align: left;
     margin: auto;
     width: 756px;
    }
    #header {
     background: top left url(images/logo.gif) no-repeat;
     height: 78px;
    }
    #header h1 {
     color: #FD2E00;
     font-weight: normal;
     font-size: 22px;
     padding: 20px 0 0 70px;
     margin: 0;
    }
    #header p {
     color: #333333;
     padding: 0 0 10px 70px;
     margin: 0;
    }
    #nav {
     background: url(images/header_c_bg.gif) repeat-x;
     position: relative;
     height: 370px;
    }
    #nav a {
     color: #E7E4E4;
     text-decoration: none;
    }
    #nav a:hover {
     color: #fff;
     text-decoration: none;
    }
    #nav ul {
     padding: 70px 0 0 382px;
     margin: 0;
     position: relative;
     z-index: 1;
    }
    #nav li {
     background: left center url(images/bullet.gif) no-repeat;
     padding: 10px 0 8px 30px;
     margin: 0;
    }
    #nav li#m1 { margin-left: 19px; }
    #nav li#m2 { margin-left: 11px; }
    #nav li#m3 { margin-left: 3px; }
    #nav li#m4 { margin-left: 0px;  }
    #nav li#m5 { margin-left: 2px; }
    #nav li#m6 { margin-left: 8px; }
    #nav a {
     font-weight: normal;
    }
    #search {
     margin: 23px 0 0 400px;
    }
    #search h2 {
     font-weight: normal;
    }
    #search form {
     margin: 0;
     padding: 0 0 10px 0;
    }
    #search input.text {
     border: 1px solid #333;
     background: #E7E4E4;
    }
    #search input.submit {
     border: none;
     background: #E7E4E4;
    }
    #search a {
     color: #333;
     padding: 0 5px;
    }
    #search a:hover {
     color: #300;
    }
    #head {
     background: url(images/header.jpg) no-repeat;
     position: absolute;
     top: 0;
     left: 0;
     width: 382px;
     height: 370px;
    }
    #head-pip {
     background: url(images/header_pip.jpg) no-repeat;
     position: absolute;
     top: 0;
     left: 382px;
     width: 48px;
     height: 94px;   
    }
    #body {
     background: top left #EEEEEE url(images/body_bg.gif) repeat-y;
     position: relative;
     left: -10px;
     width: 775px;
    }
    #body-inner {
     padding: 28px 23px 28px 31px;
    }
    #body-left {
     float: left;
     width: 281px;
    }
    #body-right {
     float: right;
     width: 384px;
    }
    #topic-pic {
     background: #666;
     padding: 10px;
    }
    #body-left h2 {
     background: #f00;
     font-size: 12px;
     color: #fff;
     padding: 6px 23px;
     margin: 6px 0 60px 0;
    }
    #body-left ul {
     margin: 30px 55px;
    }
    #body-left li {
     margin: 5px;
    }
    #body-right .box {
     padding: 15px;
     background: #fff;
     border: 1px solid #999;
     margin: 3em 0;
    }
    #body-right h2 {
     font: 18px "arial narrow", arial, sans-serif;
    }
    #body-right .box p {
     margin: 0 0 1em 0;
    }
    #body-right .box .left {
     margin-right: 15px;
     border: 1px solid #999;
    }
    #body-right .box .btns {
     text-align: right;
     padding-top: 10px;
     position: relative;
    }
    .btns a {
     background: left #CC0000 url(images/btn.gif) repeat-y;
     border: 2px solid #E68282;
     border-color: #E68282 #650000 #650000 #9C2828;
     color: #fff;
     font-weight: normal;
     padding: 3px 15px 3px 20px;
     position: relative;
    }
    .btns a:hover {
     background-color: #EF1818;
     color: #fff;
    }
    #copyright {
     background: top left url(images/footer_bg.gif) repeat-x;
     float: right;
     width: 425px;
     clear: both;
     margin-right: 9px;
     padding-bottom: 30px;
     _margin-right: 5px;
    }
    #copyright-left {
     background: top left url(images/footer_left.gif) no-repeat;
     padding: 27px 30px;
     font-size: 11px;
     text-align: center;
    }
    
    The Old CSS:

    HTML:
    * {
     margin: 0px;
     padding: 0px;
    }
    body {
     padding-top: 0px;
     background-color: #01111d;
     color: #FFF;
     font-family: verdana, arial, sans-serif;
     
     text-align: left;
     letter-spacing: 1px;
    }
    a {color: #FFF;font-size: 14px;}
    a:hover {color: #01a9c0;}
    .more{float: left;}
    .clear{clear:both;}
    p{ margin: 20px 0px 20px 0px;line-height: 16px;font-size: 14px;}
    #container {
     margin: 0px auto;
     width:873px;
    }
    #menu {
     background-image:url(images/menu.gif);
     width:862px;
     height:90px;
     position:relative;
    }
    #menu li{
     position:absolute;
     top:50px;
     
     list-style-type: none;
    }
    #m01 {left:160px;}
    #m02 {left:305px;}
    #m03 {left:450px;}
    #m04 {left:590px;}
    #m05 {left:730px;}
    #menu a{
     font-family: verdana, arial, sans-serif;
     font-size: 12px;
     font-weight:bolder;
     color:#FFFFFF;
     text-decoration:none;
     text-transform: uppercase;
    }
    #menu a:hover {color: #01a9c0;}
    #header {
     background-image:url(images/header.gif);
     background-repeat:repeat-y;
     width:873px;
    }
    #logo {
     width:240px;
     height:46px;
     margin: 0px 0px 0px 80px;
     float:left;
     display:inline;
    }
    #dj {
     background-image:url(images/dj.jpg);
     width:498px;
     height:405px;
     float:right;
     margin-right:40px;
     display:inline;
    }
    #welcome {
     width:210px;
     margin: 50px 0px 0px 100px;
     float:left;
     display:inline;
    }
    #welcome h2{
     margin: 0px 0px 20px 0px;
    }
    #welcome p{
     width:200px;
    }
    #welcome img{
     border: solid 3px #FFFFFF;
    }
    #middle {
     background-image:url(images/middle.gif);
     width:873px;
     height:21px;
    }
    #middle2 {
     background-image:url(images/middle2.gif);
     width:873px;
     height:22px;
    }
    #content {
     background-image:url(images/content.gif);
     width:873px;
    }
    #left {
     float:left;
     width:435px;
     margin: 0px 0px 0px 85px;
     display:inline;
    }
    #right {
     float:right;
     width:258px;
     height:auto;
     margin: 0px 62px 20px 0px;
     display:inline;
    }
    #right a img{
     margin: 8px 8px 8px 0px;
     border: none 0px #FFFFFF;
    }
    #footer {
     background-image:url(images/footer.gif);
     background-repeat:no-repeat;
     width:873px;
    }
    #footer p{
     height:58px;
     width:873px;
     text-align:center;
     margin: 0px 0px 0px 0px;
     padding: 30px 0px 0px 0px;
     font-size:11px;
    }
    #footer a{
     font-size:11px;
    }
    
     
  2. Scoooooty

    Scoooooty Member

    you cant just use just any css file.. it has to be setup for the template your using.

    The template is calling the style "left" from the old css but the new css file does not have the style "left"
     
  3. TemplateUser

    TemplateUser New Member

    So how do I fix it?
     
  4. TemplateUser

    TemplateUser New Member

    Actually I just fixed it thanks anyway!