SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy Unwanted horizontal scroller

    hi all!
    i created this page using php html and css and found that there is a scroller at the bottom of my explorer window which isnt needed or indeed wanted.

    can someone tell me what i have done to have the explorer thinking there is more content on the right of the page.

    thank you for any help received

    view here :

    http://www.sockmytoes.com

    this is the css document :

    Code:
    html, body {
    	height: 100%;
    	width: 100%;
    	margin: 10px;
    	padding: 0;
      font: small Verdana, sans-serif;
    	text-align: center;
    	color: #282828;
    	background-color: #F8FBFB;
    }
    .inner {
    	padding: 10px;
    }
    a:link, a:visited {
    	color: #242424;
    	text-decoration: none;
    }
    a:hover {
    	color: #335588;
    }
    #wrapper {
    	width: 760px;
    	height: auto;
    	margin: auto;
    	padding: 0;
    	text-align: left;
    	background-color: white;
    	border: 1px solid #CCCCCC;
    }
    #header {
    	height: 100px;
    	width: 100%;
    	line-height: 2px;
    	border-bottom: 1px solid white;
    	background: url(images/main/header-logo-new.jpg) no-repeat white;
    }
    #header-top {
    	height: 68px;
    	font-size: 75%;
    }
    #header-bottom {
    	margin-left: 280px;
    	color: white;
    	font-size: 115%;	
    	font-weight: bold;
    }
    #navbar {
    	margin: 0;
    	padding: 0; 
    	height: 50px;
    	width: 100%;
    	font-size: 110%;
    	font-weight: bold;
    	background-color: #F8FBFB;
    	border-bottom: 1px solid white;
    }
    #navbar a:link, #navbar a:visited {
    	text-decoration: none;
    }
    #navbar a:hover {
    	color: #335588;
    }
    #search-box {
    	width: 250px;
    	margin: 0;
    	padding: 0;
    	display: -moz-inline-block;
    	display: -moz-inline-box;
    	display: inline-block;
    }
    #content {
    	margin-right: 200px;
    	border-right: 1px solid #CCCCCC;
    }
    #featurebar {
      float: right;
    	height: 100%;
      width: 200px;
    }
    #featurebar p {
    	text-align: right;
    	padding: 5px;
    	font-size: 80%;
    	color: #666666;
    	border: 1px dashed #CCCCCC;
    }
    #featurebar ul {
    	margin: 0;
     	padding: 0;
     	text-align: left;
    	list-style: none;
    }
    #featurebar a:link, #featurebar a:visited {
    	text-decoration: none;
    }
    #featurebar a:hover {
    	color: #335588;
    }
    #featurebar h3 {
    	color: #2E4B6B;
    }
    #footer {
    	width: 100%;
      clear: both;
    	color: #999999;
    	font-size: 75%;
    	text-align: center;
    	padding: 10px 0 10px 0;
    	border-top: 1px solid #CCCCCC;
    	background: url(images/main/metlogo.gif) no-repeat;
    } 
    #login {
    	float: right;
    	text-align: right;
    	margin: 0;
    	padding: 10px;
    }
    
    #dropdown {
    	position: absolute; 
    	width: 100%;
    	padding: 0px;
    	z-index: 2;
    	display: -moz-inline-block;
    	display: -moz-inline-box;
    	display: inline-block;
    }
    
    /* menu design */
    
    ul {
    	padding: 0px;
    	margin: 0px;
    }
    
    div#dropdown ul li {
      line-height: 14px;
    	list-style-type: none;
    	float: left;
    }
    
    div#dropdown ul li a {
    	display: block;
    	width: 170px;
    	color: white;
    	text-decoration: none;
    	line-height: 20px;
    }
    
    div#dropdown ul li a:hover {
    	text-decoration: none;
    	color: #333333;
    }
    
    /* The Dropdown menus ... initially hidden */
    
    div#dropdown ul li ul {
    	padding: 5px;
    	border: 2px solid #0099ff;
    	background: white;
    	list-style-type: none;
    	position: relative;
    	float: left;
    	top: 10px;
    	left: 0;
    	height: 100px;
    	width: 100%;
    }
    
    div#dropdown ul li ul li {
    	margin-top: 5px;
    	display: block;
    	clear: left;
    	text-align: left;
    	font-size: 80%;
    }
    
    div#dropdown ul li ul li a {
    	color: #333333;
    	text-decoration: none;
    	display: block;
    }
    
    div#dropdown ul li ul li a:hover {
    	text-decoration: underline;
    }
    
    /* lists nested under hovered list items */
    
    div#dropdown ul li ul {
    	display: none;
    }
    div#dropdown ul li:hover ul {
    	display: block;
    }

  2. #2
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,702
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    You've set the width of the body to 100%, after which you are adding a margin of 10px. Thus, the screen is 100% plus 20 pixels wide in total.
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  3. #3
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    hi,

    tried removing/changing those attributes you mentioned and still have the same problem.
    any other way round this?

    thx

  4. #4
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,702
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    You still have width:100&#37; on some other elements, which could create the problems. Try adding border:1px dotted #ff0000 to one ID at a time, to see which one(s) is/are touching the sides.
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Its because your page is being displayed in a frame and when the vertical scrollbar kicks in then it causes the frame to be smaller and then a horizontal scrollbar kicks in.

    Why are you displaying it in a frame anyway?

    This page doesn't show the horizontal scrollbar


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •