Back To Website Design Forum

Unwanted Horizontal Scrollbar

  • DeadBolt
  • Novice
  • Novice
  • No Avatar
  • Joined: May 12, 2005
  • Posts: 31
  • Status: Offline

Post March 16th, 2010, 11:31 am

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. }
  6. .clearfloat {
  7.     clear: both;
  8. }
  10. html {
  11.     width: 1131px;
  12.     height: 100%;
  13.     text-align: center;
  14.     margin: 0px auto;
  15. }
  17. body {
  18.     margin: 0px auto 0px auto;
  19.     background: url(images/background.jpg);
  20.     background-repeat: no-repeat;
  21.     background-position: center;
  22.     background-color: #000;
  23.     font-family: Helvetica, arial, myriad, sans-serif;
  24.     font-size: 14px;
  25.     color: #333;
  26.     line-height: 18px;
  27.     letter-spacing: -0.9px;
  28.     height: 100%;
  29.     width: 1131px;
  30. }
  32. a {
  33.     font-size: 10px;
  34.     color: orange;
  35.     border: none;
  36. }
  38. p {
  39.     margin-top: 15px;
  40. }
  42. #container {
  43.     min-height: 100%;
  44.     width: 1131px;
  45.     height: auto;
  46.     margin: 0px auto 0 auto;
  47.     padding-bottom: 50px;
  48. }
  51. #header {
  52.     width: 1131px;
  53.     height: 255px;
  54. }
  56. #footer-wrap {
  57.     background: black;
  58.     bottom: 0;
  59.     position: fixed;
  60.     width: 1131px;
  61.     height: 50px;
  62.     clear: both;
  63.     /* for IE */
  64.      filter:alpha(opacity=85);
  65.      /* CSS3 standard */
  66.      opacity:0.85;
  67. }
  69. #footer {
  70.     text-align: center;
  71. }
  73. #footer p {
  74.     margin-top: 10px;
  75.     font-size: 11px;
  76.     line-height: 10px;
  77.     letter-spacing: 0px;
  78.     color: #525252;
  79. }
  81. #footer p.contact {
  82.     font-size: 14px;
  83.     color: #a2a2a2;
  84. }
  86. #footer b{
  87.     font-weight: normal;
  88.     color: orange;
  89.     text-decoration: none
  90.     }
  91.     
  92. #footer a{
  93.     font-size: 14px;
  94.     font-weight: normal;
  95.     color: orange;
  96.     text-decoration: none;
  97.     }
  98.     
  99. #footer a:hover{
  100.     font-size: 14px;
  101.     color: orange;
  102.     border-bottom: orange dotted 1px;
  103. }
  105. #footer a.copy {
  106.     font-size: 11px;
  107.     color: #696969;
  108.     text-decoration: none;
  109. }
  111. #footer a.copy:hover {
  112.     font-size: 11px;
  113.     color: #696969;
  114.     text-decoration: none;
  115.     border-bottom: #696969 dotted 1px;
  116. }
  118. /* CONTENT */
  120. #content {
  121.     position: relative;
  122.     width: 660px;
  123.     height: auto;
  124.     text-align: left;
  125.     margin: 0px auto;
  126.     background-image: url(images/content-bg.png);
  127.     background-repeat: repeat;
  128.     z-index: 5px;
  129.     padding: 20px;
  130.     margin-top: 55px;
  131. }
  133. #main img {
  134.     margin-left: auto;
  135.     margin-right: auto;
  136.     
  137. }
  139. #main {
  140.     float: left;
  141.     height: 100%;
  142.     width: 450px;
  143.     border-right: 1px dotted #525252;
  144. }
  146. #main p.caption {
  147.     margin-top: -10px;
  148.     font-size: 9px;
  149.     font-style: italic;
  150.     text-align: center;
  151.     letter-spacing: 0px;
  152. }
  154. #pic-bar {
  155.     float: right;
  156.     margin-top: 12px;
  157.     text-align: center;
  158. }
  160. #pic-bar img {
  161.     margin-left: auto;
  162.     margin-right: auto;
  163. }
  165. #pic-bar a {
  166.     font-family: Helvetica, arial, myriad, sans-serif;
  167.     font-size: 16px;
  168.     text-transform: uppercase;
  169.     text-decoration: none;
  170.     color: #6a6a69;
  171.     display: block;
  172.     margin: -10px auto 20px auto;
  173. }
  175. #pic-bar a:hover {
  176.     border-bottom: 1px dotted #6a6a69;
  177.     margin-bottom: 19px;
  178. }
  180. #contact-bar {
  181.     margin-top: 20px;
  182.     clear: both;
  183. }
  185. /* NAV BAR */
  187. #nav-bar {
  188.     position: absolute;
  189.     width: 1131px;
  190.     height: 78px;
  191.     margin: 0px auto;
  192.     background-image: url(images/navigation-bg.png);
  193.     background-repeat: no-repeat;
  194.     z-index: 10;
  195. }
  197. #nav-wrapper {
  198.     width: 566px;
  199.     margin: 0px auto 0 auto;
  200. }
  202. ul#nav-buttons {
  203.     width: 1131px;
  204.     margin: 0 auto;
  205. }
  207. ul#nav-buttons li {
  208.     display: inline;
  209. }
  211. ul#nav-buttons li a {
  212.     float: left;
  213.     text-align: center;
  214.     margin-top: 12px;
  215. }
  217. ul#nav-buttons span {
  218.     display: none;
  219. }
  223. /* NAV BUTTONS */
  225. #nav-buttons li.home a {
  226.     width: 105px;
  227.     height: 43px;
  228.     margin-right: 1px;
  229.     background: url(images/buttons/home-button.png) no-repeat 0px 0px;
  230. }
  232. #nav-buttons li.home a:hover {
  233.     width: 105px;
  234.     height: 43px;
  235.     margin-right: 1px;
  236.     background: url(images/buttons/home-button.png) no-repeat 0px -43px;
  237. }
  239. #nav-buttons li.signs a {
  240.     width: 97px;
  241.     height: 43px;
  242.     margin-right: 1px;
  243.     background: url(images/buttons/signs-button.png) no-repeat 0px 0px;
  244. }
  246. #nav-buttons li.signs a:hover {
  247.     width: 97px;
  248.     height: 43px;
  249.     margin-right: 1px;
  250.     background: url(images/buttons/signs-button.png) no-repeat 0px -43px;
  251. }
  253. #nav-buttons li.monuments a {
  254.     width: 155px;
  255.     height: 43px;
  256.     margin-right: 1px;
  257.     background: url(images/buttons/monuments-button.png) no-repeat 0px 0px;
  258. }
  260. #nav-buttons li.monuments a:hover {
  261.     width: 155px;
  262.     height: 43px;
  263.     margin-right: 1px;
  264.     background: url(images/buttons/monuments-button.png) no-repeat 0px -43px;
  265. }
  267. #nav-buttons li.map a {
  268.     width: 89px;
  269.     height: 43px;
  270.     margin-right: 1px;
  271.     background: url(images/buttons/map-button.png) no-repeat 0px 0px;
  272. }
  274. #nav-buttons li.map a:hover {
  275.     width: 89px;
  276.     height: 43px;
  277.     margin-right: 1px;
  278.     background: url(images/buttons/map-button.png) no-repeat 0px -43px;
  279. }
  281. #nav-buttons li.contact a {
  282.     width: 121px;
  283.     height: 43px;
  284.     margin-right: 1px;
  285.     background: url(images/buttons/contact-button.png) no-repeat 0px 0px;
  286. }
  288. #nav-buttons li.contact a:hover {
  289.     width: 121px;
  290.     height: 43px;
  291.     margin-right: 1px;
  292.     background: url(images/buttons/contact-button.png) no-repeat 0px -43px;
  293. }
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post March 16th, 2010, 11:31 am

  • DeadBolt
  • Novice
  • Novice
  • No Avatar
  • Joined: May 12, 2005
  • Posts: 31
  • Status: Offline

