horizontal scroll

[davy_yg]

Hello,

I create a website with a 1024 x 728 size. After I create the html amazingly, the horizontal space is more than 1024, larger than the background that I create. There are around 400 px more space to right side of the background which is filled with a blank white space ( I wonder why?).

I do not want to see horizontal scroll in my website only vertical scroll.

This is my whole website css.

style.css

body{background-image1:url('../images/indonusa3.jpg'); background-repeat: repeat-y; background-position: center top; height: 800px; }

#logo {margin: 10px 0 0 10px; }

#navigation {background-image:url('../images/nav.jpg'); background-repeat: repeat-x; width: 900px; height: 80px; z-index: 2; border-radius: 10px; border-style:solid; border-width: 1px; border-color: gray; margin-left: auto; margin-right: auto; margin-top: 50px;}

#search {margin: -45px 0 0 720px;}
input {width: 100px; height:30px;}
#sbutton {margin: -28px 0 0 827px;}

#slidesnav {margin-top: 400px; }

#products { margin: 50px 0 0 250px; }


#fnav {background-color: white; width: 900px; height: 50px; border-radius: 10px; border-style:solid; border-width: 1px; border-color: gray; margin-left: auto; margin-right: auto; margin-top: 20px;}

#fnav ul {list-style-type: none; margin:0; padding:0; text-align:right; margin-top:10px; margin-right:5px; }

#fnav ul li {display: inline; }

#fnav ul li a{text-decoration: none; color: black; font-family: arial; font-size: 11px; padding: .2em .5em;}

#fnav ul li a:hover{text-decoration: underline;}

/* special for slideshow navigation */

#slideshow { left: 35px; float: left; margin: 10px; z-index: 0;}
#nav { width: 270px; margin: 170px 0 0 225px; float: left; position: absolute; z-index: 1;}
#nav li { float: left; margin: 0 0 0 4px; list-style: none; background: url(../images/slidesnav1.jpg) no-repeat top;}
#nav a { width: 20px; height: 20px; padding: 0px; display: block; border: 0px solid #ccc;}
#nav li.activeSlide a { /* background: #88f */ background: url(../images/slidesnav2.jpg) no-repeat top;}
#nav a:focus { outline: none;}
#nav img { border: none; display: block;}
pre { clear: left }

/* end slideshow nav */

[AARTI SHRIVAS]

remove width:900; from navigation and give 100% width in body.

[davy_yg]

ok, I did. I wonder why there is this around 400px blank white space on the right side of the body that I can't even trace it with css (firebug).

[AARTI SHRIVAS]

is your website online can you give me url so i can help you

[davy_yg]

Unfortunately, it's not online yet. It's something beyond the body width. Since the firebug highlight on the body width is smaller than the whole screen.

I wonder what that is.

[<M/>]

do you have the html available, maybe that'll help us find the problem?

[davy_yg]

I think I find the part of the problem.

css/nav.css

#cssmenu {padding: 0; margin: -50px 0 0 170px; border: 0;}
#cssmenu ul, #cssmenu li {list-style: none; margin: 0; padding: 0;}
#cssmenu ul {position: relative; z-index: 597; } 
#cssmenu ul li { float: left; min-height: 1px; vertical-align: middle;} 
#cssmenu ul li:hover {position: relative; z-index: 599; cursor: default;
} 
#cssmenu ul ul {visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 2; /* width: 100%; */ } 
#cssmenu ul ul li {float: none; font-weight: normal;} 
#cssmenu ul ul ul {top: 0; left: auto; right: -99.5%; } 
#cssmenu ul li:hover > ul { visibility: visible;} 
#cssmenu ul ul {margin-top: 0; bottom: 0; left: 0;} 
#cssmenu a { display: block; line-height: 2em; text-decoration: none; background-color: none; color: black; padding1: .5em 1em; padding: .5em 0em; font-family: arial; font-size:16px;} 
#cssmenu a:hover{ display: block; line-height: 2em; text-decoration: none; background-color: white; color: black; padding1: .5em 1em; padding: .5em 0em;font-family: arial;font-size:16px;} 

#cssmenu .onelayer{background-color: #c4f8f3; padding1: .5em 1em;} 
#cssmenu .onelayer a:hover{background-color: white; padding1: .5em 1em;}

navigation.php

<link href= "css/nav.css" rel="stylesheet" type="text/css" media="screen">

<div id="navigation">

<div id="logo"><img src="images/logo2.png" width="160" height="60"></div>

<div id='cssmenu'>
  <ul>
     <li class='active'><a href='index.php'>|    Home    |</a></li>
     <li class='has-sub'><a href='index.php'>    Product & Services    |</a>
        <ul>
           <li class='onelayer'><a href='connection.php'>    Connection       ></a>
              <ul>
                 <li class='onelayer'><a href='fo.php'>    Fiber Optic</a></li>
                 <li class='onelayer'><a href='wireless.php'>    Wireless</a></li>
              </ul>
           </li>
           <li class='onelayer'><a href='collaboration.php'>    Collaboration         ></a>
              <ul>
                 <li class='onelayer'><a href='cloud.php'>    Cloud</a></li>
                 <li class='onelayer'><a href='email.php'>    Email</a></li>
                 <li class='onelayer'><a href='vcon.php'>    VCON</a></li>
                 <li class='onelayer'><a href='sharepoint.php'>    Sharepoint</a></li>
                 <li class='onelayer'><a href='crm.php'>    CRM</a></li>
                 <li class='onelayer'><a href='voip.php'>    Voice</a></li> 
              </ul>
           </li>
           <li class='onelayer'><a href='solution.php'>    Solution         ></a>
              <ul>
                 <li class='onelayer'><a href='network.php'>    Network Solution</a></li>
                 <li class='onelayer'><a href='system.php'>    System Solution</a></li>
                 <li class='onelayer'><a href='surveillance.php'>    Surveillance</a></li> 
              </ul>
           </li>
        </ul>
     </li>
     <li><a href='agent.php'>    Agent    |</a></li>
     <li><a href='aboutus.php'>    About Us    |</a></li>
     <li><a href='contactus.php'>    Contact Us    |</a></li>
  </ul>
</div>


<div id="search">
<input type="text" name="search"></div>
<div id="sbutton"><img src="images/search button.jpg"></div>
</div>

</div>

It's in :

#cssmenu ul ul {visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 2; /* width: 100%; */ } 

The part that I comment out:
/* width: 100%; */

If I include width: 100%; then, the horizonal scroll start appearing around 400 px larger to the right. Yet the navigation dropdown appears perfect.

If I comment out " width: 100% ", then the navigation appears imperfect (like in the link below) eventhough the horizontal scroll disappeared.

http://www.innovation.web.id/indonusanaverror.jpg

Any other idea to fix this?

[Abdul Basit_1]

Dear Check your Screen Resulation....

[davy_yg]

The deal is the background scretch larger than the wallpaper, If I include width: 100%;

If take the code off then, the navigation size start going into chaos just like the link above.

[davy_yg]

Nevermind, I use the exact width size, instead of percentage.

width: 170px;

[touqeer s]

you have to style your webpage in css
keep width 100% not in pixels