IE Prob (of course)

[jerseydubs]

can't figure out how to make fix this. on mouseover, my navbar gets taller to accomodate my hover properties.

http://qualityjags.clarionwebdesign.com

here is the css:

body
	{
		width: 100%;
		height: auto;
		color: #000;
		margin: 0;
	}

/*Header tag (sets properties for title*****************************************************************/
div.header
	{
		float: left;
		height: auto;		
		width: 100%;
		margin-bottom: 5px;
		padding: 0;
	}
	
p.header
	{
		float: left;
		font-variant: small-caps;
		font-family: Arial;
		color: #c00;
		font-size: 150%;
		font-weight: bold;
		margin: 10px 0 0 5px;
	}
	
h1
	{
		float: right;
		text-align: right;
		font-family: Arial;
		font-variant: small-caps;
		font-weight: bold;
		color: #369;
		font-size: 250%;
		padding: 0;
		margin: 0 5px 0 0;		
	}
		
/*Primary ul tag (sets properties for area containing top nav bar)**********************************************/
ul.nav
	{
		float: left;
		height: 18px;
		width: 100%;
		background-color: #c00;
		margin: 0;
		padding: 4px 0 0 0;
		list-style-type: none;
		border-bottom: 1px solid #ccc;
	}

/*Primary li tag (sets properties for top nav links)*******************************************************/
li.nav 
	{
		display: block;
		float: left;
		font-family: Times;
		font-size: 90%;
	}

/*General link properties***************************************************************************************/	
a
	{
		font-family: Times;
		color: #000;
		text-decoration: none;
	}
	
a img
	{
		border: 0;
	} 

/*Top nav link properties***************************************************************************************/
a.menu 
	{
		font-size: 100%;
		float: left;
		text-decoration: none;
		border-right: solid 1px #000;
		padding: 0 10px 0 10px;
		color: #fff;
	}
	
a.menu:hover
	{
		position: relative;
		top: -4px;
		color: #000;
		background-color: #fff;
		height: 12px;
		padding: 4px 10px 0 10px;
	}

/*Link styles inside the main div element***********************************************************************/
a.main
	{
		font-family: Arial;
		text-decoration: none;
	}

