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: wsg@webstandardsgroup.org > 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: wsg@webstandardsgroup.org >> 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] *******************************************************************
