CSS - Please Help With Top Nav Alignment/spacing

I have a drop down menu that works great in Chrome but in IE 9 I am getting spaces between my images for my navigation bar. My HTML is as follows...

HTML
Code:

<ul id="nav">
<li><a href="#"><img src="../../images/global/header/home_btn.jpg" width="77" height="29" border="0" /></a>
<ul>
<li><a href="#" style="color:#000;">About Asthma</a></li>
<li><a href="#" style="color:#000;">Treatment</a></li>
<li><a href="#" style="color:#000;">Taking Control</a></li>
<li><a href="#" style="color:#000;">Lifestyle</a></li>
<li><a href="#" style="color:#000;">Resources & Support</a></li>
</ul></li>
<li><img src="../../images/global/header/spacer01.jpg" width="17" height="29" border="0" /></li>
<li><a href="#"><img src="../../images/global/header/kids_btn.jpg" width="66" height="29" border="0" /></a></li>
<li><img src="../../images/global/header/spacer01.jpg" width="17" height="29" border="0" /></li>
<li><a href="#"><img src="../../images/global/header/allergy_btn.jpg" width="67" height="29" border="0" /></a></li>
<li><img src="../../images/global/header/spacer01.jpg" width="17" height="29" border="0" /></li>
</ul></li></ul>

I have tried everything in my CSS to eliminate the spacing between the image files with no luck. Does anyone see what I am doing wrong here?

This is my first time ever working with CSS. I am trying to put together a site; however, I am havings some setbacks straight out of the gate. I am trying to get the navigation bar to align up against the header. How do I eliminate the spacing between the header and the navigation bar? I have tried the padding: 0; method with no luck. PLEASE HELP!

I am new to doing layouts in CSS and have a page (on an existing site) that I just did using CSS.

The problem that I am having is that the "content" div has unwanted space above and below the div. I have padding & margins set to zero for the content div.

Page is he http://www.prairieplugs.com/Sample1/sample1.htmlhttp://www.prairieplugs.com/Sample1/sample1.html

CSS is he
http://www.prairieplugs.com/Sample1...ieplugscss1.css

Below is the CSS that is applicable:

Code:

body {
	margin: 0px;
	padding: 0px;
	font-family: Verdana, Geneva, sans-serif;
	font-size: .9em;
	color: #000;
	background-color: #008F13;
	background-image: url(images/bgbottom.jpg);
	background-repeat: repeat-x;
	background-position: bottom;
	background-attachment: fixed;
}

#wrapper {
	width: 900px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 15px;
}

#wrapper #header {
	background-image: url(images/headerSamp1.jpg);
	margin: 0px;
	padding: 0px;
	height: 276px;
	background-repeat: no-repeat;
}
#wrapper #nav {
	background-color: #FFF;
	background-image: url(images/navSamp1.jpg);
	background-repeat: no-repeat;
	height: 60px;
	width: 900px;
	margin: 0px;
	padding: 0px;
	text-align: center;
}
#wrapper #content {
	background-image: url(images/contentSamp1.jpg);
	background-repeat: repeat-y;
	margin: 0px;
	width: 900px;
	background-color: #FFF;
	padding: 0px;
}
#wrapper #footer {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	background-repeat: no-repeat;
	height: 79px;
	background-color: #FFF;
	background-image: url(images/footerSamp1.jpg);
	margin: 0px;
	padding: 0px;
}
#wrapper #nav ul {
	margin: 0px;
	list-style-type: none;
	text-align: center;
	padding-top: 20px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	color: #060;
}
#wrapper #footer p {
	text-align: center;
	margin: 0px;
	padding-top: 25px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}

#wrapper #nav ul li {
	display: inline;
	border-right-width: 3px;
	border-right-style: solid;
	border-right-color: #000;
	font-size: 1.2em;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-variant: small-caps;
	padding-top: 0px;
	padding-right: 10px;
	padding-bottom: 0px;
	padding-left: 10px;
}
#wrapper #nav ul li.last {
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}

