Unwanted Horizontal Scrollbar

  • DeadBolt
  • Novice
  • Novice
  • DeadBolt
  • Posts: 31

Post 3+ Months Ago

I'm in the middle of designing a site and I can't seem to figure out why I am getting a horiz. scrollbar. I've gone through the css and Firebug, yet I still cannot figure this out.

Here is the link: www . ecohost . net /bedrock

And here is the css

Code: [ Select ]
* {
    margin: 0px;
    padding: 0px;
}

.clearfloat {
    clear: both;
}

html {
    width: 1131px;
    height: 100%;
    text-align: center;
    margin: 0px auto;
}

body {
    margin: 0px auto 0px auto;
    background: url(images/background.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-color: #000;
    font-family: Helvetica, arial, myriad, sans-serif;
    font-size: 14px;
    color: #333;
    line-height: 18px;
    letter-spacing: -0.9px;
    height: 100%;
    width: 1131px;
}

a {
    font-size: 10px;
    color: orange;
    border: none;
}

p {
    margin-top: 15px;
}

#container {
    min-height: 100%;
    width: 1131px;
    height: auto;
    margin: 0px auto 0 auto;
    padding-bottom: 50px;
}


#header {
    width: 1131px;
    height: 255px;
}

#footer-wrap {
    background: black;
    bottom: 0;
    position: fixed;
    width: 1131px;
    height: 50px;
    clear: both;
    /* for IE */
     filter:alpha(opacity=85);
     /* CSS3 standard */
     opacity:0.85;
}

#footer {
    text-align: center;
}

#footer p {
    margin-top: 10px;
    font-size: 11px;
    line-height: 10px;
    letter-spacing: 0px;
    color: #525252;
}

#footer p.contact {
    font-size: 14px;
    color: #a2a2a2;
}

#footer b{
    font-weight: normal;
    color: orange;
    text-decoration: none
    }
    
#footer a{
    font-size: 14px;
    font-weight: normal;
    color: orange;
    text-decoration: none;
    }
    
#footer a:hover{
    font-size: 14px;
    color: orange;
    border-bottom: orange dotted 1px;
}

#footer a.copy {
    font-size: 11px;
    color: #696969;
    text-decoration: none;
}

#footer a.copy:hover {
    font-size: 11px;
    color: #696969;
    text-decoration: none;
    border-bottom: #696969 dotted 1px;
}

/* CONTENT */

#content {
    position: relative;
    width: 660px;
    height: auto;
    text-align: left;
    margin: 0px auto;
    background-image: url(images/content-bg.png);
    background-repeat: repeat;
    z-index: 5px;
    padding: 20px;
    margin-top: 55px;
}

#main img {
    margin-left: auto;
    margin-right: auto;
    
}

#main {
    float: left;
    height: 100%;
    width: 450px;
    border-right: 1px dotted #525252;
}

#main p.caption {
    margin-top: -10px;
    font-size: 9px;
    font-style: italic;
    text-align: center;
    letter-spacing: 0px;
}

#pic-bar {
    float: right;
    margin-top: 12px;
    text-align: center;
}

#pic-bar img {
    margin-left: auto;
    margin-right: auto;
}

#pic-bar a {
    font-family: Helvetica, arial, myriad, sans-serif;
    font-size: 16px;
    text-transform: uppercase;
    text-decoration: none;
    color: #6a6a69;
    display: block;
    margin: -10px auto 20px auto;
}

#pic-bar a:hover {
    border-bottom: 1px dotted #6a6a69;
    margin-bottom: 19px;
}

#contact-bar {
    margin-top: 20px;
    clear: both;
}

/* NAV BAR */

#nav-bar {
    position: absolute;
    width: 1131px;
    height: 78px;
    margin: 0px auto;
    background-image: url(images/navigation-bg.png);
    background-repeat: no-repeat;
    z-index: 10;
}

#nav-wrapper {
    width: 566px;
    margin: 0px auto 0 auto;
}

