[thelist] Padding Discrepancy

[Emma Jane Hogbin]

On Fri, Mar 21, 2003 at 12:09:18PM -0500, Michele Foster wrote:
> I've tried this and many other variations, but still no luck.  Do you (or anyone else) have any other suggestions?  David, do you have a sample available that I can look at?  As soon as I take out the 4px bottom padding, things look fine in NS7 but messed in IE, and reverse with that padding. 

As best I can tell you're targetting the wrong items in your CSS....you want 
to style the links IN .submenus, not the table cell with a class of submenus. 
Try this (it works in Phoenix and should work in IE -- famous last words).

All links are bold and in Verdana, so why not put them into a single link
rule? I try to put my most general things at the top of the page and then
tweak the styles at the bottom of the page as needed. (This is important
in your case as you have to define everything twice to get the right
styles into the sub-navigation.)
a {
	font-family: Verdana, Geneva, sans-serif;
	font-weight: bold;
}

You do want the padding here for the top (blue) bar, however you don't
want the bottom padding (yellow) in here, you want that in the links
(which have the correct background color). You also want the text-align:
center here. If you put it into .submenus a it won't center your text
relative to the table cell (it will center them relative to themselves
making them appear text-align: left).
.submenus {
        padding-top: 4px;
        text-align : center ;
}

Use the padding-left and padding-right instead of non-breaking spaces to
increase the space between menu items. If you don't want all of that space
to be colored on :hover, split it between padding (colored) and margin
(not colored). For padding and margin you can write the widths in pairs to
decrease the amount of typing. The margin specified below will be: top 0,
right 2px, bottom 0px, left 2px (work clockwise from the top). From a
screen-reader perspective you could use borders instead of | ... it's not
perfect because you end up with double width inbetween, but I can show you
how to fix that if you like what you see here. (You'd have to remove the
margin or set only the left or the right border and then style the last --
or first -- menu item individually.)
.submenus a {   
        color : #000059 ;
        padding-bottom : 4px ;
	padding-left: 2px; 
	padding-right: 2px;
	padding-top: 1px; 
	margin: 0px 2px;
	text-decoration: none;
	background: #ffd36c;
	color: #000059;
	border-right: 1px solid navy;
	border-left: 1px solid navy;
}

now add the specific colors to just the hover and active (link and visited
are already defined above):
.submenus a:hover, .submenus a:active {
	background: #ffd36c;
	color: #000059;
}

Hope that helps a little.

emma


-- 
Emma Jane Hogbin
[[ 416 417 2868 ][ www.xtrinsic.com ]]