CSS - Spacing Between Elements

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;
}

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!

Thanks for taking the time to read my question.

The contents in my .ContentContainer are positioned differently in IE6 and FF. I want them to look like FF. What is wrong with my CSS that makes IE6 have more space on the left side of the green globe than FF?

My goal is to have the 2 blue vertical lines line up. They line up in FF and IE7, but not in IE6.

www.scopicdesigns.com/ZoneAll/index.htm

Thanks,

Brad

Hi Guys

I am having trouble trying to work out a bug that is creating a space between two div containers. To see what i mean click here for web page the css can be viewed here

in firefox the two containers appear correctly but in internet explorer there is a 10px space between them.

Could it have something to do with the background images? The div containing the login form also drops down in ie and i am convinced this is related to the main problem i am facing.

Does anyone have any ideas as to what the problem is.

Any help would be much appreciated!

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 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!!

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.

Well, I am stumped as they say. I have a horizontal menu bar which I am unable to get it to display with the same amount of space above and below it with IE and firefox. So if you would take a look at this page
http://www.cacct.com/new/mission.php
and here is the style sheet http://www.cacct.com/new/css/sitestyle.css

The menu content is called by a php include. Notice the difference between IE and firefox. What I would like is the same amount of light blue above and below.
Things I have tried...
Adjusting the padding and margins to header and maincontent.

Tried placing the menu bar in a div but in Firefox the bar actually hangs over the bottom edge of the div. I put a border around the div so I could see it. In IE it is contained within the div (though it is a bit too long for a single line there so wraps around). This probably wouldn't work anyway since the menu is a drop down and needs to overlap the maincontent.

Just to look at it, I moved the menu bar up to different places. Inside the header below the address still same problem. Between the logo and address same problem. When I move it to the top, above the logo it appears to be the same distance from the top of the border.

So, anyone have any ideas on how to get that spacing the same?

tk

I'm stumbling through learning CSS with the help of some great people (here and elsewhere), and I've almost got a complete, working template, but I'm having a problem with (surprise) IE.

I'm using nav boxes on the left and the right, and within the nav boxes I'm using unordered lists to define the menu options. In Firefox it works perfectly, in IE it adds an additional space to the bottom of each list item. Does anyone have any clue what's going on? I've tried to define the margins to 0, but that doesn't seem to do anything.

http://www.mcconaha.com/css_refined.php
http://www.mcconaha.com/css_refined.css

Code:

     <div class="navbox">
        <h3>Navigation</h3>

        <ul>
          <li><a href="#">. News</a></li>
          <li><a href="#">. Junk</a></li>
          <li><a href="#">. Pics</a></li>
          <li><a href="#">. Downloads</a></li>
		  <li><a href="#">. Links</a></li>
        </ul>
      </div><!-- end navbox -->

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

Hi all - I've got an issue and hoping someone has an idea how to help.

I'm trying to correct an alignment issue within a page only using css - without modifying the code.

What I have is a DIV with a SPAN and an INPUT box inside. The INPUT box should be set at 100% and aligned to the right. However, the SPAN section causes the textbox to scoot over outside of the div. How can I set the INPUT box to 100%, and stay within the DIV?

I'd like to share an image to show you what I mean, but apparently since I'm new - I cannot do that.

Any help would be greatly appreciated.

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.

In IE, there is a space between my div's. Can someone help me fix it?

Attached is a sample htm and graphics or see he
PHP Code:
<div id="red" align="center">
    <img src="red.gif" width="500" height="100">
</div>
<div id="blue" align="center">
    <img src="blue.gif" width="500" height="100">
</div> 





Thanks.