Problem With Smaller Screen Sizes

4 replies [Last post]

Tue, 2008-11-25 15:46

karaoke

Offline

newbie

Last seen: 14 years 26 weeks ago

Joined: 2008-11-25

Posts: 2

Points: 0

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 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;
 
}
 
.new-stuff a:hover {
 
  color: #000000;
 
  text-decoration: underline;
 
}
 
.new-stuff li {
 
  margin: 0px;
 
  padding: 0px;
 
  overflow: hidden;
 
  display: inline;
 
  text-align: left;
 
  width: 100%;
 
}
 
.new-stuff {
 
  padding: 0px;
 
  list-style: none;
 
  list-style-image: none;
 
  list-style-position: none;
 
  list-style-type: none;
 
  margin-top: 5px;
 
}
 
.nocomments, .nocommentsadd {
 
  padding: 10px;
 
  color: #333333;
 
  font-size: 11px;
 
  font-weight: bold;
 
  margin: 10px;
 
}
 
.no-image {
 
  border: 0px;
 
  background-image: none;
 
  padding: 0px;
 
  margin-right: 5px;
 
}
 
.post h1, .post h2, .post h3, .post h4, .post h5, .post 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;
 
}
 
.post img a, .post img a:link, .post img a:visited, .post img a:active {
 
  border: 1px solid #ccc;
 
  padding: 5px;
 
  margin: 5px;
 
}
 
.post img a:hover {
 
  border: 1px solid #333333;
 
  padding: 5px;
 
  margin: 5px;
 
}
 
.POST-INFO {
 
  display: block;
 
  text-align: left;
 
  padding: 0px 0px 5px 0px;
 
}
 
.related-post-image {
 
  float: left;
 
  margin: 0px 10px 0px 0px;
 
  padding: 0px;
 
  width: 35px;
 
  height: 35px;
 
  text-align: center;
 
  vertical-align: middle;
 
  background-image: url(img/no-image-tiny.gif);
 
  background-repeat: no-repeat;
 
  background-color: #FFFFFF;
 
  border: 1px solid #333333;
 
}
 
.related-posts a, .related-posts a:link, .related-posts a:visited, .related-posts a:active, .related-posts a:hover {
 
  background-image: none;
 
 
 
  padding: 0px;
 
  border: 0px;
 
}
 
.related-posts {
 
  padding: 8px;
 
  border-bottom: 1px dashed #96bddc;
 
  margin: 0px;
 
  text-align: justify;
 
 
 
  display: block;
 
  height: 45px;
 
}
 
.right-nav a, .right-nav a:active, .right-nav a:visited, .right-nav a:link {
 
  margin: 0px;
 
  overflow: hidden;
 
  display: block;
 
  text-decoration: none;
 
  padding: 5px 5px 5px 15px;
 
  background-color: #f5f6fb;
 
  border-left: 1px solid #96bddc;
 
  border-right: 1px solid #96bddc;
 
  background-repeat: no-repeat;
 
  background-position: left center;
 
  color: #1f527b;
 
  font-size: 13px;
 
}
 
.right-nav a:hover {
 
  margin: 0px;
 
  overflow: hidden;
 
  display: block;
 
  text-decoration: underline;
 
  padding: 5px 5px 5px 15px;
 
  border-left: 1px solid #cccccc;
 
  border-right: 1px solid #cccccc;
 
  background-repeat: no-repeat;
 
  background-position: left center;
 
  color: #333333;
 
  font-size: 13px;
 
}
 
.right-nav li {
 
  margin: 0px;
 
  padding: 0px;
 
  text-align: left;
 
  background-color: #f5f6fb;
 
}
 
.right-nav ol a, .right-nav ol a:active, .right-nav ol a:visited, .right-nav ol a:link {
 
  font-weight: bold;
 
  text-decoration: none;
 
  padding: 9px;
 
  font-size: 14px;
 
  color: #333333;
 
  background-repeat: no-repeat;
 
  background-position: top;
 
  border-bottom: 1px solid #96bddc;
 
  overflow: hidden;
 
  margin: 0px;
 
  display: block;
 
}
 