#wrapper #nav ul li a:visited {
	text-decoration: none;
}
#wrapper #nav ul li a:hover {
	color: #000;
	text-decoration: underline;
}

#wrapper #nav ul li a {
	text-decoration: none;
	color: #FFF;
}
#wrapper #content p {
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 1em;
	text-align: left;
	padding-top: 0px;
	padding-right: 10px;
	padding-bottom: 0px;
	padding-left: 15px;
}

Hi there, we have created the following list menu and we want to reduce the space between the left hand page margin, and the disc, at the 1st part of the text closer.

Example: This is what we see now.

| Text Here

Example: This is what we would like to see.

| Text Here

Any suggestions?

ul a, li a{
margin:0;
padding:0;
}

This is starting to bug me this problem, but on my site www.readinginfo.co.uk the background image (inner shadow and small gradient) at the top is playing up. It doesn't seem to want to align all the way over to the left, however as is always the way, it is working in firefox, ie7, 8 and safari. I've tried some of the ie6 fixes mentioned but I have the sneakiest of feelings that it is to do with the form element (the search box), positioning absolutely just bumps it over to the side. Thanks in advance for any reply!!

Hi Guys,

I am having a small problem with IE, the height between <p> tags is considerably different to that of firefox.

I think it is a padding problem but i am unable to crack it. The area i am referring to is the left side of the page where the two forms are and the images text.

my website is here

my css file can be found here


Any suggestions?

Hello everyone,

I was wondering if someone could take a look at http://jordanmeeter.com/wp-content/themes/focus-on-content-01/style.css and tell me why on http://jordanmeeter.com/about/ there is no spacing between the two paragraphs? I've looked and looked and looked in the CSS but I can't seem to figure it out!!!

Thanks,
Jordan

Nevermind, I fixed it.

Hi

I have a classic CSS:-

ul.none {
FONT-SIZE: 70%;
line-height: 10pt;
COLOR: #000000;
list-style-position: intside;
list-style-type: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
position:relative;
width:150px;
padding:10px;
text-align:center;
BACKGROUND-COLOR: #EDF5F5;
border: 1px solid #0000000;
}

AND THE HTML:-

<ul class="none">
<li>NEWS 1</li>
<li>NEWS 2</li>
<li>NEWS 3</li>
<li>NEWS 4</li>
<li>NEWS 5</li>
</ul>

I want to have a larger gap between each <li> item, without using a <p> or a <br>?

Line height or spacing does not work, it spaces out everything. E.g if the text in the <li> is longer than a line it makes this line higher, which means it looks well daft if you see what i mean. because everything is so spaced out.

Margin and Padding do not work for what i wish to achieve.

Could anyone Help please.

Hey all. I am attempting to create a memberlist type page for my website that has a list on the left and when clicked it shows the members information on the right. I have the positioning down and everything but the problem I am running into is how it displays in IE and Firefox. In Firefox my list looks exactly how I would like it to and works fine. In IE however, the png images i used for the "Memberlist Title" and the bottom rounded edges image appear a different color than the list items... . Also, when clicked the list item stays highlighted with the rollover color and I cant figure out why.
Here is my css its at bestinefight.net/memberlist.php
Code:

/* Memberlist */
#navcontainer { 
width: 210px;
margin-left:109px;
}

#navcontainer ul
{
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
}

#navcontainer a
{
display: block;
width: 200px;
background-color: #4B4535;
padding: 0px 0px 0px 10px;
border: 0;
}

#navcontainer a:link, #navlist a:visited
{
font-size:10px;
color: #dbdfaa;
text-decoration: none;
border: 0;
padding: 0px 0px 0px 10px;
outline:none;
}

#navcontainer a:hover, #navlist a:active
{
font-size:10px;
background-color: #8B8063;
color: #dbdfaa;
border: 0;
text-decoration:none;
outline:none;
}