ul#nav-buttons {
    width: 1131px;
    margin: 0 auto;
}

ul#nav-buttons li {
    display: inline;
}

ul#nav-buttons li a {
    float: left;
    text-align: center;
    margin-top: 12px;
}

ul#nav-buttons span {
    display: none;
}



/* NAV BUTTONS */

#nav-buttons li.home a {
    width: 105px;
    height: 43px;
    margin-right: 1px;
    background: url(images/buttons/home-button.png) no-repeat 0px 0px;
}

#nav-buttons li.home a:hover {
    width: 105px;
    height: 43px;
    margin-right: 1px;
    background: url(images/buttons/home-button.png) no-repeat 0px -43px;
}

#nav-buttons li.signs a {
    width: 97px;
    height: 43px;
    margin-right: 1px;
    background: url(images/buttons/signs-button.png) no-repeat 0px 0px;
}

#nav-buttons li.signs a:hover {
    width: 97px;
    height: 43px;
    margin-right: 1px;
    background: url(images/buttons/signs-button.png) no-repeat 0px -43px;
}

#nav-buttons li.monuments a {
    width: 155px;
    height: 43px;
    margin-right: 1px;
    background: url(images/buttons/monuments-button.png) no-repeat 0px 0px;
}

#nav-buttons li.monuments a:hover {
    width: 155px;
    height: 43px;
    margin-right: 1px;
    background: url(images/buttons/monuments-button.png) no-repeat 0px -43px;
}

#nav-buttons li.map a {
    width: 89px;
    height: 43px;
    margin-right: 1px;
    background: url(images/buttons/map-button.png) no-repeat 0px 0px;
}

#nav-buttons li.map a:hover {
    width: 89px;
    height: 43px;
    margin-right: 1px;
    background: url(images/buttons/map-button.png) no-repeat 0px -43px;
}

#nav-buttons li.contact a {
    width: 121px;
    height: 43px;
    margin-right: 1px;
    background: url(images/buttons/contact-button.png) no-repeat 0px 0px;
}