.right-nav ol {
 
  font-weight: bold;
 
  text-decoration: none;
 
  padding: 9px;
 
  font-size: 14px;
 
  color: #333333;
 
  background-repeat: no-repeat;
 
  background-position: top;
 
  border-bottom: 1px solid #96bddc;
 
  overflow: hidden;
 
  margin: 0px;
 
  display: block;
 
}
 
.right-nav ul {
 
  width: 100%;
 
  margin: 0px;
 
  padding: 0px;
 
  display: block;
 
  overflow: hidden;
 
  font-family: Verdana, Arial, Helvetica, sans-serif;
 
  font-size: 12px;
 
  color: #333333;
 
}
 
.right-nav {
 
  list-style: none;
 
  list-style-type: none;
 
  margin: 0px;
 
  padding: 0px;
 
  overflow: hidden;
 
}
 
.r-image-home {
 
  border: 1px solid #ccc;
 
  padding: 1px;
 
  float: left;
 
  margin: 0px 5px 5px 0px;
 
}
 
.rss-feed {
 
  line-height: 15px;
 
  display: inline;
 
  border: 0;
 
  padding: 0;
 
  vertical-align: middle;
 
}
 
.sboxbottom p {
 
  margin: 5px 2px 5px 5px;
 
  padding: 0;
 
}
 
.sboxbottom {
 
  width: auto;
 
  border-top: 1px solid #384697;
 
  padding: 4px;
 
}
 
 
 
.sboxcontainer {
 
  width: 180px;
 
  border: 1px solid #384697;
 
  background: white;
 
  font: 7.5pt verdana;
 
}
 
#ilogos a{color:#000000;}
 
#ilogos .sboxcontainer {
 
  width: auto;
 
  border: 1px solid #384697;
 
  background: white;
 
  font: 7.5pt verdana;
 
}
 
.sboxmiddle {
 
  width: auto;
 
  border-bottom: 3px solid white;
 
  height: 15px;
 
  background: #9C95C9;
 
}
 
.sboxtop p {
 
  margin: 7px 0 0 2px;
 
  padding: 0;
 
}
 
.sboxtop {
 
  width: auto;
 
  border-bottom: 1px solid #384697;
 
  padding-top: 2px;
 
  text-align: center;
 
  height: 25px;
 
}
 
.search-top:focus {
 
  padding: 6px 6px 6px 30px;
 
  border: 1px solid #ffffff;
 
  background-color: #FFCC99;
 
  background-image: url(img/search-hov.png);
 
  background-repeat: no-repeat;
 
  background-position: left center;
 
  color: #040404;
 
  font-size: 12px;
 
  font-weight: bold;
 
  width: 250px;
 
}
 
.search-top {
 
  padding: 6px 6px 6px 30px;
 
  border: 1px solid #ffffff;
 
  background-color: #FFFFCC;
 
  background-image: url(img/search.png);
 
  background-repeat: no-repeat;
 
  background-position: left center;
 
  font-size: 12px;
 
  font-weight: bold;
 
  color: #114269;
 
  width: 250px;
 
}
 
.single-INFO {
 
  display: block;
 
  text-align: left;
 
  padding: 0px 0px 8px 0px;
 
  font-size: 14px;
 
  line-height: 28px;
 
  border-bottom: 1px solid #cccccc;
 
}
 
.sub {
 
  float: right;
 
}
 
.theme-change:hover {
 
  border: 1px solid #ffffff;
 
  padding: 1px;
 
  background-color: #114269;
 
}
 
.theme-change {
 
  border: 1px solid #114269;
 
  padding: 1px;
 
  background-color: #ffffff;
 
}
 
.titlebg a, titlebg a:visited, titlebg a:active, titlebg a:link, titlebg a:hover {
 
  color: #FFFFFF;
 
}
 
.titlebg {
 
  font-weight: normal;
 
  text-decoration: none;
 
  padding: 4px 0px 8px 0px;
 
  padding-left:25%;
 
  font-size: 22px;
 
  font-weight: normal;
 
  color: #384697;
 
  overflow: hidden;
 
  margin: 0px;
 
  display: block;
 
  font-family: Georgia, "Times New Roman", Times, serif;
 
}
 
