Newbie questions: what happens to <sup>? Force equal height doesn't work?

Events happening in the community are now at Drupal community events on www.drupal.org.
lukasho's picture

Hi,

sorry for the very basic questions: I'm using the latest Respond sub-theme and encounter the following things

1) In some content I use the <sup> and <sub> tags. Although they give the desired output in a basic theme such as Bartic, they don't seem to do anything in Respond. Why? And how can I "reactivate" them?

2) In the configuration of the Postscript Zone I ticked Force equal height for all child elements, but the blocks that I added in in the 4 regions are not rendered with the same hight, although their content is nearly the same size. What can I do?

Thanks a lot for your help!

Comments

bump

lukasho's picture

can anyone help with this? Would be just great. Thanks :)

The sup and sub tags

jebbushell's picture

The sup and sub tags...

...are purely html. If they are present in view source then they should work unless a) your browser is faulty or b) some javascript or css has clobbered their effect. So:

  1. Are they present in view source? if not then why not?
  2. Is there any applicable css? Remove it all. Any difference?
  3. Disable javascript. Any difference?
  4. View the page through more than one browser, e.g IE8, Chrome, Chromium, Firefox. Any difference?

If all else fails, forget the sub and sup tags and do it all in css. Google "sup or css" for how.

The block heights...

... need to be checked in Firebug. Do they all have exactly the same height, padding, and margin in their computed css? (Which can be computed incorrectly sometimes, it has to be said.) Is there any text overflow issue?

Sorry about the multiple edits. Those tags messed me up something rotten.

thanks for your help! -> yes

lukasho's picture

thanks for your help!

  1. -> yes it's in source
  2. -> yes, it seems to be the following statement in alpha-reset.css that causes this:
    applet, object, iframe, blockquote, pre, abbr, acronym, address, big, cite, code,
    del, dfn, font, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var,
    b, u, i, center, dl, dt, dd, caption, fieldset, form, label, legend {
      margin: 0;
      padding: 0;
      border: 0;
      outline: 0;
      font-size: 100%;
      vertical-align: baseline;
      font: inherit;
    }

If I uncheck alpha-reset.css in the theme settings then sub and sup work fine. However, it appears to be sufficient to remove the font-size, vertical-align and font statements for the sub and sup tags. So maybe something like that should be changed in the Omega base theme?

About the block heights: the regions have the same padding and margins but don't have the same heights in firebug. But also the content of the block doesn't have the same height. In my case the blocks contain a few lines of text/links each. But not all of them the same number of lines, and even more, when going from wide to normal to narrow some lines get broken and so some blocks get a line more than others. I was hoping that "force equal height for all elements" means that the blocks that have "shorter" content will simply acquire some empty space in the end to make the regions the same size and fit nicely optically. Is it not that what it is supposed to be doing? (Sorry, I don't have the time to go through the code to find out.)

thanks again =)

It looks like you have the

jebbushell's picture

It looks like you have the sup/sub issue controlled. The alpha-reset.css entry you quote doesn't look right to me. Maybe you can file an issue for it. Anyway, you appear to have control.

I'm not an expert so I can't comment on exactly how the "force equal height" instruction is supposed to be implemented but I think it likely that it's by style. If you can either find or create a div that wraps all your 4 items then you have a way forward (set their heights to 100%). Failing that I'm out of ideas that don't need javascript.

Time for an expert opinion. Anyone?

yes the sup/sub issue is

lukasho's picture

yes the sup/sub issue is under control and I will file an issue at some point soon.

With setting heights to 100% I can't manage to get the blocks to equal height. I tried things like

div.equal-height-element.region-inner {
  height: 100%;
}

and similar directives that won't work. Anyone any clue?

Omega Framework

Group organizers

Group notifications

This group offers an RSS feed. Or subscribe to these personalized, sitewide feeds: