Thanks for all your help so far. I am, however, having what I hope is one last problem. Everything seems to be working great, however the JavaScript I used to make the drop down menu work in IE6 seems to cause the page to no longer validate.
Is there anything that can be done about this? The site is http://www.bremenhospital.org/testsite/index2.html so you don't have to scroll through all the previous responses to find it. Thanks! Chris Rahe Executive Director of Marketing and Development 1020 High Road - P. O. Box 8 Bremen, IN 46506 Telephone 574.546.8011 Facsimile 574.546.4312 Email - [EMAIL PROTECTED] -----Original Message----- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Stuart Foulstone Sent: Monday, April 02, 2007 4:08 PM To: [email protected] Subject: RE: [WSG] Need help with CSS breadcrumbs and navigation Hi, I'm not sure If I'm looking at the same problem as you, but isn't the height of the top navigation bar set in #navBar (rather than #navigation)? Apologies if I'm mistaken and this is nonsense. Stuart On Mon, April 2, 2007 3:27 pm, Chris Rahe wrote: > That's great! I've made some changes and I think this design is almost > there. > > But I can't seem to adjust the height of that top navigation bar. Does > anyone know why there seems to be so much extra height? I even tried > specifying 20 px in the #navigation, but that didn't budge it. > > Thanks! > > Chris Rahe > Executive Director of Marketing and Development > 1020 High Road - P. O. Box 8 > Bremen, IN 46506 > Telephone 574.546.8011 > Facsimile 574.546.4312 > Email - [EMAIL PROTECTED] > > > > > -----Original Message----- > From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On > Behalf Of Stuart Foulstone > Sent: Sunday, April 01, 2007 4:42 AM > To: [email protected] > Subject: RE: [WSG] Need help with CSS breadcrumbs and navigation > > Hi Chris, > > This problem also seems to go away if you move the "mainNav" div to > immediately before the "content" div, e.g. > > <div id="mainNav"> > <img src="images/home_surgery.jpg" alt="Outpatient Surgery Photo" > width="150" /> > </div> > <div id="content"> ... > > > So its looks like the problem lies with div positioning and/or floats. > > It might be best to rethink your implementation of the content bit of the > website, from the beginning. > > Yours, > > Stuart > > On Fri, March 30, 2007 1:54 pm, Chris Rahe wrote: >> Thanks so much Tee, and everyone else who offered suggestions. Some of >> the >> flaws that turned up were my misguided efforts to compensate for the >> weird >> behavior. >> >> The new breadcrumbs look much better, but I'm noticing an odd behavior >> in >> IE7. When I mouse over the breadcrumbs the footer suddenly shifts up and >> over the body text. Then shifts back down when I mouse over the >> navigation >> menu. >> >> What's up with that? >> > . > . > . >> Chris Rahe >> Executive Director of Marketing and Development >> 1020 High Road - P. O. Box 8 >> Bremen, IN 46506 >> Telephone 574.546.8011 >> Facsimile 574.546.4312 >> Email - [EMAIL PROTECTED] >> >> >> >> >> -----Original Message----- >> From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] >> On >> Behalf Of Tee G. Peng >> Sent: Friday, March 30, 2007 5:13 AM >> To: [email protected] >> Subject: Re: [WSG] Need help with CSS breadcrumbs and navigation >> >> >> On Mar 30, 2007, at 12:53 AM, Stuart Foulstone wrote: >> >>> Hi, >>> >>> I would suggest you use a line-height greater than 2pt in #breadcrumb. >>> >>> Stuart >>> >> Hi Chris, >> >> Stuart's suggestion is good, however I do think there are more >> underlying problem in your code that needs to fix. >> >> To begin with, you may want to add this rule in your CSS. >> * {margin:0; padding:0} >> >> Because headings and other html tags have their default top/bottom >> margins and paddings, by using an universal declaration, you are >> removing the default margins/paddings. You then adding your desired >> paddings/margins in the id and classes selectors directly. >> >> Be aware that the universal declaration is a double-edged sword, >> somewhere down the road when you are more comfortable doing CSS and >> code for more complex CSS layout, you may find it not so good but >> getting into your way all the time, but for now... I think it's good >> for your layout. >> >> Your breadcrumb declaration is a bit heavy and some are unnecessary: >> #breadcrumb { >> font-family: Arial, Helvetica, sans-serif; >> font-size: 10pt; >> color: #FFFFFF; >> background-color: #666600; >> width: 100%; >> height: auto; >> position: relative; >> list-style: none; >> float: left; >> line-height: 2pt; >> } >> #breadcrumb ul { >> list-style-type: none; >> } >> #breadcrumb li { >> float: left; >> margin-right: 1em; >> padding-bottom: 10px; >> } >> >> >> I will slim it down to this: >> >> #breadcrumb { >> font-family: Arial, Helvetica, sans-serif; >> font-size: 10pt; >> color: #FFFFFF; >> background-color: #666600; >> width: 100%; >> } >> >> >> You don't need the last 5 declarations in the #breadcrumb. Only >> declare 'list-style' in the 'ul' and 'ol', as for float, there is no >> point for it when you have only one column of content to go in a >> block. 'position' here will require 10 pages of A4 paper for me to >> explain, even if I bother to do so, you will end up more confusing, >> so I will skip it :) Declare line-height in the 'li' instead. >> >> >> #breadcrumb ul { >> list-style-type: none; >> margin:0; padding:0 /* if you don't want universal declaration, then >> >> you must zero out paddings and margins here */ >> >> } >> #breadcrumb li { >> display: inline; /* here you can choose to use display: inline or >> float: left - personally I favor inline because the breadcrumb is >> just a run-in text to me */ >> padding: 0 20px; /* note that when display:inline is used, the top >> >> and bottom padding won't work because now your breadcrumb is "inline" >> element. Our list dad Russ wrote an excellent article about it: >> http://maxdesign.com.au/presentation/inline */ >> line-height: 30px /* 30px pleases my eyes, but it's fine with me if >> you want something higher or lower */ >> } >> >> Also, the position of your drop-down navigation behaves erracticlly: >> in Safari. It shifted to the left, about 80px nears the menu before >> it, for example, I hover on 'Hospital Services", the zero position of >> the X axis of drop-down starst somewhere between Home and Emergency; >> in Firefox, it starts from the 'p' word in 'HosPital'. >> >> >> Another thing, you may like to pick up CSS shorthand to slim down >> your style sheet, the obvious example is you can use this in the >> #breadcrumb >> >> #breadcrumb { >> font: 10pt Arial, Helvetica, sans-serif; >> color: #FFFFFF; >> background-color: #666600; >> width: 100%; >> } >> >> Hope this helps a bit >> >> tee >> >> >> >> ******************************************************************* >> List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm >> Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm >> Help: [EMAIL PROTECTED] >> ******************************************************************* >> >> >> >> ******************************************************************* >> List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm >> Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm >> Help: [EMAIL PROTECTED] >> ******************************************************************* >> >> > > > -- > Stuart Foulstone. > http://www.bigeasyweb.co.uk > BigEasy Web Design > 69 Flockton Court > Rockingham Street > Sheffield > S1 4EB > > Tel. 07751 413451 > > > ******************************************************************* > List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm > Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm > Help: [EMAIL PROTECTED] > ******************************************************************* > > > > ******************************************************************* > List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm > Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm > Help: [EMAIL PROTECTED] > ******************************************************************* > > -- Stuart Foulstone. http://www.bigeasyweb.co.uk BigEasy Web Design 69 Flockton Court Rockingham Street Sheffield S1 4EB Tel. 07751 413451 ******************************************************************* List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ******************************************************************* ******************************************************************* List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *******************************************************************