.top-Menu a:hover {
 
  color: #384697;
 
  font-weight: bold;
 
  text-decoration: none;
 
  text-decoration: underline;
 
}
 
.top-Menu a {
 
  text-decoration: none;
 
  display: block;
 
  color: #000000;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  font-size: 12px;
 
 
 
 
 
 
 
  float: left;
 
  font-weight: bold;
 
  padding: 4px 13px 4px 13px;
 
  border-right: 2px solid #9A92C7;
 
}
 
.top-Menu em {
 
  display: none
 
}
 
.top-Menu li {
 
  display: inline;
 
  color: #ffffff;
 
  text-decoration: none;
 
}
 
.top-Menu ul li ul {
 
  display: none;
 
}
 
.top-Menu ul {
 
  list-style: none;
 
  margin: 0px;
 
  padding: 0;
 
}
 
.top-Menu {
 
  padding-left: 174px;
 
  position: relative;
 
  overflow: hidden;
 
  height: 35px;
 
  margin: 0 auto;
 
  width: auto;
 
  top:5px;
 
}
 
.your-email:focus {
 
  display: block;
 
  margin: 5px 0px 13px 0px;
 
  width: 35%;
 
  border: 1px solid #333333;
 
  background-color: #eeeeee;
 
  padding: 6px 6px 6px 25px;
 
  font-size: 11px;
 
  font-weight: bold;
 
  background-position: left center;
 
  background-repeat: no-repeat;
 
}
 
.your-email {
 
  display: block;
 
  margin: 5px 0px 13px 0px;
 
  width: 35%;
 
  border: 1px solid #cccccc;
 
  background-color: #ffffff;
 
  padding: 6px 6px 6px 25px;
 
  font-size: 11px;
 
  font-weight: bold;
 
  background-position: left center;
 
  background-repeat: no-repeat;
 
}
 
.your-message:focus {
 
  display: block;
 
  margin: 5px 0px 13px 0px;
 
  width: 96%;
 
  border: 1px solid #333333;
 
  background-color: #eeeeee;
 
  padding: 6px;
 
  font-size: 12px;
 
  font-weight: normal;
 
}
 
.your-message {
 
  display: block;
 
  margin: 5px 0px 13px 0px;
 
  width: 96%;
 
  border: 1px solid #cccccc;
 
  background-color: #ffffff;
 
  padding: 6px;
 
  font-size: 12px;
 
  font-weight: normal;
 
}
 
.your-name:focus {
 
  display: block;
 
  margin: 5px 0px 13px 0px;
 
  width: 35%;
 
  border: 1px solid #333333;
 
  background-color: #eeeeee;
 
  padding: 6px 6px 6px 25px;
 
  font-size: 11px;
 
  font-weight: bold;
 
  background-position: left center;
 
  background-repeat: no-repeat;
 
}
 
.your-name {
 
  display: block;
 
  margin: 5px 0px 13px 0px;
 
  width: 35%;
 
  border: 1px solid #cccccc;
 
  background-color: #ffffff;
 
  padding: 6px 6px 6px 25px;
 
  font-size: 11px;
 
  font-weight: bold;
 
  background-image: url(img/your-name.gif);
 
  background-position: left center;
 
  background-repeat: no-repeat;
 
}
 
.your-site:focus {
 
  display: block;
 
  margin: 5px 0px 13px 0px;
 
  width: 35%;
 
  border: 1px solid #333333;
 
  background-color: #eeeeee;
 
  color: #0000CC;
 
  padding: 6px 6px 6px 25px;
 
  font-size: 11px;
 
  font-weight: normal;
 
  background-position: left center;
 
  background-repeat: no-repeat;
 
}
 
 
 
.your-site {
 
  display: block;
 
  margin: 5px 0px 13px 0px;
 
  width: 35%;
 
  color: #0000CC;
 
  border: 1px solid #cccccc;
 
  background-color: #ffffff;
 
  padding: 6px 6px 6px 25px;
 
  font-size: 11px;
 
  font-weight: normal;
 
  background-position: left center;
 
  background-repeat: no-repeat;
 
}
 
 
 
