Forum Moderators: not2easy
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.example.com/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.example.com/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;
}
I'd greatly appreciate any help. Thanks
[edited by: swa66 at 4:43 pm (utc) on Nov. 25, 2008]
[edit reason] double line spacing + URLs, please use example.com instead, see forum charter [/edit]
Without actually reading all that code (for the future: please do try to post a text case that is minimal in size and exhibits the problem you have, see the pinned post [webmasterworld.com] in the forum for how to do that): if you specify width in pixels and float elements, they'll move one under the other when there isn't enough space to put them next to one another. Try figuring out what element is the parent (should be easy enough in the generated html) and give it a min-width wide enough to hold them (and their padding, borders and margins they might have (or not have).
Since IE6 doesn't do min-width: you'll need a conditional comment and some expression to replace it instead if you want the same behavior there as well.
