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?
Also Tee, I noticed the problem in Safari too. I put that menu shift in
there because IE was shifting them too far to the right and my fix helped in
IE and also Firefox on Windows and Mac, but now Safari is annoying me.
At this point, I decided I can live with it, but if you have an easy
solution I'd certainly be happy to hear it.
Thanks again for all the help.
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]
*******************************************************************