#profile_holder {
background-image:url(profile.png);
background-position:top;
background-repeat:no-repeat;
width:300px;
height:200px;
float:right;
margin-right:30px;
}

#profile {
width:260px;
height:180px;
margin: 40px auto;
}

#memberlist {
width:250px;
height:300px;
float:left;
}

#memberlist_title {
background-image:url(memberlist.png);
width:228px;
height:31px;
margin-left:100px;
}

#memberlist_bottom {
background-image:url(memberlist_bot.png);
height:21px;
width:210px;
margin-left:109px;
}

Here is the code for my page.

Code:

<div id="memberlist"><div id="memberlist_title"></div><div id="navcontainer">
<ul id="navlist">
<li><a href="#">Aslad</a></li>
<li><a href="#">Bilos</a></li>

<li><a href="javascript:ajaxpage('memberlist/Boustij.php', 'profile');">Boustij</a></li>
<li><a href="#">Brak</a></li>
<li><a href="#">Cydian</a></li>
<li><a href="#">Diablo</a></li>
<li><a href="#">Equilibruim</a></li>
<li><a href="#">Cydian</a></li>
<li><a href="#">Faller</a></li>
<li><a href="#">GoOsE</a></li>
<li><a href="#">Melik</a></li>

<li><a href="javascript:ajaxpage('memberlist/Mika.php', 'profile');">Mika</a></li>
<li><a href="#">Nekos</a></li>
<li><a href="#">Normanalata</a></li>
<li><a href="#">O'rian</a></li>
<li><a href="#">Pooga</a></li>
<li><a href="#">Romu'lis</a></li>
<li><a href="#">Sena</a></li>
<li><a href="#">Tepor</a></li>
</ul>

</div>
<div id="memberlist_bottom"></div>
</div>
<div id="profile_holder"><div id="profile"></div></div>

I am trying to build out this site
http://realitysol.com/index.php#

In IE it shows up fine. In Firefox there is a space above the navigation Panel.

Any help would be appreciated.

Below is the CSS used for the navigation Section.
Code:

#navibg {
	background-image: url(../images/navibg.jpg);
	width: 500px;
	height: 40px;
	background-repeat: repeat-x;
}

#headerImg {
	height: 250px;
	width: 500px;
}

#navcontainer ul li
{
	list-style-type: none;
	margin: 0;
	display: block;
	float: left;
	background: url(../images/navi-normal.jpg) repeat-x 20px;
	font: 10px/20px "Lucida Grande", verdana, sans-serif;
	text-align: center;

}

#navcontainer a
{
	color: #000;
	text-decoration: none;
	display: block;
	width: 70px;
	border: 1px solid #666666;


}

#navcontainer li#active { background: url(../images/navi-hover.jpg) repeat-x 20px; }
#navcontainer a:hover { background: url(../images/navi-hover.jpg) repeat-x 20px; }
#navcontainer {
	margin-top: 10px;
	margin-left: 30px;

}

I have a division on my web page. I've set the width to 800 and the height to 100.

Inside of the division I have 3 nested divisions

The first holds a logo and is positioned absolutely within the wrapping division so that it appears on the left side. The division has a background image and the word "HTML" that is centered both vertically and horizontally within the nested division.

The second nested division is positioned so that the text within it appears in the upper right of the wrapper.

The third nested division is positioned so that the text displays in the lower right hand.

The problem is that in IE I am getting alot of white space between the bottom of the wrapper and the bottom of the third nested division.

This does not happen in firefox.

Can anyone tell me what is hapening here.

hello all,

I have been working on a web site that is constructed 99% using divs and CSS. I have a unwanted space that is appearing in the main image in Internet Explorer on PC. MAc IE, Safari, Mozilla (PC), etc. work fine.

Can someone see what is happening...I hope so!

You can see the site at www.obsign.com

Here is the code that I am working with:

Code:

<body>


