By Raymondo on

I've got a page with a table in it. There is a very large gap between the table and the preceding paragraph. How can I reduce this to some sensible proportion? The documant looks quite ridiculous the way it is.
Each paragraph is enclosed in its p tag. There was also an unsightly gap between section headings and the paragraph immediately after. I reduced those by giving the h tag no bottom margin and the following p tag no top margin. Inelegant to be sure, but it worked. I've tried all sorts of combinations for margins with the table and the preceding paragraph but the large gap stubbornly remains.
Any suggestion?

Comments

John Hwang’s picture

John Hwang commented

Actually, CSS is the best way to handle this issue. Any other way would be hard coding and that's not maintainable.

A few tips to remember while working with drupal's themes/look&feel.

1) Drupal has a default CSS that is included with every theme... It's pretty comprehensive, but it also means that it defines many things that you might not expect or be aware of. It's in the misc directory and it's called drupal.css. Make sure you're aware of the default settings and override/replace as necessary. Personally, I like to remove the default drupal.css from my themes and start from scratch. But that's because I have an well organized CSS framework that I've built which pretty much covers every aspect of a site...

which leads me to my second point...

2) Try to create a collection/library of CSS that adequately covers all the elements of your site. You should know enough about HTML/CSS to understand what the default look/behavior are and your CSS framework should have a definition for all everything... If you don't do it, either drupal's default css file will or the default style defined in your browser will have it... This maybe overkill, but if you're doing web development/design, it's probably a good idea to do this. Once you do it, you'll be able to tweak for all future projects/themes...

by framework I mean... several CSS style sheets that specify the style of various HTML elements and drupal specific componetns.

e.g.

global.css
common.css
layout.css
nav.css
typography.css
forums.css
node.css
blocks.css
flexinode.css
image.cscs
modules.css
print.css

tangent’s picture

tangent commented

Is this a browser specific issue or do you see this in all browsers?

If the latter then the simplest way to troubleshoot layout problems is to use Firefox's Dom Inspector. Get that installed if you don't have it already.It is sometimes difficult to determine which selector is causing the issue and this is where the Dom Inspector comes in handy.

Load up the page in Dom Inspector, find the node you want to inspect (perhaps the p or the table) in the left pane and in the right pane view the "computed style." Examine the margin, padding, and any other values that might cause the issue and see what they are set at. Then switch to the "css style rules" view and you can examine all the selectors that are active on that node. Look at each one and you should be able to determine which selector is applying the value that is being applied.

Good luck.

Raymondo’s picture

Raymondo commented

Thanks to both of you.
I'm using the bluemarine theme though I've tweaked it a little, adding styles for things peculiar to this site. It's from the bluemarine style sheet that I've been trying to control the layout.
Some CSS doesn't work. For example, h3+p {attribute:value} According to the heirarchy tree I've got, these are siblings, ie, same level, so in theory the above should work. I guess not all browsers support it though.
Sound advice John. I confess to not being conversant enough with CSS. I'm in the process of remedying that sorry situation. Thanks for the pointer about drupal's default style sheet. I'll take a look.
And thanks tangent for that tip about Firefox's DOM inspector. The layout looks the same in Firefox and IE so I'll certainly give DOM a go.

zirvap’s picture

zirvap commented

I had a similar problem. I copied some HTML tables from my old static site, pasted them into a new page in my Drupal site, ticked the "Full HTML, lines and paragraphs break automatically" radio button -- and got huge gaps above the tables.

The HTML looked something like:

<table>
<tr>
<td>content</td>
<td>more content</td>
...and so on

...so the filter inserted a line break after "table", a new line break after "tr" and so on.

My solution was to create a new input format (admin >> input formats) with HTML without automatic line breaks.

interestingmildly’s picture

interestingmildly commented

If you don't put each line of html onto it's own line, the problem is solved so:

<table>
<tr>
<td>content</td>
<td>more content</td>

would become:

<table><tr><td>content</td><td>more content</td>

and the spaces are gone.