a.main:link {color: #00c;}
a.main:visited {color: #c00;}
a.main:hover {color: #c00;}

/*Link styles for the footer area of the page*******************************************************************/
a.index
	{
		text-decoration: none;
	}
	
a.index:link
	{
		color: #fff;
		padding: 5px;
	}
a.index:visited {color: #000;}
a.index:hover
	{
		padding: 5px;
		color: #000;
		background-color: #fff;
	}

/*Link styles for the footer area of the page*******************************************************************/
a.footer
	{
		text-decoration: none;
	}
	
a.footer:link {color: #fff;}
a.footer:visited {color: #c00;}
a.footer:hover  {color: #f00;}
	
/*This element defines the center of the page*******************************************************************/
div.body
	{
		width: 100%;
		height: auto;
		padding: 10px 0 20px 0;
		float: left;
	}
	
/*Font def for promo box**********************************************************************************/
p.promo
	{	
		float: left;
		width: 220px;
		padding: 0 0 0 20px;
		font-family: Arial;
		font-size: 90%;
	}

/*Defs for index box**************************************************************************************/
div.index
	{
		
		width:100px;
		border: solid 2px #fff;
		background-color: #ccc;
		font-size: 85%;
		list-style: none;
		padding: 10px 0 10px 10px;
		text-decoration: none;
		margin: 10px 25px 10px 20px;
	}
	
/*Defs for listing boxes**************************************************************************************/
div.listcontainer
	{
		float: right;
		width: 570px;
		text-align: center;
		font-size: 85%;
		margin-top: 15px;
	}
	
div.leader
	{
		width: 548px;
		height: 21px;
		background-color: #369;
		color: #fff;
		font-family: Arial;
		font-size: 125%;
		border: solid 2px #000;
		margin: 0 0 0 20px;
		padding: 4px 5px 0 5px;
	}

div.listing
	{	
		
		width: 550px;
		height: 105px;
		border: solid 1px #000;
		background-color: #ccc;
		text-align: left;
		list-style: none;
		padding: 5px;
		text-decoration: none;
		margin: 10px 25px 0 20px;
	}
	
img.listing
	{
		float: left;
		padding: 2px 10px 0 2px;
	}
	
p.listing
	{
		margin: 0;
		height: 75px
		text-align: left;
	}

a.listing
	{
		float: right;
		padding-right: 5px;
	}
	
a.listing:link 
	{
		color: #fff;
		padding-right: 5px;
	}
	
a.listing:visited
	{
		color: #fff;
	}
	
a.listing:hover
	{
		color: #f00;
		padding-right: 5px;
	}

/*Map page display properties***********************************************************/
div.map
	{
		padding: 0;
		
	}
	
p.exdesc
	{
		text-align: left;
		margin: 10px;
	}
	
a.map
	{
		filter: alpha(opacity=50);
		opacity: .5;
	}
	
a.map:hover
	{
		filter: alpha(opacity=100);
		opacity: 1;
	}
	
a.button
	{
		margin-left: 20px;
		float: left;
		color: #000;
		background-color: #999;
		text-decoration: none;
		text-align: center;
		padding: 2px 15px 2px 15px;
		border-top: 2px solid #ccc;
		border-right: 2px solid #666;
		border-bottom: 2px solid #666;
		border-left: 2px solid #ccc;
	}
	
a.button:hover
	{
		color: #fff;
		background-color: #999;
		text-decoration: none;
		text-align: center;
		padding: 2px 15px 2px 15px;
		border-top: 2px solid #ccc;
		border-right: 2px solid #666;
		border-bottom: 2px solid #666;
		border-left: 2px solid #ccc;
	}
	
a.button:active
	{
		color: #fff;
		background-color: #999;
		text-decoration: none;
		text-align: center;
		padding: 2px 15px 2px 15px;
		border-top: 2px solid #666;
		border-right: 2px solid #ccc;
		border-bottom: 2px solid #ccc;
		border-left: 2px solid #666;
	}
		
/*Footer properties*********************************************************************************************/
div.footer
	{
		float: left;
		position: relative;
		background-color: #369;
		width: 100%;
		height: 25px;
		font-size: 12px;
		font-family: Times;
		text-align: center;
		margin: 0;
	}

[rincewind456]

The funny thing is it looks better in IE than in FF or Opera(where it looks particularily poor).
Try fixing the HTML and CSS errors then take a look at this for the IE problem http://www.positioniseverything.net/...reepxtest.html

[jerseydubs]

The funny thing is it looks better in IE than in FF or Opera(where it looks particularily poor).
Try fixing the HTML and CSS errors then take a look at this for the IE problem http://www.positioniseverything.net/...reepxtest.html

what html and css errors? i am laying this out on mac and it looks exactly how i want it to in opera and firefox. also, after checking out that link, i am not really sure how this issue applies to my problem. does ie apply +3 pixels in all directions of the text or just to the left or right?

[ray326]

what html and css errors?

http://validator.w3.org/check?verbos...webdesign.com/

[rincewind456]

what html and css errors? i am laying this out on mac and it looks exactly how i want it to in opera and firefox. also, after checking out that link, i am not really sure how this issue applies to my problem. does ie apply +3 pixels in all directions of the text or just to the left or right?

Well in Opera and FF on my PC the content is off to the right so far that you have to scroll horizontally for it, in Opera nothing lines up and the prices appear outside the box edges.

[jerseydubs]

http://validator.w3.org/check?verbos...webdesign.com/

i can't fix those errors because they don't exist in my html. i think Yahoo! (my web host) must insert html for their statistics collections i.e., site hits, retention, referrals, and commonly used os's and browsers. i will probably be leaving yahoo soon. i know, they are crap.

[jerseydubs]

Well in Opera and FF on my PC the content is off to the right so far that you have to scroll horizontally for it, in Opera nothing lines up and the prices appear outside the box edges.

i know what i am about to say may offend some of you but i am not concerned with anything other than IE/win right now. this is a very basic site for very basic users. i can almost garauntee that none of them are even aware of the existance of web browsers that are not called Internet Explorer or of the existance of Apple computers even.

so, back to my original question. does anyone have any idea why the nav bar in the site referrenced above (css code included above) stretches out to accomodate the hover but is regularly the proper size?

[Fang]

ul.nav
	{
		float: left;
		overflow:hidden;
		width: 100%;
		background-color: #c00;
		margin: 0;
		padding:0;
		list-style-type: none;
		border-bottom: 1px solid #ccc;
	}

a.menu 
	{
    	        margin-top:4px;
		font-size: 100%;
		float: left;
		text-decoration: none;
		border-right: solid 1px #000;
		padding: 0 10px;
		color: #fff;
	}
	
a.menu:hover
	{  
    	        margin-top:0;
		color: #000;
		background-color: #fff;
	}

[jbdzyne]

Did Fang's code solve your problem? (your answer may help me, thanks!)

[jerseydubs]

Did Fang's code solve your problem? (your answer may help me, thanks!)

i'm stuck with my laptop(mac) until tomorrow, but i will give it a wirl and let you know when i get to my office and i can test it on a pc.

[jerseydubs]

Did Fang's code solve your problem? (your answer may help me, thanks!)

yes, this works. thanks fang. if you leave the 4px margin in on the a.menu then the link text will sit in the bottom of the ul and appear to "pop up" on mouseover. i did not like that effect so i removed the margin and now it is a simple color change on the mouseover.

[jbdzyne]

Jersey, thanks for the update. Here's a very cool menu-bar I came across at A List Apart, from the designer of my Blog template, Douglas Bowman. Thought you might enjoy this one.