Trouble with borders

HTML & CSS
1

Why is it that when I try to add this red border, my entire header disappears?!


#header{
	position: relative;
	z-index: 3;
	clear: both;
	width: 100%;
	padding: 0;
	border-top: 60px solid #F00;
		/* Compensates for negative margin in Wrapper
			which was used to make way for Footer. */
	background: #E6E6FF;	
	color: #000;
	border: 1px solid #FF0000;		/* CAUSING HEADER TO DISAPPEAR! */
}



<div id="wrapper" class="clearfix">
	<div id="inner">
		<div id="header">
			<!-- DROP-DOWN MENU -->
			<ul id="nav">
				<li class="current"><a href="#">News</a>
					<ul>
						<li><a href="#">Breaking</a></li>
						<li><a href="#">Local</a></li>
						<li><a href="#">U.S.</a></li>
						<li><a href="#">World</a></li>
					</ul>
				</li>

I have some other related questions about borders not working how I’d expect, but this needs to be fixed first.

Thanks,

Debbie

2

your setting the border-top: then further down the CSS youre setting border:

so the second border (which applies to all sides) will take over erasing your 60px previously set.

 
border-width: 60px 1px 1px 1px;
border-style: solid;
border-color: red;
3

DUH!!!

Okay, that takes care of one issue! (Thanks!)

Debbie

4

Before I ask my other border related issues, let me ask this…

I have a Top Menu that is about 1/2 the width of my screen. It is left aligned. It has Dropdown Submenus for each main item. And the main menu is wrapped in a #header div.

Attached is a screenshot that will likely help. (Mods please approve soon!)

What would look best as far as borders (or not)?

I was going to put an outside dark blue border around #header, right dark blue borders around each #nav, and then outside borders around my dropdowns making sure no borders double-up.

This is trickier to do since I have the menu in a wrapper DIV.

I was having issues with the style that I applied to #nav LI traveling down to the submenu items (#nav li ul li) which I don’t think should happen?!

[b]But the first questions need to be…

1.) Would borders make my Top Menu/Sub-Menu look better?

2.) If so, where should the borders go?[/b]

Hope that makes sense, and do check out my screenshot that is attached.

Thanks,

Debbie