Notes from the underground!

Main menu

Tag Archives: css

Recently, while designing a site in Drupal using the theme acquia prosper (awesome theme, very customizable, gives a lot of control without you needing to go deep into theme css files or sub-theming), I just happened to fumble upon a few things that just wouldn’t go away.. ah the hours wasted! Well if this can help someone, I’d be very happy.

1. FCKEditor loves to add <p> tags. Problem becomes even worse if you are making a block with only an image in it and FCKEditor just won’t let you take that <p> tag out. Of course you can disable FCKeditor and enter everything manually, but I’m sure we will all agree that FCKEditor along with IMCE just makes life a lot easier when adding images to the site. One solution is to configure the FCKEditor module so that on <Enter> it adds a <br /> tag instead of a <p> tag. The other solution ties in with the second problem below

2. Even without FCKEditor, when you go and check your site on IE, you see the block is just not positioned properly! What’s going on? You check the source and you find a <p> tag AGAIN around the image! What the? If you create a block with the intent of only including a simple image tag in the code (or anything besides text), Drupal will surround your code with paragraph tags. The tags, by default, come along with a 1em margin on both top and bottom — right, while Firefox may show your design properly, IE definitely doesn’t. Solution? You can always just put a small code in the CSS file. In my case, with Acquia prosper (and Skinr module), I was able to add a custom CSS class to the block which then was defined in the local.css file:

.custom-css-name p{
margin:0;}

So that works. You can also try a CSS override in the following manner: #your-block-id p { margin: 0; }

Or finally, you can always create a new block input type that doesn’t convert spaces into unwanted tags. Basically a new input format that will have the following property unchecked:

Converts line breaks into HTML (i.e. <br> and <p> tags).

I hope this helps if you have also run across this problem … ah that pesky <p> tag that just won’t go away!

If you create a block with the intent of only including a simple image tag in the code (or anything besides text), Drupal will surround your code with paragraph tags. The tags, by default, come along with a 1em margin on both top and bottom,