<script language=JavaScript>
function Navigate() {
var number = NavSelect.selectedIndex;
location.href = NavSelect.options[number].value; }

</script>
<table class="boundaries">
	<tr>
		<td class="vertical">

			<center>
			<div id="site">
			<div class="padding">
			<div class="navigation"><div class="navigation">
		
	<a href="index.php?id=2&sid=5c19320a27327c185d6699bf516e47ea" onmouseover="changeImage('about.jpg','customizations/uploadedmedia/images_navigation/about_over.jpg');" onmouseout="changeImage('about.jpg','customizations/uploadedmedia/images_navigation/about.jpg');"><img name="about.jpg" alt="About Us" src="customizations/uploadedmedia/images_navigation/about.jpg" 
	width="94" height="30" border="0" /></a><a href="index.php?id=4&sid=5c19320a27327c185d6699bf516e47ea" onmouseover="changeImage('services.jpg','customizations/uploadedmedia/images_navigation/services_over.jpg');" onmouseout="changeImage('services.jpg','customizations/uploadedmedia/images_navigation/services.jpg');"><img name="services.jpg" alt="Services" src="customizations/uploadedmedia/images_navigation/services.jpg" 
	width="94" height="30" border="0" /></a><a href="index.php?id=6&sid=5c19320a27327c185d6699bf516e47ea" onmouseover="changeImage('resources.jpg','customizations/uploadedmedia/images_navigation/resources_over.jpg');" onmouseout="changeImage('resources.jpg','customizations/uploadedmedia/images_navigation/resources.jpg');"><img name="resources.jpg" alt="Resources" src="customizations/uploadedmedia/images_navigation/resources.jpg" 
	width="94" height="30" border="0" /></a><a href="index.php?id=8&sid=5c19320a27327c185d6699bf516e47ea" onmouseover="changeImage('contact.jpg','customizations/uploadedmedia/images_navigation/contact_over.jpg');" onmouseout="changeImage('contact.jpg','customizations/uploadedmedia/images_navigation/contact.jpg');"><img name="contact.jpg" alt="Contact" src="customizations/uploadedmedia/images_navigation/contact.jpg" 
	width="94" height="30" border="0" /></a>

</div>			
	


</div><div class="locations"><img alt="Cincinnati, Ohio  -  Cleveland, Ohio  -  Austin, Texas" src="customizations/safeharbor/templates/images/locations.jpg" 
	width="362" height="30" border="0" /></div><div class="clear"></div><div class="logo"><img src="customizations/safeharbor/templates/images/logo.jpg" 
	width="195" height="281" border="0" /></div><div class="image"><div class="main_1"><img name="width='533px' height='237px'" alt="The Safe Harbor Group, LLC" src="customizations/safeharbor/templates/images/main_1.jpg" 
	width="533" height="237" border="0" /><br><img name="width='278px' height='21px'" alt="The Safe Harbor Group, LLC" src="customizations/safeharbor/templates/images/main_2.jpg" 
	width="278" height="21" border="0" /><select style="vertical-align:top; padding:0px; border:0px; margin:0px; width:189px;" name="NavSelect" onChange="Navigate(this.form)"><option value="" SELECTED>Choose the Solution for You:<option value="#">Option 1<option value="about:blank">Option 2<option value="#">Option 3</select><img name="width='66px' height='21px'" alt="The Safe Harbor Group, LLC" src="customizations/safeharbor/templates/images/main_3.jpg" 
	width="66" height="21" border="0" /><br><img name="width='533px' height='22px'" alt="The Safe Harbor Group, LLC" src="customizations/safeharbor/templates/images/main_4.jpg" 
	width="533" height="22" border="0" /></div></div>
			<div class=""><h1>HOME&nbsp;BODY</h1>
<p class="general_text">Now that you have installed the system, please proceed to customize and populate with content.</p></div>
			</div>
			</div>
			</center>

		</td>
	</tr>
</table></body>
</body>

</html>

Code:

