Jump to content

Back to the scrolling issues


sarina28

Recommended Posts

I thought I had my scrolling issues solved thanks to advice of many. I added another drop down, and the scroll bars re-appeared. It will go away when I hover over contact. I have tried everything, but no success. I looked of all the code that was used to correct the first time this happened. I only see it in IE7. IE6 and Firefox looks fine.

 

ww w.dmt port al.n et/dmt_csssite /layou thome2 .htm

 

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:165px;

width:905px;

margin-bottom:-7px;

}

 

/* Navbar division */

#navbar{

display:block;

width:910px;

height:26px;

margin-left:5px;

padding-top:1px;

 

}

 

#navbar li li{

float:none;

}

 

 

/*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 12px;

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:2px;

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;

display:inline;

margin-left:49px;

margin-top:12px;

 

}

 

#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 45px;

color:#fff;

font-size:12pt;

margin-right:13px;

margin-left:300px;

padding:44px;

padding-left:130px;

}

 

span.lbl {

float: left;

display: block;

width: 8em;

}

 

 

#content img{

display:block;

display:inline;

margin-bottom:23px;

padding-right:70px;

margin-top:-37px;

 

}

 

/* 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:46px;

padding-bottom:12px;

 

}

 

#footer p{

color:#fff;

font-size:7pt;

line-height:12px;

}

Link to comment
Share on other sites

Add the closing tag to th efirst li tag (as I mentioned last time!):-

  •  

    Your li tag images total 905 px; your #wrapper is 910px but #navbar is 910px plus margin-left: 5px totalling 915px so edit this to:-

    #navbar{

    display:block;

    width:905px;/*910px;*/

    height:26px;

    margin-left:5px;

    padding-top:1px;

    }

     

    Neither of the above were causing the scrollbar in IE7, which can be cured by deleting the position: absolute here:-

     

    #navbar li ul{

    /*position:absolute;*/

    z-index:100;

    visibility:hidden;

    }

     

    Add this (not essential, just a safety measure):-

     

    #navbar ul, #navbar li, #navbar ul ul, #navbar li li { margin: 0; padding: 0; }

  • Link to comment
    Share on other sites

    Deleting the position absolute worked in IE7, but he following issues came up.

     

    IE7 - there is a small gap between the navbar and the top of the drop down. It would seem to be an easy fix, except it would not fix the other browser issues below.

     

    IE6 - the drop down overlaps the navbar

     

    Firefox and Opera - They both have the small gap above the drop down, and the image on the left and the content text is pushed down on the page.

     

    My instructor told me that this would be a complicated layout for my first time, but why start easy.

    Link to comment
    Share on other sites

    Can you go back to the original site that you got the code from and start again? You've probably edited it too much now and left something out.

     

    I don't ever use the dropdown menus that have lots of conditional comments and tables for IE6; they seem messy and out of date; you can get much more modern menu templates from here:-

    http://www.cssplay.co.uk/menus/

    Link to comment
    Share on other sites

    Of all of the css based menus, "suckerfish" is probably my favorite (or, more recently, the jquery version "superfish": http://users.tpg.com.au/j_birch/plugins/superfish/). It uses simple, semantic code (nested lists) and will work with or without modern javascript on modern browsers, while IE6 needs a small snippet of javascript to get the same effect.

     

    http://htmldog.com/articles/suckerfish/dropdowns/

    Link to comment
    Share on other sites

    I've rehashed it here:-

    http://w'>http://w ww.wickham43.com/forumposts/sarinalayouthome2090121b.html

    and the css file here

    http://w ww.wickham43.com/forumposts/sarinalayoutstyles090121b.css

     

    But it really has been hacked about and I won't accept the quality for one of my sites, but it works in IE6, IE7, Firefox, Opera and Safari and has no horizontal scrollbar in IE7.

    Link to comment
    Share on other sites

    Thanks for working on it. I will have to study what you have done. I was given another idea by a co-worker. He suggested an if statement. I tried it, but id did not work. I also tried and if statment to switch style sheets when viewed only in ie7. I read you can switch style sheets for certain browsers. I could not get it to switch.

     

    I have this:

     

     

     

    I copied the same style sheet, but used this in the ie7 style sheet:

     

    /* Drop-down menu styles */

    #navbar li ul{

    /*position:absolute;*/

    z-index:100;

    visibility:hidden;

    }

     

    This was suggested earlier, and it worked well only in ie7. The other browsers had postition isssues. So I thought I could apply to the alternate style sheet only. I hope I'm making sense.

    Link to comment
    Share on other sites

    You don't need separate stylesheets if only a few styles are different.

     

    This code you show above

     

    is a stylesheet inside a conditional comment which only applies to IE7

     

    I used two conditional comments in my version, but not enclosing a separate stylesheet, just a few different styles between tags inside the conditional comments. It saves creating a separate file.

    Edited by Wickham
    Link to comment
    Share on other sites

    I tried just inserting only the ie7 style in the , but it did not work either.

     

    This style is in my style sheet:

     

    /* Drop-down menu styles */

    #navbar li ul{

    position:absolute;

    z-index:100;

    visibility:hidden;

    }

     

    I used this in my :

     

    /* Drop-down menu styles */

    #navbar li ul{

    /*position:absolute;*/

    z-index:100;

    visibility:hidden;

    }

     

    When I used the style externaly with the deleted position:absolute;, it fixed my ie7 problem, but effected the firefox and ie6. I figured by appling only to ie 7 in the , it would solve my problem. I 'm not sure if I'm supposed to repeat the same style with the ie7 changes, or just part of it. Also, I was told it has to fall just after the external style sheet in the head. I have in for. I tried adding it before and after it, and had different effects. However, it did not do what I wanted.

    Link to comment
    Share on other sites

    The conditional statements should be after the main stylesheet link, as you were told.

     

    Look at the head section of my example. Remember that there is a space between IE and 7

     

    gte means greater than or equal to and lte means less than or equal to.

     

    Set the main stylesheet to work in Firefox (and it will probably be OK in Opera and Safari) then put only the minum styles in the conditional comment; if you have a style in the main stylesheet which has width, height, color, padding and margins but only the margin needs to be different in IE7, then only put that in the conditional comment. Any further styles in the markup div tags, etc. (inline styles) will take precedence over any styles in stylesheet or conditional comments.

     

    If you have several conditional comments, say for IE6 and IE7 like I have, they can be in any order as long as both are after the main stylesheet link.

    Link to comment
    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...
    ×
    ×
    • Create New...