I'm using a variant of Kubrick and can't figure out how to tighten up the space between node elements (headline and teaser or headline and node body). I've removed all the top margins and padding in CSS and still have what looks like a full line between node elements and I want them to butt together. Further, I want the links and metadata to snug up against either the teaser or the body as well.
If I modify the
attributes in css, it tightens all the line spacing up and that's not what I want. I've tried doing negative top- bottom margins (doesn't work). I've tried changing linespacing in h3 and h2 heads -- no luck. I've tried playing with the code in page.tpl but that's not doing it. I've tried reading through the includes api's to get a clue, but no dice.
Anyone have any suggestions on where to look for an answer?
Comments
RESOLVED: Add new css class and redefine p
I had to create a new css class called
<nodebody>then add a sub class that makes the first paragraph in that class display inline (that is, no linefeed prior to the first paragraph).Works with IE, though?
I don't think p:first-child works with IE, though, so it only is a partial solution.
--
http://www.grownwithoutschooling.com
So true.. IE doesn't support
So true.. IE doesn't support it as usual. On a related note, this site has some great info. I've learned so much in a short period thanks to this site. It's more on selectors but that's key on narrowing down which selectors are going to affect whichever element.
http://css.maxdesign.com.au/selectutorial/
-joon
www.dvessel.com
I run across this a lot with
I run across this a lot with headlines. The tricky thing with headlines is that there are usually so many factors. The best way to flush it out is to find out is to do something like put a 1px red border around all headlines, paragraphs and divs so you at least know which element owns the space. Until then, it could be anything from line-height on the h1 to top-margin on the p that follows.
Then its a matter of zeroing out all margins and padding, and even line-height until you find what collapses the space. Keep your eye on line-height though.
Another good thing to do is disable the drupal.css to see if it still happens. If it clears up, then you know there's a rule somewhere in the drupal.css that is out-specifying you.
-zach
--
harkey design
: z
Followup...
After butting my head against the Kubrick theme for one client, I realized that a better solution (for me, for here on out) is to start with the phptemplate version of BlueMarine. I think the css is much better organized, and gives more granular control of most elements. However, the biggest drawbacks I have found relate to Block heads and contents. I'm fooling around with those a lot, but I'm really liking BlueMarine these days (even though it uses tables).
I have the same problem
I have the same problem with just about every theme I use. I have pulled out my hair messing with the CSS trying to get this to work but to no avail. If someone finds out a universal solution to this I would love to know. Until then I'm just going to use a line to try to hide some of the space.
Post some code
Post a sample of the rendered html code here for us to look at. There many little things that cause these issues, for example some modules output these stupid, hack
<br class="clear" />tags. If you can't get rid of them you can remove them from the presentation through your style.css (i.e.br.clear { display: none; }.But definitely post your code.
-zach
--
harkey design
: z
For me, getting rid of this
For me, getting rid of this line in /misc/drupal.css worked:
.node-form .standard {
clear: both;
}
I also noticed that I had
I also noticed that I had this problem with my profile section. This was easily fixed by removing the .profile version of the above CSS code.