Webpage scrolling issue

[sarina28]

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;

}

[falkencreative]

Hmmm. I'm currently getting "Directory Listing Denied - This Virtual Directory does not allow contents to be listed." when I try to look at your site.

[sarina28]

sorry about that. I gave you the old site anyways. Here it is

 

ww w.dm tpor tal.n et/dmt_csssite/layouthome2.htm

[Wickham]

It's very strange that it happens only for IE and the scrollbar only goes away when hovering over the resume button.

 

I've discovered that if you remove two (any two) li tags from the resume ul tag the scrollbar does not occur.

 

I've tried retyping them but it makes no difference unless two are removed (the portfolio button also has four li tags but it doesn't occur because of them).

[virtual]

I don't see the scrolling issues you described in IE7, (using VMware on a MAC) however you do have 37 errors in your html code.

 

In case you are interested, in IE6 your navigation bar is doubled and the content background image is cut off and repeated.

[Wickham]

There is a scrolling issue in 1024*768 in IE7; I've found the answer now.

 

Add

#navbar li li{ float:none; }

into the stylesheet, I added it after #navbar li {...} but it probably doesn't matter where you add it. IE7 was still trying to float: left from the #navbar li style which was pushing the dropdowns out to the right (in theory, but it didn't show like that).

 

Also add a closing tag because you opened it just after the first ul tag

 

but that wasn't the cause of the problem.

 

You will have lots of validation errors because of the conditional comment and tables for IE6; nothing you can do except change the menu structure.

 

Add a character charset in the head section

 

You also need to change the doctype and html tag from XHTML 1.1 to

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 

 

or preferably just HTML 4.01 as XHTML 1.1 is not supposed to be associated with content="text/html". See LSW's reply here

http://www.killersites.com/forums/topic/307/transitional-to-strict/

 

Validate here http://validator.w3.org/

 

The drop down menus didn't work in IE6 from my local version until I added a link to a behavior file csshover.htc - download version Version 1.42.060206 (:hover and :active)

http://www.xs4all.nl/~peterned/csshover.html

no need to look in it, you won't understand it, just put it in the same folder/directory as the html file and put this in the

section:-

 

It's because you have a hover on the li tags and IE6 doesn't work a hover on li tags. I realise that you have a special style

#navbar li a:hover ul li a:hover{ /* IE6 hack */

#6C6ABD;/

color:#fff;

}

 

which attempts to make the hover only on the "a" tags but for some reason it wasn't working for me, so there's no harm in adding the behavior htc file and the conditional comment just to make sure.

Edited January 9, 2009 by Wickham

[sarina28]

Thanks.

 

That took care of the scrolling issue. That was driving me crazy. I added the character charset, and eliminated four of the validation errors. I'll work on the other errors later. I was told that the hacks for the drop downs will not validate. My style sheet validates though. I do not have IE6, so I can't see the navbar issues. Is IE6 still down loadable ? Is there a way to check for those issues without having IE6? I heard that older browser has always been an issue with web developers.

[Wickham]

The behavior file for IE6 is a regular addition, it works because I've tested it for you. It may be a "hack" but many people use it.

[JBall]

I do not have IE6, so I can't see the navbar issues. Is IE6 still down loadable ?

 

 

Multiple IE

[sarina28]

I found from a couple of sources that use {display:inline; }, and it works well with floated elements. I've tried it on my site, and it helped a little bit with the navbar margin doubling in IE6. I'm not exactly sure where to put it though. I've tried inserting it in all my floated elements with different results. Iv'e since then removed them all for now.

[Wickham]

I suggest you try my solution again because it worked fine in IE6, IE7 and Firefox (an dprobably Safari and Opera).

[sarina28]

I used the csshover.htc and I added {display:inline;} in a couple of floated elements. I down loaded IE6, and everything seem to look and work fine. IE6 is really a nuisance.

 

Thanks again.

Edited January 15, 2009 by sarina28