CSS - No Spacing Inbetween <p>

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

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

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!

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!

On this page: http://www.poweredpages.com/newtarget/ctia/ there's an spacing problem in IE. Hover over one of the links on the main bar to get the sub link tray. Hover over the first two links in a vertical set, and it will work fine. Hover over the THIRD link, and in that link and any link below it there's extra padding on the top of it. But all these links have the exact same CSS associated with them. Very odd. Works fine in FF.

Here's the code and the CSS:

Code:

<div id="showtray" class="tray" onmouseout="hide('showtray','linkinfo')" onmouseover="show('showtray','linkinfo')">
	<div class="traynav">
		<ul>
			<li><a href="/info/">General Information</a></li>
			<li><a href="/info/registration_packages.cfm">Registration Prices & Policies</a></li>
			<li><a href="/info/keynote_sessions.cfm">Keynote Sessions</a></li>
			<li><a href="/exhibit/">Exhibit Floor</a></li>
			<li><a href="/info/ed_sessions.cfm">CTIA Educational Sessions</a></li>
		</ul>
	</div>
	<!-- 5 links to a column ONLY!  Any more and start a new column, lke this one -->
	<div class="traynav">
		<ul>
			<li><a href="/info/seminars.cfm">Partner Seminars</a></li>
			<li><a href="/info/green.cfm">Green Practices</a></li>
			<li><a href="http://www.ctia.org/conventions_events/convinfo/info.cfm">Receive Information</a></li>
			<li><a href="/info/international.cfm">International Guests</a></li>
		</ul>
	</div>		
	<div class="trayimage whitetext smalltext"><img src="images/show.jpg"><br />Stars of the Show</div>					
</div>

Code:

.tray{
position:absolute;
z-index:500;
top:30px; 
left:0px;
visibility:hidden;
background-image:url(../images/blackback.png);
width:920px;
height:130px;
border-bottom:3px solid #4CADCE;
padding:20px
}
.traynav{
	float:left;
	padding-right:15px;
}
.traynav ul{
	margin: 0px;
	list-style-type: none;
	padding: 0px;
	clear: both;
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	border-top: 1px dotted #c2dae2;
}
.traynav ul li{
	list-style-type: none;
	padding: 0px;
	clear: both;
	border-bottom: 1px dotted #c2dae2;
	font-size:11px;
	margin:0px;
	width:200px
}
.traynav li a:link, .traynav li a:visited {
	color: #FFFFFF;
	display: block;
	background-image: url(../images/arrow_orange.gif);
	background-position: 4px 7px;
	background-repeat: no-repeat;
	padding-top: 5px;
	padding-right: 8px;
	padding-bottom: 5px;
	padding-left: 15px;
	text-decoration: none;
}
.traynav li a:hover, .traynav li a:active {
	background-color:#4cadcf;
}
.trayimage{
	float:left
}
.trayimage img{
	border: 1px dotted #c2dae2;
}

Thanks

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>

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.

Hello!

I have three a footer, with 3 nav word groupins..ie, join our newsletter, site map, about me....i need to space them evenly across the bottom of the footer - one on the left, one to the right and one in the center, using CSS. I'm a newbie to CSS. =) so bear with me.....i jsut don't know what piece of code i'm looking for! do i set a margin for the class style and on the middle word have it have so much of a margin to the left and right? or padding? or ....there's so much to choose from, i'm not quite sure what's the best (read easiest) solution to get them apart.

help?

thanks!

carrie

is there a way to control the pixel amount a br will space in IE and FF so it's the same distance or is there just an issue in my css causing extra space?

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.

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

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

In both Firefox and IE some of the larger advertisements at the top overlap the content. In IE only, the margin on the bottom of the page does not show up at all.

The website is http://www.socialplay.com.

Please provide help if you know what's wrong.

Thanks.

I am unable to get ride of the spacing which firefox and IE is doing with <img ...>.
I used margin=0 padding=0 and boarder=0 but still there is a spacing remaining.
i.e. when i put 2 images rigth following, between these 2 images is a spacing, while I want that they are just hitting each other.
can anyone help me?

Code:

example:
<table width="100%" border=0 cellspacing=0 cellpadding=0>
<tr><td><img scr="..." alt="..."></td></tr>
<tr><td><img scr="..." alt="..."></td></tr>

there is spacing between these images even i set the following in the CSS:
 table {margin:0;padding:0;}
 tr {margin:0;padding:0;}
 td {margin:0;padding:0;}
 img {margin:0;padding:0;}

when i put the <img ...> inside <p> commands (below example), then IE shows the images without spaceing (what i want), BUT firefox still has this spaceing between images. i am totaly unable to get ride of those sppaces

Code:

<p><img ...></p>
<p><img ...></p>

and in css:
 p {margin:0;padding:0;}
 img {margin:0;padding:0;}