sarina28 Posted January 21, 2009 Report Share Posted January 21, 2009 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; } Quote Link to comment Share on other sites More sharing options...
Wickham Posted January 21, 2009 Report Share Posted January 21, 2009 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; } Quote Link to comment Share on other sites More sharing options...
sarina28 Posted January 21, 2009 Author Report Share Posted January 21, 2009 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. Quote Link to comment Share on other sites More sharing options...
Wickham Posted January 22, 2009 Report Share Posted January 22, 2009 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/ Quote Link to comment Share on other sites More sharing options...
falkencreative Posted January 22, 2009 Report Share Posted January 22, 2009 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/ Quote Link to comment Share on other sites More sharing options...
Wickham Posted January 22, 2009 Report Share Posted January 22, 2009 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. Quote Link to comment Share on other sites More sharing options...
sarina28 Posted January 24, 2009 Author Report Share Posted January 24, 2009 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. Quote Link to comment Share on other sites More sharing options...
Wickham Posted January 24, 2009 Report Share Posted January 24, 2009 (edited) 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 January 24, 2009 by Wickham Quote Link to comment Share on other sites More sharing options...
sarina28 Posted January 24, 2009 Author Report Share Posted January 24, 2009 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. Quote Link to comment Share on other sites More sharing options...
Wickham Posted January 24, 2009 Report Share Posted January 24, 2009 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. Quote Link to comment Share on other sites More sharing options...
sarina28 Posted January 24, 2009 Author Report Share Posted January 24, 2009 I'm getting closer. IE7 is good. IE6 is almost there. I'm having a small issue with the bottom of the content image cutting off. I'm can't tell if the footer is cutting it off or not. But I'm getting there. I will work on firefox next. Quote Link to comment Share on other sites More sharing options...
Andrea Posted January 24, 2009 Report Share Posted January 24, 2009 I will work on firefox next.You have it backwards - fix it for the compliant browsers (like FX) first, THEN worry about the yIkesE browser Quote Link to comment Share on other sites More sharing options...
sarina28 Posted January 26, 2009 Author Report Share Posted January 26, 2009 Got it! Next subject? lol Thanks for all your help. htt p://dmt portal .net/dmt_csssite/layouthome3.htm Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.