Jump to content
Stef's Coding Community
Sign in to follow this  
sarina28

Webpage scrolling issue

Recommended Posts

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;

}

Share this post


Link to post
Share on other sites

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).

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 by Wickham

    Share this post


    Link to post
    Share on other sites

    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.

    Share this post


    Link to post
    Share on other sites

    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.

    Share this post


    Link to post
    Share on other sites

    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.

    Share this post


    Link to post
    Share on other sites

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

    Share this post


    Link to post
    Share on other sites

    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 by sarina28

    Share this post


    Link to post
    Share on other sites

    Join the conversation

    You can post now and register later. If you have an account, sign in now to post with your account.
    Note: Your post will require moderator approval before it will be visible.

    Guest
    Reply to this topic...

    ×   Pasted as rich text.   Paste as plain text instead

      Only 75 emoji are allowed.

    ×   Your link has been automatically embedded.   Display as a link instead

    ×   Your previous content has been restored.   Clear editor

    ×   You cannot paste images directly. Upload or insert images from URL.

    Loading...
    Sign in to follow this  

    ×
    ×
    • Create New...