a.addcomment:hover {
 
  background-position: 100% -20px;
 
}
 
a.addcomment:link, a.addcomment:visited {
 
  background-position: 100% 0px;
 
}
 
a.addcomment {
 
}
 
a:hover {
 
  text-decoration: underline;
 
}
 
a:visited {
 
  color: #114269;
 
  text-decoration: underline;
 
}
 
a {
 
  color: #9C95C9;
 
  text-decoration: none;
 
}
 
a {
 
  outline: none;
 
  text-decoration: none
 
}
 
blockquote blockquote {
 
  border: 1px solid #ccc;
 
  padding: 5px;
 
  background-color: #fff;
 
}
 
blockquote {
 
  border: 1px solid #ccc;
 
  padding: 5px;
 
  background-color: #eee;
 
}
 
body {
 
  color: #384697;
 
  font-family: verdana, arial, helvetica, sans-serif;
 
  font-size: 75%;
 
  margin: 0px;
 
  padding: 0px;
 
  background: #fff url('http://www.rainbowresearch.net/images/bgrepeat.gif') top center;
 
  text-align: center;
 
}
 
div#container {
 
  text-align: left;
 
  width: 98%;
 
  padding: 0px;
 
  margin: 0 auto;
 
 
 
 
 
 
 
  background-image: none;
 
  background-color: #FFFFFF;
 
}
 
div#content {
 
 
 
  width: 80%;
 
  float: right;
 
  padding-right:15px;
 
  padding-bottom: 5px;
 
  background-color: #FFFFFF;
 
  background-image: none;
 
  margin: 0 auto;
 
}
 
div#header {
 
  width: 100%;
 
  margin: 0 auto;
 
  height: auto;
 
  background-color:#CFC9FC;
 
  background-image:url('http://www.tomdg.net/rr/hbg.png');
 
  background-position:bottom center;
 
  background-repeat:repeat-x;
 
}
 
div#sidebar {
 
  margin: 0px;
 
  padding: 0px;
 
  width:auto;
 
  height:auto;
 
  background-color:#FFFFFF;
 
}
 
div#wrapper {
 
  width: auto%;
 
  overflow: auto;
 
  margin: 0 auto;
 
  padding-left:15px;
 
  background-image: none;
 
}
 
div.pagination a:hover, div.pagination a:active {
 
  border: 1px solid #cccccc;
 
  color: #ffffff;
 
  font-weight: bold;
 
  font-size: 11px;
 
  background-color: #333333;
 
}
 
div.pagination a {
 
  padding: 6px;
 
  margin-right: 2px;
 
  border: 1px solid #ccc;
 
  font-weight: bold;
 
  font-size: 11px;
 
  text-decoration: none;
 
  color: #114269;
 
  background-color: #FFFFFF;
 
}
 
div.pagination span.current {
 
  padding: 6px;
 
  margin-right: 2px;
 
  border: 1px solid #cccccc;
 
  color: #fff;
 
  font-weight: bold;
 
  font-size: 11px;
 
  background-color: #d75b08;
 
}
 
div.pagination span.disabled {
 
  padding: 6px;
 
  margin-right: 2px;
 
  font-weight: bold;
 
  font-size: 11px;
 
  border: 1px solid #f3f3f3;
 
  color: #ccc;
 
}
 
div.pagination {
 
  padding: 10px;
 
  margin: 0px;
 
  text-align: center;
 
  border: 1px solid #ffffff;
 
  background-color: #ffffff;
 
}
 
fieldset {
 
  padding: 8px;
 
  margin: 8px;
 
  border: 1px solid #cccccc;
 
  line-height: 23px;
 
  text-align: justify;
 
}
 
hr {
 
  border: 1px solid #eeeeee;
 
}
 
img.left {
 
  float: left;
 
  margin: 0 10px 10px 0;
 
}
 
img.right {
 
  float: right;
 
  margin: 10px 0 0 10px;
 
}
 
input {
 
  font-family: Verdana, Arial, Helvetica, sans-serif;
 
  padding: 5px;
 
}
 