#nav-buttons li.contact a:hover {
    width: 121px;
    height: 43px;
    margin-right: 1px;
    background: url(images/buttons/contact-button.png) no-repeat 0px -43px;
}
  1. * {
  2.     margin: 0px;
  3.     padding: 0px;
  4. }
  5. .clearfloat {
  6.     clear: both;
  7. }
  8. html {
  9.     width: 1131px;
  10.     height: 100%;
  11.     text-align: center;
  12.     margin: 0px auto;
  13. }
  14. body {
  15.     margin: 0px auto 0px auto;
  16.     background: url(images/background.jpg);
  17.     background-repeat: no-repeat;
  18.     background-position: center;
  19.     background-color: #000;
  20.     font-family: Helvetica, arial, myriad, sans-serif;
  21.     font-size: 14px;
  22.     color: #333;
  23.     line-height: 18px;
  24.     letter-spacing: -0.9px;
  25.     height: 100%;
  26.     width: 1131px;
  27. }
  28. a {
  29.     font-size: 10px;
  30.     color: orange;
  31.     border: none;
  32. }
  33. p {
  34.     margin-top: 15px;
  35. }
  36. #container {
  37.     min-height: 100%;
  38.     width: 1131px;
  39.     height: auto;
  40.     margin: 0px auto 0 auto;
  41.     padding-bottom: 50px;
  42. }
  43. #header {
  44.     width: 1131px;
  45.     height: 255px;
  46. }
  47. #footer-wrap {
  48.     background: black;
  49.     bottom: 0;
  50.     position: fixed;
  51.     width: 1131px;
  52.     height: 50px;
  53.     clear: both;
  54.     /* for IE */
  55.      filter:alpha(opacity=85);
  56.      /* CSS3 standard */
  57.      opacity:0.85;
  58. }
  59. #footer {
  60.     text-align: center;
  61. }
  62. #footer p {
  63.     margin-top: 10px;
  64.     font-size: 11px;
  65.     line-height: 10px;
  66.     letter-spacing: 0px;
  67.     color: #525252;
  68. }
  69. #footer p.contact {
  70.     font-size: 14px;
  71.     color: #a2a2a2;
  72. }
  73. #footer b{
  74.     font-weight: normal;
  75.     color: orange;
  76.     text-decoration: none
  77.     }
  78.     
  79. #footer a{
  80.     font-size: 14px;
  81.     font-weight: normal;
  82.     color: orange;
  83.     text-decoration: none;
  84.     }
  85.     
  86. #footer a:hover{
  87.     font-size: 14px;
  88.     color: orange;
  89.     border-bottom: orange dotted 1px;
  90. }
  91. #footer a.copy {
  92.     font-size: 11px;
  93.     color: #696969;
  94.     text-decoration: none;
  95. }
  96. #footer a.copy:hover {
  97.     font-size: 11px;
  98.     color: #696969;
  99.     text-decoration: none;
  100.     border-bottom: #696969 dotted 1px;
  101. }
  102. /* CONTENT */
  103. #content {
  104.     position: relative;
  105.     width: 660px;
  106.     height: auto;
  107.     text-align: left;
  108.     margin: 0px auto;
  109.     background-image: url(images/content-bg.png);
  110.     background-repeat: repeat;
  111.     z-index: 5px;
  112.     padding: 20px;
  113.     margin-top: 55px;
  114. }
  115. #main img {
  116.     margin-left: auto;
  117.     margin-right: auto;
  118.     
  119. }
  120. #main {
  121.     float: left;
  122.     height: 100%;
  123.     width: 450px;
  124.     border-right: 1px dotted #525252;
  125. }
  126. #main p.caption {
  127.     margin-top: -10px;
  128.     font-size: 9px;
  129.     font-style: italic;
  130.     text-align: center;
  131.     letter-spacing: 0px;
  132. }
  133. #pic-bar {
  134.     float: right;
  135.     margin-top: 12px;
  136.     text-align: center;
  137. }
  138. #pic-bar img {
  139.     margin-left: auto;
  140.     margin-right: auto;
  141. }
  142. #pic-bar a {
  143.     font-family: Helvetica, arial, myriad, sans-serif;
  144.     font-size: 16px;
  145.     text-transform: uppercase;
  146.     text-decoration: none;
  147.     color: #6a6a69;
  148.     display: block;
  149.     margin: -10px auto 20px auto;
  150. }
  151. #pic-bar a:hover {
  152.     border-bottom: 1px dotted #6a6a69;
  153.     margin-bottom: 19px;
  154. }
  155. #contact-bar {
  156.     margin-top: 20px;
  157.     clear: both;
  158. }
  159. /* NAV BAR */
  160. #nav-bar {
  161.     position: absolute;
  162.     width: 1131px;
  163.     height: 78px;
  164.     margin: 0px auto;
  165.     background-image: url(images/navigation-bg.png);
  166.     background-repeat: no-repeat;
  167.     z-index: 10;
  168. }
  169. #nav-wrapper {
  170.     width: 566px;
  171.     margin: 0px auto 0 auto;
  172. }
  173. ul#nav-buttons {
  174.     width: 1131px;
  175.     margin: 0 auto;
  176. }
  177. ul#nav-buttons li {
  178.     display: inline;
  179. }
  180. ul#nav-buttons li a {
  181.     float: left;
  182.     text-align: center;
  183.     margin-top: 12px;
  184. }
  185. ul#nav-buttons span {
  186.     display: none;
  187. }
  188. /* NAV BUTTONS */
  189. #nav-buttons li.home a {
  190.     width: 105px;
  191.     height: 43px;
  192.     margin-right: 1px;
  193.     background: url(images/buttons/home-button.png) no-repeat 0px 0px;
  194. }
  195. #nav-buttons li.home a:hover {
  196.     width: 105px;
  197.     height: 43px;
  198.     margin-right: 1px;
  199.     background: url(images/buttons/home-button.png) no-repeat 0px -43px;
  200. }
  201. #nav-buttons li.signs a {
  202.     width: 97px;
  203.     height: 43px;
  204.     margin-right: 1px;
  205.     background: url(images/buttons/signs-button.png) no-repeat 0px 0px;
  206. }
  207. #nav-buttons li.signs a:hover {
  208.     width: 97px;
  209.     height: 43px;
  210.     margin-right: 1px;
  211.     background: url(images/buttons/signs-button.png) no-repeat 0px -43px;
  212. }
  213. #nav-buttons li.monuments a {
  214.     width: 155px;
  215.     height: 43px;
  216.     margin-right: 1px;
  217.     background: url(images/buttons/monuments-button.png) no-repeat 0px 0px;
  218. }
  219. #nav-buttons li.monuments a:hover {
  220.     width: 155px;
  221.     height: 43px;
  222.     margin-right: 1px;
  223.     background: url(images/buttons/monuments-button.png) no-repeat 0px -43px;
  224. }
  225. #nav-buttons li.map a {
  226.     width: 89px;
  227.     height: 43px;
  228.     margin-right: 1px;
  229.     background: url(images/buttons/map-button.png) no-repeat 0px 0px;
  230. }
  231. #nav-buttons li.map a:hover {
  232.     width: 89px;
  233.     height: 43px;
  234.     margin-right: 1px;
  235.     background: url(images/buttons/map-button.png) no-repeat 0px -43px;
  236. }
  237. #nav-buttons li.contact a {
  238.     width: 121px;
  239.     height: 43px;
  240.     margin-right: 1px;
  241.     background: url(images/buttons/contact-button.png) no-repeat 0px 0px;
  242. }
  243. #nav-buttons li.contact a:hover {
  244.     width: 121px;
  245.     height: 43px;
  246.     margin-right: 1px;
  247.     background: url(images/buttons/contact-button.png) no-repeat 0px -43px;
  248. }
  • DeadBolt
  • Novice
  • Novice
  • DeadBolt
  • Posts: 31

