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]
*******************************************************************
