border formatting lost in parent containing nested list and div

I am completely stumped. I have <div id="nav-wrap> that is formatted to have a bottom border. I have a nested list and div that are floated left and right respectively.

The bottom-border is not presenting correctly. In IE it appears below an extra line. in Firefox, it appears at the top.

help!

see http://www.relisoft.com/test.index.htm


here's the stylesheet for the page:
/* CSS Document */

body
{
margin: 0;
width: 850px;
}

/* adjustment for IE5 */

body {
font-size: x-small; /* IE5 Win */
voice-family: "\"}\"";
voice-family: inherit;
font-size: small;
}
html>body { /* be nice to Opera */
font-size: small;
}

#heading
{
width: 100%;
margin: 0;
background-color: #E4C872;
border: 1px #000000 solid;
}

#heading em
{
margin: 35px 0 0 220px;
position:absolute;
font-style: normal;
font-family:Arial, Helvetica, sans-serif;
font-size: 87%;
font-weight: normal;
}

#mainnav
{
margin: 0;
padding: 0;
float: left;
list-style: none;
background:ffffff;
font-family:Arial, Helvetica, sans-serif;
font-size: 110%;
font-weight: bold;
}

#nav_wrap
{
margin: 0;
width: 100%;
padding: 0px;
border-bottom: #000000 thick solid;
}

.nav_home
{
margin: 0;
float:left;
padding: 3px 8px;
display: block;
color:#FFFFFF;
background-color: #000000;
}
.nav_home_select
{
margin: 0;
float:left;
padding: 3px 10px;
display: block;
color:#FFFFFF;
border-right: #FFFFFF thin solid;
}

.nav_coop
{
margin: 0;
float:left;
padding: 3px 10px;
display: block;
color: #CC6600;
border-right: #000 thin solid;

}
.nav_c
{
margin: 0;
float:left;
padding: 3px 10px;
display: block;
color: #5D855D;
border-right: #000 thin solid;
}
.nav_other
{
margin: 0;
float:left;
padding: 3px 10px;
display: block;
color:#508CD4;
border-right: #000 thin solid;
}

#search
{
clear: both;
padding: 0px;
margin: 0;
float: right;
}

 

Presumably the syntax error was only made in this post? (a missing ")

The URL you posted is not working, please try again, it would be easier to advise you with the full code to hand

 

oops. SOrry for my carelessness. The missing quote was a typo in the post. And, here's the link to the page:

http://www.relisoft.com/test/

i have made some changes to the stylesheet which i have below. My page seems to appear fine in IE. In Firefox, the bottom border still appears above when it should appear below.

I have determined that it has something to do with the search Form because if i remove the search form and place text instead, everything renders fine.

see http://www.relisoft.com/test/alt_index.html

here are the changes i made to my style sheet.

#nav_wrap
{
margin: 0;
width: 100%;
padding: 0px;
border-bottom: #000000 thick solid;
min-height: 20px;
}

#search
{
padding: 0px;
margin: 0;
float: right;
}

form#search, input
{
padding: 0;
margin: 0;
}

 

Try putting the image dimensions within your img tags for the logo

 

Works in IE, Opera and FF ...

css..

/* CSS Document */

body
{
	margin: 0;
	width: 850px;
	padding: 0px;
}

/* adjustment for IE5 */

body {
	font-size: x-small; /* IE5 Win */
  	voice-family: "\"}\""; 
  	voice-family: inherit;
  	font-size: small;
	}
html>body { /* be nice to Opera */
	font-size: small;
	}
	
#heading
{
width: 100%;
margin: 0;
background-color: #E4C872;
border: 1px #000000 solid;
}

#heading em
{
	margin: 35px 0 0 220px;
	position:absolute;
	font-style: normal;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 87%;
	font-weight: normal;
}

#mainnav
{
	float: left;
	list-style: none;
	background:ffffff;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 110%;
	font-weight: bold;
	padding: 0px;
	margin: 0px;
	border-bottom-width: thick;
	border-bottom-style: solid;
	border-bottom-color: #000000;
	width: 100%;
	position: relative;
}
.nav_home
{
	margin: 0;
	float:left;
	padding: 4px 8px;
	display: block;
	color:#FFFFFF;
	background-color: #000000;
}
.nav_home_select
{
	margin: 0;
	float:left;
	padding: 3px 10px;
	display: block;
	color:#FFFFFF;
	border-right: #FFFFFF thin solid;
}

.nav_coop
{
	margin: 0;
	float:left;
	padding: 4px 10px;
	display: block;
	color: #CC6600;
	border-right: #000 thin solid;

}
.nav_c
{
	margin: 0;
	float:left;
	padding: 4px 10px;
	display: block;
	color: #5D855D;
	border-right: #000 thin solid;
}
.nav_other
{
	margin: 0;
	float:left;
	padding: 4px 10px;
	display: block;
	color:#508CD4;
	border-right: #000 thin solid;
}

.search
{
	padding: 0px;
	margin: 0;
	float: right;
}

form#search, input
{
	padding: 0;
	margin: 0;
	display: inline;
 }

Code (markup):

html...

Why not put the #navwrap in your style sheet though?

Please don't wait for explanations, they will take longer than the code

Good luck with your site

 

Giving #nav_wrap (gawd, I hate underscores. What's wrong with #nav-wrap? ) a width triggers hasLayout in IE, which means it will enclose the floats in spite of the specs. Adding {overflow: hidden;} or {display: table;} or {float: left | right;} will cause modern browser to enclose the floats, all within the rules.

You could also do

#nav_wrap:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    font-size: 0;
    visibility: hidden;
    }

Code (markup):

I have made an enclosing float elements demo which will show you how these things work.

cheers,

gary

 

I can't thank both of you enough! Thank you I still have a lot to learn and your suggestions and demo are helping me along the way.
cheers!!
deb