Topic: Webpage scrolling issue
I just re-designed my website using a css tableless format. This is my first css site. I am almost done, but I have an issue with the scrolling. When opening the page, I get side to side scrolling. It will go away when I click on the resume button in the nav bar. Then if I click on the drop down menu under the portfolio button, it will re-appear. It seem to only do this in IE7. I have looked at it in Opera, Safari and Firefox, and it does not have a problem. However, I've been using Firefoxe's web developer tools, and when viewing the block elements outlined, I see some movement in the block element just below it. I have tried everything. Any help would be great.
Thanks
site: www. dm t po rtal. net
my css:
/* layoutstyles.css */
/* Universal style rule */
*{
/* Block all browser default margins and padding */
margin:0;
padding:0;
/* Temporary borders */
/*border:dashed 1px #f00;*/
}
#wrapper{
width:910px;
background-image:url(http://www.dmtportal.net/dmt_csssite/images/body_bg.gif);
background-repeat: no-repeat;
background-position: 21px 184px;
margin: 0 auto;
/* Center the wrapper */
margin: 0 auto;
}
body{
background-color: #7579a2;
font-family: Arial, Helvetica, sans-serif;
}
/* Fixes the mysterious image gap */
#branding img{
display:block;
height:185px;
width:905px;
margin-bottom:-27px;
}
/* Navbar division */
#navbar{
display:block;
width:910px;
height:26px;
margin-left:5px;
padding-top:1px;
}
/*removes border on linked images*/
#navbar img{
border-style: none;
}
/* Remove bullets from ul in the navbar */
#navbar ul{
list-style-type:none;
}
/* List items in the navbar */
#navbar li{
float:left;
/* Required for drop-down menus */
position:relative;
}
/* Applies to navbar links, unvisited and visited */
#navbar a,
#navbar a:link,
#navbar a:visited{
text-decoration:none;
font-family:Arial, Helvetica, sans-serif;
color:#FFE4A8;
text-align:center;
outline-style:none;
}
/* Navbar hover, active, and current page links */
#navbar a:hover,
#navbar a:active,
#navbar li.selected a:link,
#navbar li.selected a:visited{
color:#592E07;
}
/* Drop-down menu styles */
#navbar li ul{
position:absolute;
z-index:100;
visibility:hidden;
}
/* Make drop-down visible on navbar hover */
#navbar li:hover ul,
#navbar li a:hover ul{ /* IE6 hack */
visibility:visible;
top:25.6px;
left:0;
}
/* Applies to links on the drop-down menu */
#navbar li:hover ul li a,
#navbar li a:hover ul li a{ /* IE6 hack */
background:#4F4C8F; /* Removes bg image */
text-align:left;
font-size:12pt;
display:block;
width:105px;
padding:0 0 0 16px;
height:auto;
}
/* Hover on drop-down menu links */
#navbar li:hover ul li a:hover,
#navbar li a:hover ul li a:hover{ /* IE6 hack */
background: #6C6ABD;
color:#fff;
}
/* IE6 hack applies to its table drop-down */
#navbar table {
margin:-1px;
border-collapse:collapse;
position:absolute;
top:8px;
left:0;
z-index:100;
}
#leftcolumn{
/* Remember, content left margin must match this width */
background-color: #1a1666;
display:block;
width:300px;
height:315px;
float:left;
margin-left:49px;
margin-top:17px;
}
#content{
/* Left margin must match leftcolumn width */
background-image:url(http://www.dmtportal.net/dmt_csssite/images/text_bg.gif);
background-repeat: no-repeat;
background-position: 82px 72px;
color:#fff;
font-size:12pt;
margin-right:13px;
margin-left:300px;
padding:25px;
padding-left:150px;
}
#content img{
display:block;
margin-bottom:25px;
padding-right:70px;
margin-top:-13px;
}
/* Applies to h1 elements in the content division */
#content h1{
font-family: Arial, Helvetica, sans-serif;
font-size:24pt;
color:#fff;
font-weight:normal;
font-style:italic;
font-variant:small-caps;
letter-spacing:1.28px;
}
/* Applies to unordered lists in the content division */
#content ul{
font-size:12pt;
padding-left:40px;
}
#content p{
font-size:12pt;
line-height:25px;
}
#footer{
width:877px;
text-align:center;
margin-left:24px;
padding-top:18px;
padding-bottom:12px;
}
#footer p{
color:#fff;
font-size:7pt;
line-height:12px;
}
#footer img{
display:block;
position:relative;
margin-top:17px;
margin-left:25px;
}
