Problem With Smaller Screen Sizes

Discussion in 'CSS' started by karaoke_ir, Nov 25, 2008.

  1. #1
    Hello everybody,

    I'm having display issues with one of my Wordpress websites. On older monitors with smaller screens or lower resolutions such as 1024*768, the website isn't viewed right and all contents expect the sidebar show way down the page, however I don't have this problem with 1280*800 resolution. I couldn't figure out what goes wrong with my css.

    Here's a part of the code :

    #nav ul {
    
    margin: 0;
    
    padding: 0;
    
    list-style: none;
    
    z-index:99999;
    
    width:223px;
    
    }
    
    ul#nav2 {
    
    position: absolute;
    
    left: 198px; /* Set 1px less than menu width */
    
    display: none;
    
    top:133px;
    
    z-index:99999;
    
    }
    
    ul#nav4 {
    
    position: absolute;
    
    left: 198px; /* Set 1px less than menu width */
    
    display: none;
    
    z-index:99999;
    
    top:233px;
    
    }
    
    #nav ul#nav2 li a
    
    {
    
    background-color: #cfcece;
    
    padding-left: 5px;
    
    margin: 0;
    
    color: #000000;
    
    display: block;
    
    border-top: 1px solid #FFFFFF;
    
    }
    
    #nav ul#nav2 li a:hover
    
    {
    
    background-color: #e5e5e5;
    
    padding-left: 5px;
    
    margin: 0;
    
    color: #9A92C7;
    
    display: block;
    
    border-top: 1px solid #FFF;
    
    }
    
    #nav ul#nav2
    
    {
    
    margin: 0;
    
    border-right: 1px solid #384697;
    
    }
    
    #nav ul#nav4 li a
    
    {
    
    background-color: #cfcece;
    
    padding-left: 5px;
    
    margin: 0;
    
    color: #000000;
    
    display: block;
    
    border-top: 1px solid #FFF;
    
    }
    
    #nav ul#nav4 li a:hover
    
    {
    
    background-color: #e5e5e5;
    
    padding-left: 5px;
    
    margin: 0;
    
    color: #9A92C7;
    
    display: block;
    
    border-top: 1px solid #FFF;
    
    }
    
    #nav ul#nav4
    
    {
    
    margin: 0;
    
    border-right: 1px solid #384697;
    
    }
    
    ul#nav6 {
    
    position: absolute;
    
    left: 198px; /* Set 1px less than menu width */
    
    display: none;
    
    top:193px;
    
    z-index:99999;
    
    }
    
    #nav ul#nav6 li a
    
    {
    
    background-color: #cfcece;
    
    padding-left: 5px;
    
    margin: 0;
    
    color: #000000;
    
    display: block;
    
    border-top: 1px solid #FFF;
    
    }
    
    #nav ul#nav6 li a:hover
    
    {
    
    background-color: #e5e5e5;
    
    padding-left: 5px;
    
    margin: 0;
    
    color: #9A92C7;
    
    display: block;
    
    border-top: 1px solid #FFF;
    
    }
    
    #nav ul#nav6
    
    {
    
    margin: 0;
    
    border-right: 1px solid #384697;
    
    }
    
    /* Holly Hack. IE Requirement \*/
    
    * html #nav ul li { float: left; height: 1%; }
    
    * html #nav ul li a { height: 1%; }
    
    /* End */
    
    #nav li:hover ul, #nav li.over ul {display:block;width:223px;z-index:999999;} /* The magic */
    
    #nav1 a span {
    
    visibility: hidden;
    
    }
    
    #nav-menu a, #nav-menu a:link, #nav-menu a:visited, #nav-menu a:active {
    
    background-image: none;
    
    border: 0px;
    
    padding: 0px 5px 0px 5px;
    
    background: 0px;
    
    }
    
    #nav-menu a:hover {
    
    background-image: none;
    
    padding: 0px 5px 0px 5px;
    
    }
    
    #nav-menu {
    
    text-align: right;
    
    margin: 0px;
    
    float: right;
    
    margin: 12px 4px 0px 0px;
    
    border: 0px;
    
    }
    
    #next a:hover, #next a:active {
    
    text-align: center;
    
    color: #333333;
    
    text-decoration: none;
    
    font-weight: bold;
    
    font-size: 11px;
    
    float: right;
    
    padding: 5px;
    
    background-color: #e5e5e5;
    
    border: 0px;
    
    }
    
    #next a:link, #next a:visited {
    
    text-align: center;
    
    color: #333333;
    
    text-decoration: none;
    
    font-weight: bold;
    
    font-size: 11px;
    
    float: right;
    
    padding: 5px;
    
    border: 0px;
    
    }
    
    #prev a:hover, #prev a:active {
    
    text-align: left;
    
    color: #333333;
    
    text-decoration: none;
    
    font-weight: bold;
    
    font-size: 11px;
    
    float: left;
    
    padding: 5px;
    
    background-image: none;
    
    border: 0px;
    
    }
    
    #prev a:link, #prev a:visited {
    
    text-align: left;
    
    color: #333333;
    
    text-decoration: none;
    
    font-weight: bold;
    
    font-size: 11px;
    
    float: left;
    
    padding: 5px;
    
    background-image: none;
    
    border: 0px;
    
    }
    
    #wp-calendar a:hover, #wp-calendar a:active {
    
    text-decoration: none;
    
    color: #333333;
    
    background-image: none;
    
    padding: 0px;
    
    font-size: 11px;
    
    }
    
    #wp-calendar a:link, #wp-calendar a:visited {
    
    text-decoration: none;
    
    color: #333333;
    
    background-image: none;
    
    padding: 0px;
    
    font-size: 11px;
    
    }
    
    #wp-calendar caption {
    
    text-align: left;
    
    width: 170px;
    
    background-color: #eeeeee;
    
    border-bottom: 1px solid #fff;
    
    margin: 0px;
    
    padding: 7px;
    
    color: #333333;
    
    font-size: 14px;
    
    font-weight: bold;
    
    }
    
    #wp-calendar td:hover {
    
    margin: 0px;
    
    color: #333333;
    
    padding: 0px;
    
    font-size: 11px;
    
    text-align: center;
    
    background-image: none;
    
    }
    
    #wp-calendar td {
    
    margin: 0px;
    
    color: #333333;
    
    font-size: 11px;
    
    padding: 0px;
    
    text-align: center;
    
    background-image: none;
    
    }
    
    #wp-calendar tf {
    
    margin: 0px;
    
    font-size: 11px;
    
    color: #333333;
    
    padding: 0px;
    
    background-image: none;
    
    }
    
    #wp-calendar th {
    
    margin: 0px;
    
    padding: 0px;
    
    text-align: center;
    
    color: #333333;
    
    font-size: 11px;
    
    }
    
    #wp-calendar {
    
    empty-cells: show;
    
    width: 170px;
    
    font-size: 11px;
    
    color: #333333;
    
    text-decoration: none;
    
    text-align: center;
    
    float: left;
    
    padding: 5px;
    
    margin: 0px;
    
    font-weight: normal;
    
    background-image: none;
    
    padding: 0px;
    
    background-color: #e5e5e5;
    
    }
    
    .addcomment, .closecomment {
    
    float: right;
    
    text-transform: uppercase;
    
    padding: 3px 18px 3px 0px;
    
    font-size: 10px;
    
    margin: 12px 0 0 0;
    
    text-decoration: underline;
    
    }
    
    .add-pic {
    
    border: 1px solid #eeeeee;
    
    background-color: #f7f7f7;
    
    margin: 5px 0px 12px 0px;
    
    padding: 6px;
    
    font-size: 12px;
    
    line-height: 25px;
    
    width: 96%;
    
    }
    
    .author-name {
    
    font-size: 14px;
    
    color: #114269;
    
    font-weight: bold;
    
    }
    
    .back-to-top {
    
    margin: 0px 0px 0px 0px;
    
    padding: 0px;
    
    }
    
    .bread a:hover {
    
    font-size: 11px;
    
    color: #114269;
    
    font-weight: bold;
    
    text-decoration: underline;
    
    }
    
    .bread{color:#384697;font-weight:bold;}
    
    .bread a:link, .bread a:active, .bread a:visited {
    
    font-size: 11px;
    
    color: #114269;
    
    font-weight: bold;
    
    text-decoration: none;
    
    }
    
    .button {
    
    font-size: 11px;
    
    font-weight: bold;
    
    padding: 6px;
    
    background-image: none;
    
    background-color: #114269;
    
    border: 1px solid #ffffff;
    
    display: block;
    
    color: #FFFFFF;
    
    text-align: right;
    
    }
    
    .cat-image a, .cat-image a:link, .cat-image a:visited, .cat-image a:active, .cat-image a:hover {
    
    padding: 0px;
    
    background-color: #FFFFFF;
    
    }
    
    .cat-image {
    
    float: left;
    
    margin: 7px 10px 0px 0px;
    
    padding: 0px;
    
    width: 150px;
    
    height: 150px;
    
    text-align: center;
    
    vertical-align: middle;
    
    background-image: url(img/no-image.jpg);
    
    background-repeat: no-repeat;
    
    background-color: #FFFFFF;
    
    border: 1px solid #333333;
    
    }
    
    .cell-h {
    
    text-align: justify;
    
    // background-image: url(img/cat-box-rep.png);
    
    background-repeat: repeat-x;
    
    background-position: top;
    
    text-align: justify;
    
    }
    
    .cell-t {
    
    // background-image: url(img/c-head.jpg);
    
    border-bottom: 1px solid #cccccc;
    
    background-repeat: repeat-x;
    
    background-position: center;
    
    font-size: 14px;
    
    font-weight: bold;
    
    padding: 10px;
    
    color: #333333;
    
    }
    
    .clear {
    
    clear: both;
    
    height: 20px;
    
    }
    
    .clickbg, clickbg a, clickbg a:visited, clickbg a:active, clickbg a:link {
    
    padding: 4px;
    
    font-family: verdana, Arial, sans-serif;
    
    font-size: 11px;
    
    color: #333333;
    
    border: 1px solid #e1e1e1;
    
    background-color: #f7f7f7;
    
    }
    
    .comment-box-field:FOCUS {
    
    width: 200px;
    
    border: 1px solid #000000;
    
    background-color: #FFFFCC;
    
    font-family: Verdana, Arial, Helvetica, sans-serif;
    
    padding: 5px;
    
    font-size: 12px;
    
    margin-bottom: 8px;
    
    }
    
    .comment-box-field {
    
    width: 200px;
    
    border: 1px solid #dddddd;
    
    background-color: #ffffff;
    
    font-family: Verdana, Arial, Helvetica, sans-serif;
    
    padding: 5px;
    
    font-size: 12px;
    
    margin-bottom: 8px;
    
    }
    
    .comment-box-submit {
    
    float: right;
    
    font-weight: bold;
    
    font-family: Verdana, Arial, Helvetica, sans-serif;
    
    font-size: 12px;
    
    padding: 5px;
    
    color: #000000;
    
    }
    
    .comment-box-text:FOCUS {
    
    width: 500px;
    
    border: 1px solid #000000;
    
    background-color: #FFFFCC;
    
    font-family: Verdana, Arial, Helvetica, sans-serif;
    
    padding: 5px;
    
    font-size: 12px;
    
    margin-bottom: 8px;
    
    }
    
    .comment-box-text {
    
    width: 500px;
    
    border: 1px solid #dddddd;
    
    background-color: #ffffff;
    
    font-family: Verdana, Arial, Helvetica, sans-serif;
    
    padding: 5px;
    
    font-size: 12px;
    
    margin-bottom: 8px;
    
    }
    
    .continue-reading a, .continue-reading a:link, .continue-reading:visited, .continue-reading a:active {
    
    text-align: right;
    
    font-size: 11px;
    
    display: block;
    
    padding: 5px 0px 5px 0px;
    
    }
    
    .continue-reading a:hover {
    
    text-align: right;
    
    font-size: 11px;
    
    color: #000000;
    
    display: block;
    
    padding: 5px 0px 5px 0px;
    
    }
    
    .c-txt {
    
    padding: 2px 10px 2px 10px;
    
    margin-top: 15px;
    
    text-align: justify;
    
    background-color: #FFFFFF;
    
    border-top: 1px solid #b2b1b1;
    
    border-left: 1px solid #b2b1b1;
    
    border-right: 1px solid #e1e1e1;
    
    border-bottom: 1px solid #e1e1e1;
    
    }
    
    .display-inline {
    
    display: block;
    
    text-align: center;
    
    margin: 7px 0px 7px 0px;
    
    }
    
    .drop input {
    
    padding: 2px;
    
    margin: 0px;
    
    font-weight: bold;
    
    font-size: 11px;
    
    font-family: Verdana, Arial, Helvetica, sans-serif;
    
    }
    
    .drop select {
    
    border: 1px solid #cccccc;
    
    padding: 1px;
    
    }
    
    .drop {
    
    float: right;
    
    font-size: 12px;
    
    font-weight: bold;
    
    margin: 0px;
    
    padding: 0px;
    
    }
    
    .entry h1, .entry h2, .entry h3, .entry h4, .entry h5, .entry h6 {
    
    font-weight: normal;
    
    text-decoration: none;
    
    padding: 8px 0px 8px 0px;
    
    font-size: 22px;
    
    font-weight: normal;
    
    color: #384697;
    
    overflow: hidden;
    
    margin: 0px;
    
    display: block;
    
    font-family: Georgia, "Times New Roman", Times, serif;
    
    border-bottom: 1px solid #cccccc;
    
    }
    
    .entry img a, .entry img a:link, .entry img a:visited, .entry img a:active {
    
    border: 1px solid #ccc;
    
    padding: 5px;
    
    margin: 5px;
    
    }
    
    .entry img a:hover {
    
    border: 1px solid #333333;
    
    padding: 5px;
    
    margin: 5px;
    
    }
    
    .entry img {
    
    border: 1px solid #ccc;
    
    padding: 5px;
    
    margin: 5px;
    
    }
    
    .entry {
    
    }
    
    .Featured-image {
    
    float: none;
    
    margin: 7px 0px 7px 0px;
    
    padding: 0px;
    
    width: auto;
    
    height: 150px;
    
    text-align: center;
    
    vertical-align: middle;
    
    }
    
    .Featured-image img{border: 1px solid #333333;}
    
    .fieldset-box {
    
    border-bottom: 1px solid #cccccc;
    
    margin-top: 7px;
    
    padding: 0px 0px 10px 0px;
    
    text-align: justify;
    
    }
    
    .float-none {
    
    float: none;
    
    margin: 0;
    
    border: 0;
    
    padding: 0;
    
    display: inline;
    
    line-height: 15px;
    
    text-align: left;
    
    vertical-align: middle;
    
    }
    
    .foot {
    
    background-color: #9C95C9;
    
    height:auto;
    
    }
    
    .footer-bg {
    
    background-color: #9C95C9;
    
    margin: 0 auto;
    
    color: #FFFFFF;
    
    }
    
    .foot-logo {
    
    background-repeat: no-repeat;
    
    background-position: left top;
    
    }
    
    .form-l {
    
    color: #990000;
    
    display: inline;
    
    width: 270px;
    
    float: right;
    
    text-align: left;
    
    margin: 0px;
    
    padding: 0px;
    
    }
    
    .home-cats-100 {
    
    float: left;
    
    margin: 7px 10px 0px 0px;
    
    padding: 0px;
    
    width: 100px;
    
    height: 100px;
    
    text-align: center;
    
    vertical-align: middle;
    
    // background-image: url(img/no-image-small.gif);
    
    // background-repeat: no-repeat;
    
    background-color: #FFFFFF;
    
    border: 1px solid #333333;
    
    }
    
    .home-cats-60 {
    
    float: left;
    
    margin: 7px 10px 0px 0px;
    
    padding: 0px;
    
    width: 60px;
    
    height: 60px;
    
    text-align: center;
    
    vertical-align: middle;
    
    background-image: url(img/no-image-small.gif);
    
    background-repeat: no-repeat;
    
    background-color: #FFFFFF;
    
    border: 1px solid #333333;
    
    }
    
    .home-cats-80 {
    
    float: left;
    
    margin: 0px 10px 0px 0px;
    
    padding: 0px;
    
    width: 80px;
    
    height: 80px;
    
    text-align: center;
    
    vertical-align: middle;
    
    // background-image: url(img/no-image-small.gif);
    
    // background-repeat: no-repeat;
    
    background-color: #FFFFFF;
    
    border: 1px solid #333333;
    
    }
    
    .home-titles {
    
    font-size: 14px;
    
    text-transform: uppercase;
    
    font-family: Geneva, Arial, Helvetica, sans-serif;
    
    color: #333333;
    
    }
    
    .left-nav li a, .left-nav li a:active, .left-nav li a:visited, .left-nav li a:link {
    
    margin: 0px;
    
    overflow: hidden;
    
    display: block;
    
    text-decoration: none;
    
    padding: 3px 3px 3px 8px;
    
    background-color: #e5e5e5;
    
    border-top: 1px solid #ffffff;
    
    background-position: left;
    
    color: #333333;
    
    font-size: 11px;
    
    }
    
    .left-nav li a:hover {
    
    margin: 0px;
    
    display: block;
    
    text-decoration: underline;
    
    padding: 3px 3px 3px 8px;
    
    background-color: #cfcece;
    
    border-top: 1px solid #ffffff;
    
    color: #9A92C7;
    
    overflow: hidden;
    
    font-size: 11px;
    
    }
    
    .left-nav li {
    
    margin: 0px;
    
    padding: 0px;
    
    overflow: hidden;
    
    display: inline;
    
    text-align: left;
    
    width: 100%;
    
    }
    
    .left-nav ol a, .left-nav ol a:active, .left-nav ol a:visited, .left-nav ol a:link {
    
    font-weight: bold;
    
    background-image: url('http://www.tomdg.net/rr/navtop.png');
    
    background-repeat: repeat-x;
    
    background-position: top;
    
    text-decoration: none;
    
    padding: 7px;
    
    font-size: 12px;
    
    color: #ffffff;
    
    background-color: #e5e5e5;
    
    overflow: hidden;
    
    margin: 0px;
    
    display: block;
    
    }
    
    .left-nav ol {
    
    font-weight: bold;
    
    background-image: url('http://www.tomdg.net/rr/navtop.png');
    
    background-repeat: repeat-x;
    
    background-position: top;
    
    text-decoration: none;
    
    padding: 7px;
    
    font-size: 12px;
    
    color: #ffffff;
    
    background-color: #e5e5e5;
    
    overflow: hidden;
    
    margin: 0px;
    
    display: block;
    
    }
    
    .left-nav ul {
    
    width: 100%;
    
    margin: 0px;
    
    padding: 0px;
    
    display: block;
    
    overflow: hidden;
    
    font-family: Verdana, Arial, Helvetica, sans-serif;
    
    font-size: 12px;
    
    color: #333333;
    
    }
    
    .left-nav {
    
    width: 170px;
    
    float: left;
    
    list-style: none;
    
    list-style-type: none;
    
    margin: 0px 10px 0px 0px;
    
    padding: 1px;
    
    overflow: hidden;
    
    }
    
    .legend-box a, .legend-box a:active, .legend-box a:visited, .legend-box a:link {
    
    display: block;
    
    padding: 0px 0px 8px 0px;
    
    text-decoration: none;
    
    }
    
    .legend-box {
    
    font-size: 18px;
    
    font-weight: bold;
    
    font-family: Geneva, Arial, Helvetica, sans-serif;
    
    }
    
    .legend-single {
    
    padding: 3px 10px 3px 10px;
    
    color: #333333;
    
    }
    
    .main-logo {
    
    // background-image: url(img/logo.gif);
    
    // background-repeat: no-repeat;
    
    // background-position: left top;
    
    }
    
    .med:focus {
    
    border: 1px solid #333333;
    
    }
    
    .med {
    
    border: 1px solid #cccccc;
    
    }
    
    .more-link, .more-link a, .more-link a:active, .more-link a:visited, .more-link a:visited {
    
    text-align: right;
    
    padding-right: 15px;
    
    font-size: 14px;
    
    font-weight: bold;
    
    font-family: Verdana, Arial, Helvetica, sans-serif;
    
    display: block;
    
    }
    
    .nav-foot a:hover {
    
    text-decoration: underline;
    
    }
    
    .nav-foot a:visited {
    
    color:#3366AA;
    
    text-decoration: none;
    
    }
    
    .nav-foot a {
    
    padding: 0px 10px 0px 10px;
    
    display: inline;
    
    text-align: center;
    
    color: #3366AA;
    
    font-weight: bold;
    
    text-decoration: none;
    
    background-color: #9C95C9;
    
    border: 1px solid #9C95C9;
    
    margin: 0px 2px;
    
    }
    
    .nav-foot em {
    
    display: none
    
    }
    
    .nav-foot li {
    
    display: inline;
    
    font-size: 11px;
    
    color: #5c5c5c;
    
    text-align: center;
    
    text-decoration: none;
    
    padding: 5px;
    
    margin:2px;
    
    }
    
    .nav-foot ul li ul {
    
    display: none;
    
    }
    
    .nav-foot ul {
    
    display:block;
    
    text-align:center;
    
    list-style: none;
    
    margin: 0px;
    
    padding: 0;
    
    }
    
    .nav-foot {
    
    margin: 10px 0px 0px 0px;
    
    background-color: #9C95C9;
    
    text-align: right;
    
    width:auto;
    
    }
    
    .new-stuff a, .new-stuff a:link, .new-stuff a:visited, .new-stuff a:active {
    
    margin: 0px;
    
    display: block;
    
    padding: 3px 3px 3px 15px;
    
    text-decoration: none;
    
    color: #114269;
    
    font-size: 12px;
    
    font-weight: normal;
    
    background-image: url(img/nav-bullet.gif);
    
    background-repeat: no-repeat;
    
    background-position: left;
    
    } 
    Code (markup):
    I'd greatly appreciate any help. Thanks
     
    karaoke_ir, Nov 25, 2008 IP
  2. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #2
    First off, your Web site should be able to display properly all the way down to 750px (so that you don't have to worry about needing a special printer stylesheet for A4 or "US Letter" sized paper - 8 1/2 x 11 inches).

    Second, I'm going to have to see the Web site this Theme is hosted on so I can see what's going on and what needs to be cut out/changed.
     
    Dan Schulz, Nov 26, 2008 IP