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
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.