Post 3+ Months Ago

I still have not figured out why this is happening. Can someone please give me a hand, I've been over this hundreds of times and I do not get it.

Thanks,
Dave
  • tastysite
  • Proficient
  • Proficient
  • User avatar
  • Posts: 349
  • Loc: Brighouse, West Yorkshire, England

Post 3+ Months Ago

ok worked out your problem, its the footer (thickbox), its to wide however I can't work the code out, its all over the place someone with better eyes for code could find where the width is declared.

---

Also on a off topic note you have, for #main got z-index:5px; - z-index is not done in px it shoud be just z-index:5; (Don't think this will make any difference to your problem but you never know )
  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Posts: 1827
  • Loc: In the Great White North

Post 3+ Months Ago

The issue is the fixed width on the absolutely positioned #nav-bar

To fix it simply add overflow-x:hidden; to that element's styles.

Code: [ Select ]
#nav-bar {
   position: absolute;
   width: 1131px;
   height: 78px;
   margin: 0px auto;
   background-image: url(images/navigation-bg.png);
   background-repeat: no-repeat;
   z-index: 10;
   overflow-x:hidden;
}
  1. #nav-bar {
  2.    position: absolute;
  3.    width: 1131px;
  4.    height: 78px;
  5.    margin: 0px auto;
  6.    background-image: url(images/navigation-bg.png);
  7.    background-repeat: no-repeat;
  8.    z-index: 10;
  9.    overflow-x:hidden;
  10. }
  • DeadBolt
  • Novice
  • Novice
  • DeadBolt
  • Posts: 31

Post 3+ Months Ago

Thank You graphixboy that worked like a charm! Wow, I can't believe I didn't notice that after hours of staring at code.

As I recall, you have helped me out of a jam before.

Thanks again,
Dave
  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Posts: 1827
  • Loc: In the Great White North

Post 3+ Months Ago

Glad it worked.

Post Information

  • Total Posts in this topic: 6 posts
  • Users browsing this forum: No registered users and 19 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.