label {
 
  font-weight: bold;
 
  margin: 0px;
 
  text-align: left;
 
  font-size: 11px;
 
  padding: 0px;
 
}
 
legend {
 
  color: #333333;
 
  padding: 0px 11px 0px 11px;
 
  font-size: 14px;
 
  font-weight: bold;
 
  font-family: Verdana, Arial, Helvetica, sans-serif;
 
  margin: 0px;
 
}
 
ol.commentlist cite {
 
  text-transform: uppercase;
 
  font-style: normal;
 
}
 
ol.commentlist h5 small {
 
  display: block;
 
}
 
ol.commentlist h5 {
 
  font-size: 11px;
 
  margin: 0;
 
  padding: 0;
 
}
 
ol.commentlist li span.moderate {
 
  padding: 2px 0px 2px 20px;
 
  color: #FF3300;
 
}
 
ol.commentlist li.alt {
 
  border: 1px solid #FFCC99;
 
  background-color: #FFFFCC;
 
}
 
ol.commentlist li {
 
  border: 1px solid #96bddc;
 
  background-color: #f5f6fb;
 
}
 
ol.commentlist li {
 
  border-bottom: 1px solid #ccc;
 
  padding: 10px;
 
  margin-top: 10px;
 
  list-style: none;
 
  list-style-image: none;
 
  list-style-position: none;
 
  list-style-type: none;
 
}
 
ol.commentlist {
 
  list-style: none;
 
  margin: 0;
 
  padding: 0;
 
  text-align: justify;
 
}
 
p {
 
  line-height: 22px;
 
}
 
textarea:focus {
 
  border: 1px solid #000000;
 
  background-color: #FFFFCC;
 
  width: 96%;
 
}
 
textarea {
 
  border: 1px solid #dddddd;
 
  background-color: #ffffff;
 
  font-family: Verdana, Arial, Helvetica, sans-serif;
 
  padding: 5px;
 
  width: 96%;
 
}
 
ul, ol{list-style-type: disc;display:block;}
 
 
 
ul.feet{//I liked the name
 
font-size:9pt;width:auto;padding:0px;margin:0px;
 
  }
 
table.flashcont{
 
//  background-image:url('http://www.tomdg.net/rr/flashbg.png');
 
  background-repeat:repeat-x;
 
  }
 
#chromemenu{vertical-alignment:bottom;}
 
h4,h5,h4.toph4, #chromemenu a{
 
color:#384697;}
 
#tests div
 
 
 
{
 
 
 
border-top-width: 1px;
 
 
 
border-right-width-value: 1px;
 
 
 
border-right-width-ltr-source: physical;
 
 
 
border-right-width-rtl-source: physical;
 
 
 
border-bottom-width: 1px;
 
 
 
border-left-width-value: 1px;
 
 
 
border-left-width-ltr-source: physical;
 
 
 
border-left-width-rtl-source: physical;
 
 
 
border-top-style: solid;
 
 
 
border-right-style-value: solid;
 
 
 
border-right-style-ltr-source: physical;
 
 
 
border-right-style-rtl-source: physical;
 
 
 
border-bottom-style: solid;
 
 
 
border-left-style-value: solid;
 
 
 
border-left-style-ltr-source: physical;
 
 
 
border-left-style-rtl-source: physical;
 
 
 
border-top-color: black;
 
 
 
border-right-color-value: black;
 
 
 
border-right-color-ltr-source: physical;
 
 
 
border-right-color-rtl-source: physical;
 
 
 
border-bottom-color: black;
 
 
 
border-left-color-value: black;
 
 
 
border-left-color-ltr-source: physical;
 
 
 
border-left-color-rtl-source: physical;
 
 
 
background-color: #d8dbeb;
 
 
 
background-image: none;
 
 
 
background-repeat: repeat;
 
 
 
background-attachment: scroll;
 
 
 
background-position: 0% 0%;
 
 
 
margin-top: 18px;
 
 
 
margin-right: 18px;
 
 
 
margin-bottom: 18px;
 
 
 
margin-left: 0pt;
 
 
 
padding-top: 5px;
 
 
 
padding-right: 5px;
 
 
 
padding-bottom: 0px;
 
 
 
padding-left: 5px;
 
 
 
width: 90%;
 
 
 
}
 
