PDA

View Full Version : Cannot adjust margins between <p>'s



ladydi1984
Mar 30th, 2011, 02:49 AM
I have a very simple page with a left menu column (http://www.sparklements.com/interior.html), and for some reason I just cannot tighten up the spacing between the <p>'s in the left column (the "Item #1" etc)...setting both margins and padding to 0 has no effect. Its driving me crazy! Currently its in a <blockquote> which I thought was the problem but removing the <blockquote> doesn't help. Any ideas? Here's the style sheet:


body {
font-family:Arial, Helvetica, sans-serif;
background-color:#c0e1e6;
margin:0;
padding:0;
}

#wrapper {
overflow:auto;
}

#top {
background-image:url(homepage-top.gif);
background-repeat:no-repeat;
height:108px;
display:block;
}

.colorbar-top {
height:38px;
background-image:url(colorbar-top.gif);
background-repeat:repeat-x;
}

.colorbar-bottom {
height:22px;
background-image:url(colorbar-bottom.gif);
background-repeat:repeat-x;
}

.maincontent {
background-color:#FFF;
background-image:url(homepage-centerbkg.jpg);
background-repeat:no-repeat;
background-position:top left;
height:293px;
margin:0;
padding:0;
}

.interiorcontent {
background-color:#fff;
margin:0;
padding:20px;
overflow:auto;
}

.leftmenu {
float:left;
width:170px;
font-size:14px;
font-weight:bold;
padding:0 10px 0 10px;
}

.rightcolumn {
border-left-color:#c0e1e6;
border-left-style:solid;
border-left-width:1px;
margin-left:200px;
padding:0 0 0 25px;
}

a {
color:#0072b1;
text-decoration:none;
font-weight:bold;
}

.bluetext {
color:#0072b1;
font-weight:bold;
}

.footer {
font-size:11px;
color:#FFF;
margin:0 100px 10px 100px;
padding:10px;
float:right;
}

.goldtext {
color:#FF9C00;
}

.graytext {
color:#C1C1C1;
}

.smalltext {
font-size:10px;
color:#B4B4B4;
}

.clear {
clear:both;
}

teedoff
Mar 30th, 2011, 03:26 AM
Well I only see one paragraph on the page you linked. Now if your wanting to remove some of the space above then thats controlled by the padding on interiorContent div.

ladydi1984
Mar 30th, 2011, 03:27 AM
It's the "Items" on the left that I want to tighten up, not the right one...

teedoff
Mar 30th, 2011, 03:35 AM
Why not put those Items in an unordered list. They're much easier to control. But, I think if you just add a global style rule with 0 margins and paddings, then they will tighten up.

Add:


* {margin:0; padding:0;}
To your stylesheet.

Again, they shouuld be in a list though to probably save you some more headaches down the line.

Candygirl
Mar 30th, 2011, 04:23 PM
Hello,


.leftmenu p {
margin:0;
}


.leftmenu blockquote p {
margin:0;
}
should work.

But as teedoff said you should use an unordered list for your menu.
The blockquote element is for a long quotation. It seems there is no sense to use it here. Just use some padding-left if you want to push the text to the right.

teedoff
Mar 30th, 2011, 04:29 PM
Hello,


.leftmenu p {
margin:0;
}


.leftmenu blockquote p {
margin:0;
}
should work.

But as teedoff said you should use an unordered list for your menu.
The blockquote element is for a long quotation. It seems there is no sense to use it here. Just use some padding-left if you want to push the text to the right.

Yes this will do the trick. I suggested adding the global rule which I add to all my pages so that you start out with the same margin and padding settings for all browsers.
Different elements have different default margins and paddings in different browsers.