Forum Moderators: not2easy
Sorry for such a newb question here, but this is what I'm working with. I'm working on a large information resource site and trying to make some modifications to the CSS. I really don't want to change the css markup on the HTML, but I"m having trouble figuring out how to do this just in CSS. Any help would be most appriciated!
What is happening is that I need equal spacing between all lines of the citation entry (including between paragraphs). The second entry in the citation however seems to have a larger default margin. That is making the second entry in the example have a double space.
I've fixed the problem in all browsers EXCEPT IE with a simple negative margin. I've also tried a position:relative and negative top setting, and again, it works in everything except IE. Help!
Here is the HTML in question:
<div class="example">
<p class="citation">Bishop, Karen Lynn. <u>Documenting Institutional
Identity: Strategic Writing in the IUPUI Comprehensive Campaign</u>. Blah blah blah blah</p>
<p class="citation">Bile, Jeffrey. <u>Ecology, Feminism, and a Revised
Critical Rhetoric: Toward a Dialectical Partnership.</u> Blah blah blah blah. </p>
</div>
Here is the current CSS
div.example p (line 81)
{
text-indent: 0px;
line-height: 2;
}
div.example p.citation (line 85)
{
line-height: 2;
padding-left: 25px;
text-indent: -25px;
}
/*Here is where I'm having the trouble */
p.citation + p.citation (line 151)
{
/*This is one solution....*/
position: relative;
top: -10px;
/* This was my second solution, also didn't work */
/*margin-top: -10px;*/
}
Any suggestions would be most appriciated. Thank you again so much! :)
-Dana
are you saying that you do not want any of the default spaces that appear between paragraphs?
if so
div.example p (margin: 0;}There shouldn't be any need to target just the second (or subsequent) paragraphs because the natural behaviour of collapsing margins between elements take care of this by default!
If you want a larger margin before the first paragraph/citation the add the margin to the whole "example" element/container, or add a class name to just the first paragraph and apply margin to it:
e.g.
div.citations {margin: 20px 0; border: 1px solid #000;}div.citations p {
margin: 0;
line-height: 2;
}<div class="citations">
<p>.....</p>
<p>.....</p>
</div>
sorry if I'm misunderstanding the question here, but this sounds like a case of less is more as default behaviour is taking care of most of it for you?
-Suzy