#tests div .quoter (line 462)
 
 
 
{
 
 
 
background-color: #384697;
 
 
 
background-image: none;
 
 
 
background-repeat: repeat;
 
 
 
background-attachment: scroll;
 
 
 
background-position: 0% 0%;
 
 
 
color: white;
 
 
 
font-weight: bold;
 
 
 
height: 15px;
 
 
 
padding-top: 2px;
 
 
 
padding-right: 2px;
 
 
 
padding-bottom: 2px;
 
 
 
padding-left: 2px;
 
 
 
margin-top: 5px;
 
 
 
margin-right: -5px;
 
 
 
margin-bottom: 0px;
 
 
 
margin-left: -5px;
 
 
 
}
 
#tests div p
 
 
 
{
 
 
 
background-color: #384697;
 
 
 
background-image: none;
 
 
 
background-repeat: repeat;
 
 
 
background-attachment: scroll;
 
 
 
background-position: 0% 0%;
 
 
 
color: white;
 
 
 
font-weight: bold;
 
 
 
height: 15px;
 
 
 
padding-top: 2px;
 
 
 
padding-right: 2px;
 
 
 
padding-bottom: 2px;
 
 
 
padding-left: 2px;
 
 
 
margin-top: 5px;
 
 
 
margin-right: -5px;
 
 
 
margin-bottom: 0px;
 
 
 
margin-left: -5px;
 
 
 
}

I'd greatly appreciate any help. Thanks

Tags:

Styling CMS and Social Sites

Tue, 2008-11-25 16:20

CupidsToejam

Offline

Guru

Florida

Last seen: 7 years 37 weeks ago

Florida

Timezone: GMT-4

Joined: 2008-08-15

Posts: 2637

Points: 1556

Drop the line, and yell what she says.

Can you drop a link to your live test site so we can "SEE" whats going on?

Tue, 2008-11-25 17:50

karaoke

Offline

newbie

Last seen: 14 years 26 weeks ago

Joined: 2008-11-25

Posts: 2

Points: 0

Many thanks for your reply.

Many thanks for your reply. This is the URL of my site : http://rainbowresearch.net/index.php . As I said everything look fine with 1280*800 . Please do testing in lower resolutions. Thank you very much :rolleyes:

Tue, 2008-11-25 18:02

Ed Seedhouse

Offline

Guru

Victoria British Columbia

Last seen: 2 years 14 weeks ago

Victoria British Columbia

Timezone: GMT-8

Joined: 2005-12-14

Posts: 3570

Points: 675

It doesn't look "fine" even

It doesn't look "fine" even at 1024 x 768 on my browser, because I use larger than normal fonts, having weakish eyes.

You have 73 html syntax errors and 69 CSS errors! It's a miracle anything shows at all. Get your code fixed up for a start.

What you have there is a basically broken design which is going to need a lot of fixing up, possible a ground up rebuild. Sorry to be the bearer of bad news. You are following several bad practices including setting your font sizes in pixels.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Tue, 2008-11-25 19:46

CupidsToejam

Offline

Guru

Florida

Last seen: 7 years 37 weeks ago

Florida

Timezone: GMT-4

Joined: 2008-08-15

Posts: 2637

Points: 1556

OMFG !!

Dude, you really should get a book or something, this code is pretty bad. For example...

Why do you have 2 titles for?

<title>Market Research Company | Market Research Agency | Qualitative Market Research</title>
<meta name="generator" content="WordPress 2.6.3" /> <!-- leave this for stats -->
<TITLE>Market Research Company | Market Research Agency | Qualitative Market Research</TITLE>

You have two of these also..

<meta name="keywords

What in the hell is this supposed to do?

<ol>&nbsp;</ol>

This needs to be closed

#nav ul#nav2 li a
{

Problem With Smaller Screen Sizes

Drop the line, and yell what she says.

Many thanks for your reply.

It doesn't look "fine" even

OMFG !!

User login

Navigation