Post March 23rd, 2010, 9:30 am

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
  • Joined: Apr 09, 2008
  • Posts: 349
  • Loc: Brighouse, West Yorkshire, England
  • Status: Offline

Post March 24th, 2010, 2:23 am

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
  • Joined: Jul 11, 2005
  • Posts: 1828
  • Loc: In the Great White North
  • Status: Offline

Post March 24th, 2010, 9:53 am

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. }
If at first you don't succeed F1... If that doesn't work try Google!
//// Designer, Developer & Teacher - Interactive, Motion and 3D \\\\
Portfolio at WhenImNotSleeping.com
  • DeadBolt
  • Novice
  • Novice
  • No Avatar
  • Joined: May 12, 2005
  • Posts: 31
  • Status: Offline

Post March 24th, 2010, 10:05 am

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
  • Joined: Jul 11, 2005
  • Posts: 1828
  • Loc: In the Great White North
  • Status: Offline

Post March 24th, 2010, 10:07 am

Glad it worked.
If at first you don't succeed F1... If that doesn't work try Google!
//// Designer, Developer & Teacher - Interactive, Motion and 3D \\\\
Portfolio at WhenImNotSleeping.com

Page 1 of 1

Post Information

  • Total Posts in this topic: 6 posts
  • Users browsing this forum: No registered users and 102 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
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.