By robhamm on

Obviously, I am doing something wrong here. I am trying to remove all padding, etcetera, around my header block only in a modification of BlueMarine. After determining the div id to be 9, I inserted the following after the other block styles in my css file.

#block-block-9 {
padding: 0 0 0 0;
border-bottom: 0;
padding-bottom: 0;
margin-bottom: 0;
margin-bottom: 0;
}

This works partially--it gets rid of the line at the bottom of the block--but I still have padding at the top and bottom. Examples are below. Please look at the top graphic on each example to see what I mean.

It looks like this: http://www.bluecrashkit.com/cheese/forums/general/blue_crash_kit_chatter

and I want it to looks like this (graphic pasted in directly): http://www.bluecrashkit.com/cheese/node

⋅ Categories: Drupal 4.7.x

Comments

nevets’s picture

nevets commented

First looking at the html for the block

<div class="block block-block" id="block-block-9">
    <h2 class="title"></h2>
    <div class="content"><p><p><a href="http://www.micfo.com/cgi-bin/affiliates/clickthru.cgi?id=hammro" target="_blank"><br />

<img src="//www.micfo.com/images/banners/8.gif" border="0"></a></p>
</p></div>
 </div>

You have some elements that are causing some of the space, some you should be able to take out by editing the block, some you will need to use css. The extra elements are the h2, the paragraph tags (p) and break (br). You should be able to remove the break and at least one of the paragraph tags.
The following css will then remove the rest of the spaces. I left the background-color rules in there as a pointer (you can remove them). By setting the background color of various elements you can visually see where the space is. There may be extra rules that are not needed. I just put in margin/padding statements till the extra space was gone. The display: none; for the h2 tag completely removes it from the browser.

#block-block-9 {
  background-color: red;
  padding: 0 0 0 0;
  border-bottom: 0;
  margin-top: 0;
  padding-top: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}
#block-block-9 .content {
  background-color: green;
  margin-top: 0;
  padding-top: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

#block-block-9 .content p{
  background-color: pink;
  margin-top: 0;
  padding-top: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}
robhamm’s picture

robhamm commented

That definitely got me on the right track. I ended up not altering my block.tpl.php file to take out the "extra" html because I wanted to leave all my other blocks the same, so I took your css and made a couple of modifications.

#block-block-9 {
padding: 0 0 0 0;
border-bottom: 0;
margin-top: 0;
padding-top: 0;
margin-bottom: 0;
padding-bottom: 0;
}
#block-block-9 .content {
margin-top: 0;
padding-top: 0;
margin-bottom: 0;
padding-bottom: 0;
}

#block-block-9 .content p{
font-size: 0;
margin-top: 0;
padding-top: 0;
margin-bottom: 0;
padding-bottom: 0;
}
#block-block-9 .title{
font-size: 0;
margin-top: 0;
padding-top: 0;
margin-bottom: 0;
padding-bottom: 0;
}

Again, thank you so much for the help. I feel like a dork for not seeing this sooner.

Rob Hamm
http://www.bluecrashkit.com
http://www.bookmuncher.com

danieltharris’s picture

danieltharris commented

If, at some point in the future you change the location, or order that blocks appear in - Will they still keep the same id? i.e block-block-9 or will the id change if the number of, order of, or location of blocks are changed?

Is this really the best way to style individual blocks, or should I build blocks with specific

tags and remove all default block styling?
nevets’s picture

nevets commented

As far as I know the block id stays the same even if you delete custom blocks. There are modules that let you add custom classes to each block.