html {
	width:100%;
	height:100%;
}

body {
	width:100%;
	height:100%;
	margin:0px;
	padding:0px;
	background-image: url('http://www.obsign.com/customizations/safeharbor/templates/images/bg.jpg');
	background-repeat:repeat
}

img {
	margin-bottom: 0px;
}


#site {
	text-align:left;
    width:770px;
	padding:0px;
	border:0px;
	margin:0px;
	background:#ffffff;
	border:1px solid #CFC9C0;
}

table {
    font-size: 100%;
}

a.breadcrumb {
    color: #444444;
    font-family: Verdana, Helvetica, Arial, sans-serif;
    text-decoration:none;
}

a.breadcrumb:visited {
    color: #888888;
    font-family: Verdana, Helvetica, Arial, sans-serif;
    text-decoration:none;
}

ul {
	margin-bottom:5px;
	margin-top:5px;
	padding:0px;
	border:0px none;
	list-style-type:square; list-style-image:url('/uploadedobjects/images/bullet.gif')
}

li {
	padding-top:3px;
}

.text_highlight {
	background: #FDFD00;
	color: #000000;
}

.clear {
	clear:both;
}

.gentext {
    font: normal 110% Tahoma, Verdana, Arial, Arial Narrow, sans-serif;
    color:#666666;
}

.gentext a {
    font: normal 110% Tahoma, Verdana, Arial, Arial Narrow, sans-serif;
    color:#666666;
}

input.liteoption	{
	background: #efefef;
	font: normal 100% Verdana, Arial, Arial Narrow, sans-serif;
	color:#444444;
	text-align:center;
	padding: 1px;
	border: 1px solid #dddddd;
	border-bottom: 1px solid #aaaaaa;
	border-right: 1px solid #aaaaaa;
}

input.searchoption	{
	font: bold 100% Verdana, Helvetica, Arial, sans-serif;
	background-color : #eeeeee;
	color : #000000;
	border: 1px solid #000000;
}

input.text {
	font: normal 105% Verdana, Helvetica, Arial, sans-serif;
	border: 1px solid #dddddd;
	border-top: 1px solid #aaaaaa;
	border-left: 1px solid #aaaaaa;
}

select {
	font: normal 100% Verdana, Helvetica, Arial, sans-serif;
	color: #000000;
}

.form_label {
	font:bold 100% Verdana, Helvetica, Arial, sans-serif;
	display:inline;
	color:#000000;
}


.search_text{
	font:normal 9px Verdana, Helvetica, Arial, sans-serif;
	color:#000000;
	border-top:#000000;
	border-left:#000000;
}

.boundaries {
	width:100%;
	height:99%;
}

.vertical {
	vertical-align:middle;
}

.padding{
	padding:16px;
}

.navigation{
    border:0px;
	margin:0px;
	float:left;
	width:376px;
}

.locations{
    border:0px;
	margin:0px;
	float:right;
	width:362px;
}

.logo{
	padding:10px 10px 10px 0px;
	float:left;
    border:0px;
	margin:0px;
}

.image {
	padding:10px 0px 10px 0px;
    border:0px;
	margin:0px;
}

.main_1{
	float:right;
	background:#EAE3DB;
    border:0px;
	white-space:nowrap;
	margin:0px;
	padding:0px;
}

as is common with divs is the auto return at the bottom of them... i have this CSS page...

http://defunctgames.com/helpfix/page1.htm

the only problem with it is the space underneath "All Websites: Reviewed!"

here is the original HTML version of this section..

http://defunctgames.com/helpfix/page2.htm

can you please help me get the same exact result as the HTML version thanks.

I have a bar of links at the top of the site I am doing. The person I am doing it for wants certain things up there. Well the links wrap because the spacing is all off and I can't for the life of me figure it out.

alwaysprepared.org <--- You can see the links all messed up at the top.

pastebin.com/bjygRLvw <-----Here is the CSS and the stuff for the bar is at around line 455