Center content shifting down

Like the look but I am having the same issue . That is the centre content breaks in the middle of the second item and does not start till the bottom of the left column . I know nothing about style sheets so can't really make any changes . Also for a news portal it would be great to get three columns so you can fit more into the screen real estate

I've had to add the following to my stylesheet (style.css), in order to fix things in FF and IE:

.node-form .standard { 
  clear:none;
  width: 98%;
}

I have the Event module installed; it had major layout problems with the calendar view as well as the basic event node entry form (dropping down below the right and left blocks).

My fix involved similar tweaks for the event-specific forms:

/* event calendar fixes for IE */
/* fix strange overflow problem with event calendar in IE */
/* IE-only; fix min-height on event calendars (should migrate this to event calendar event.css)*/
/* for Internet Explorer */
/*\*/
.event-calendar table, .event-calendar .list-view {
  width: 98%; 
}
.event-empty {
  height: 6em; 
}
/**/

I put these in style.css as well; I suppose I could have put them in the event module's event.css, but since this issue seems to be specific to the News Portal theme, style.css seems to be the appropriate place for these mods.

Also, note the IE-only hack above with the CSS comments. I copied that verbatim from resources found on the web. There are many ways to get IE-only tweaks into CSS, and they are readily found on the web, so I'll not bother describing it here.

ARGHHH i was working on this theme and had it so the centre content was fluid if blocks on one or both sides were not present (i.e it would expand the space). I had everything nearly complete except on state tabs (my tabs functioned the same way as this one) and like a wally i wrote over the directory with this one (godda hate those early morning without coffee situations).

Anyway the centre content is to do with the floats and you can rectify this easily by positioning these blocks absolutely.

replace

#left_side {
  margin-top: 10px;
  float: left;
  width: 160px;
  background: #F1F6FE url('images/side_bg.gif') bottom left repeat-x;
}

#right_side {
  margin-top: 10px;
  float: right;
  width: 160px;
  background: #F1F6FE url('images/side_bg.gif') bottom left repeat-x;
}

with

#left_side {
  margin-top: 10px;
  position: absolute;
  width: 160px;
  top 30px;
  left: 20px;
  padding 70px 10px 10px 10px;
  width: 160px;
  background: #F1F6FE url('images/side_bg.gif') bottom left repeat-x;
}

#right_side {
  margin-top: 10px;
  position: absolute;
  width: 160px;
  top 30px;
  right: 20px;
  padding 70px 10px 10px 10px;
  background: #F1F6FE url('images/side_bg.gif') bottom left repeat-x;
}

desm0n, that's excellent - I've not tried it yet, but if that works the way I expect, this will have the added benefit of allowing me to tweak the theme to put the main content above the sidebars in the page.tpl.php file - great for SEO (this is also known as 'source ordered' content, IIRC.)

I was tinkering with this over the weekend, but had better things to do, so I just did a few hacks to fix the issues I had with flatforum's use of <br class="clear"&gr; - my hack was to tweak node-forum.tpl.php to introduce a new wrapper div:

<div class="forum-comment-container">

<div class="comment forum-comment blah blah blah...
...

</div>

around the main node-forum.tpl content output, and to add a css tweak to style.css:

.forum-comment-container br.clear { clear:none; }

- fixing yet another content type that breaks (the content ends up way down the page, below the sidebars.) This seems to be a recurring problem with some content, and I've had to tweak this theme's style.css file a number of times as I've discovered problems with a new module's content, so, if the positioning changes listed above work as expected, I might be able to rever to the stock style.css (which would be fantastic.)

I really like this theme, and have some other enhancements I'll be submitting for consideration.

-Mike

desm0n, this mod worked - sort of - the only snag is that the footer section is not at the bottom of the sidebars - it's at the bottom of the center column's content - doesn't look quite right, and the footer content is obscured by long sidebars.

Yes the footer isn't quite dynamic this way but i'm sure i can implement a fix. I'll do my best to look at this tommorrow and if i find a solution i'll post it here.

Sorry guys my CSS isn't quite strong enough to find a workable solution to the footer issue. I'll keep trying but using absolute its not working well with the footer in IE.

I'll probably tinker with it over the next few days. I'm no CSS whiz, either, but I know how to tackle the problem.

Thanks for working on this!

I really appreciate the work being done on this template. I'm using the template on one of my other projects and absolutely love its simplicity...I would help if I could.

I like this theme - a lot. I'm using it on a new community portal site. You can track my progress with the theme on Amadorable.com (I just put it online yesterday - be gentle!)

Anyway, I'm tweaking this theme in a few places, because it is missing a few bits here and there.

Interesting. I see you stuck with the floats, something i decided myself is needed, but you have the center content working now.

I'm curious how. I notice your css you have commented out /* margin-left: 180px; */
/* margin-right: 180px; */ in the #content class. was that the main issue ?

Well, I've not had time to play with the absolute-positioned version suggested above, other than to see that it needed some work. I'll 'stick' with the float version as long as it works. I keep finding minor problems with content dropping down below the sidebars; the latest problem is with user profiles (/user/2, /user/3, etc.) - the history info is way down the bottom of the page. This is very frustrating, to say the least.

You can check out the current css file if you want to know what I'm doing. I've tweaked the php files a bit, but nothing major.

Perhaps there is a more general-purpose solution to this problem... dunno why so many things break.

What i can't understand is that the problems exist in the first place.

I've tried editing another 3 column css theme and get the same results as this one, with the space in the middle. The theme works perfectly well without inserting into drupal which leads me to believe its one of the DIVS that is being used for the content that is offsetting the content.

Regarding the earlier question about my commenting out the margin-right: and margin-left: attributes in the #content definition: no, that was done because I've tweaked the page.tpl.php file to assign css class depending on whether or not there are right or left sidebars. If you look near the bottom of the style.css file, you see:

/* mjc: support smart styling of main #content div depending on presence of left or right borders (see page.tpl.php) */
.content-leftborder { margin-left: 180px; }
.content-rightborder { margin-right: 180px; }
.content-noleftborder { }
.content-norightborder {  }

I've modified page.tpl.php to add the following function:

  /* mjc: get a class string for the #content div, depending on the sidebar status */
  function _getMainContentClass($sidebar_left, $sidebar_right)
  {
    $cs = 'class=\'';
    $cs .= $sidebar_left ? 'content-leftborder ' : 'content-noleftborder ';
    $cs .= $sidebar_right ? 'content-rightborder ' : 'content-norightborder ';
    $cs .= '\'';
    return $cs;
  }

And, when rendering the main content div, page.tpl.php calls that function to get the css ID for the div:

...
...
  <div id="content" <?php print _getMainContentClass($sidebar_left, $sidebar_right); ?> >
    <div><?php print $header ?></div>
    <?php if ($mission) { ?><div class="featurebox_center"><?php print $mission ?></div><?php } ?>
    <?php print $breadcrumb ?>
    <h3><?php print $title ?></h3>
    <div class="tabs"><?php print $tabs ?></div>
    <?php print $help ?>
    <?php print $messages ?>
    <?php print $content; ?>
  </div>

The goal here is to eliminate the margins at the left or right side of the main content, if there is no left or right sidebar. (The original css had hard-coded margins for the main content, which prevents the theme from using the full width of the window when there is no sidebar.)

Please note that this is all experimental, and in no way represents a 'best practice' - I am fairly new to Drupal, and don't know if there is a more 'drupal-friendly' way to do this (using theming or hooks or what have you). In fact, after I started dinking with this, I found the following: http://drupal.org/node/78400 which does similar things depending on conditions. The author asks if there is a better way to implement this kind of thing, and I'd love to hear any answers to that question.

In case anyone wants to check things out, I've drupal-enabled Amadorable.com so you can log in using your username @ drupal.org.

If you go to your account's block configuration and disable all the blocks that are on the left or right side, you can see how the modified theme works with the dynamic styles mods mentioned above - the main content div fills the window nicely. No wasted space around the main block (as you would have with the 180px margins originally set in the #content div's css.

I think I'll submit this mod to the theme author for inclusion in the theme..

Its a similiar practice to what i did originally with this theme and works well. You've gone one better however and included it in a callable class, well done. Its taught me that hard coding these things isn't best practice.

I'm having the same problem -- and I've done all the recommended updates to the style.css, and still not fixed.

My site is at http://californiabarexam.info and I'm have problems with IE on the "books" link on the top of the page (everything is being shifted down for some reason).

Ok, I think we know that this theme is slightly broken with a variety of content. I think that the theme creator Gurpartap might want to do some basic troubleshooting on the issues mentioned here, because the solution may require structural changes to the markup.

Basically, the theme misbehaves when certain main content items exceed a certain width, or, if there are any elements that have the "clear" class (like <br class="clear" />).

My edumacated guess is that the theme will need some additional structural markup (divs) as well as css mods to help keep the content column behaving properly. I've done some one-off CSS tweaks for specific problems (see above) but I'd rather find a general solution to this problem, and be done with it.

Here's a resource that I've found useful in the past when diagnosing IE-specific CSS problems, and I expect that I'll use it to help diagnose and fix this theme's IE-specific issues:

• http://positioniseverything.net/ie-primer.html
• http://positioniseverything.net/explorer.html

I'll try to help diagnose these problems soon; right now I'm building site content so I'm not dealing with layout bugs unless they pop up.

I also am having the problems with this theme which is a pity as it looks great.

Problems include the shift down as described here and overlapping tags in header in IE on PC. On Mac in Safari and in Firefox it looks great.

Ok, yet another fix attempt. I added image and img_assist to my site, and after adding a few images to my site, I saw more breakage (the image node type uses <br class="clear" / > to clear floats within the content, which breaks the theme yet again.)

I added this line to my style.css:

div.content br.clear { clear:none; }

As I've commented before, it appears that anything with a "clear" class (which, has a 'clear:both' css style in the standard drupal.css file:

br.clear {
  clear: both;
  height: 0;
}

which, of course, clears floats on left and right (exactly what people are seeing here.)

I think the general solution to this problem is to wrap the main #content div with another div in page.tpl.php, because the clear:both should only apply to those items that are within the #content div. I'll try this out and get back to you all.

I'm having the same problem with all of my Flexinod and submit content pages.

When the user goes to submit content through flexinode or submit page ect, the forms are all shifting down below the nav bars. Haven't found a fix yet and I'm wondering if this is just me and something I did, or what you are all experiencing.

This seems to be a common theme with this, er, theme.

Look at the generated HTML for the page in question. See if there are any elements contained within the #content div having the class="clear" attribute. If there are any, the simplest 'fix' is to add this to the theme style.css file:

.clear { clear:none !important; }

Of course, this may cause other problems in your content, so I call this the 'nuclear option', because it may cause collateral damage. But it should tell you if the problem is related to a .clear class element.

For more selective fixes, here's what I've done in my style.css on http://amadorable.com, so far (needs clean up)

/* mjc: hack fix image, links problems */
div.content br.clear { clear:none; }
.image_node_body { margin-top:1em; }
/* mjc: fix .profile clear:both from drupal.css */
.profile { clear:none; }

/* nuclear option: blow away the clear class when in the #content div*/
br.clear, #content .clear, .content .clear { clear:none !important; }

And, as a last resort, if you have wide content (such as photos/images, or admin pages) and you don't want it to drop down in IE, or overlap the right column (mozilla/firefox/etc.) you can add this, if you wish:

div.content { width: 99%; overflow: auto; }

which will cause the wide content to be contained within a scrolling region, rather than overlap or cause the content to drop down below the right and left sidebars.

These are all band-aids, though. This theme needs to be fixed.

I've tried various css-based fixes, and none of them work, so I may implement a tables-based fix for the short-term, until I can spend more time.

Note to theme creator Gurpartap: Have you looked at this problem? Care to comment? Lots of people like this theme, but there are a number of issues that will certainly prevent widespread adoption.

Finally found the cause and the solution to this issue.

After installing the DOM inspector it was apparant that a rogue

<br class="clear-both" /> was clearing the floats.

Great i had the problem but could i heck as like find the solution. I really couldn't understand WHERE this code was coming from.

Thank god for the DOM inspector.

The issue is with the image_assist module putting the <br class="clear-both" /> after every node div.

If your including the img_assist CSS file you're going to face this issue whereever two nodes are displayed on the same page.

Theres two easy ways to fix it.

1. Go into the img_assist modules directory and edit the CSS file class at the end of the CSS file from

br.clear-both {
  clear: both; /* clear floats so the next node will display normally */
}

to

br.clear-both {
  clear: none; /* clear floats so the next node will display normally */
}

or go into the admin/ settings/img_assist option and set Include img_assist.css on all pages for styling inline images?: to no.

This effects all CSS themes with a floated DIV so i'm surprised it hasn't shown its head before now.

If people can confirm it works (and all the band aids should now be removable as i tested this with the original CSS file) then i can submit this as a bug to img_assist.

A third way of doing this is to include

br.clear-both{ clear:none !important; } in this themes css

Great catch, desm0n.

I think this problem can also happen without img_assist's css file (my test site doesn't have it installed - never even dropped the img_assist files into the modules dir). I've seen it happen with the flatforum module, and other bits. In every case, it's been due to clear-both elements being inserted into the generated html. (In other words, there are other components besides img_assist that use the <br class="clear-both"> technique.)

So, I'm not convinced that this is purely an issue with img_assist or any other module - after all, a new theme should not require changes to existing modules, if possible. A theme should be able to handle <br class="clear-both"> insertion in the main content without breaking.

And yes, DOM inspector is great! Also incredibly useful: Web Developer extension for firefox.

Yes it does seem its not only image_assist at fault here.

I have seen the drupal form class doing

.node-form .standard {
  clear: both;
}

As does the first page of the user profile.

Again this can be sorted by declaring them in your own css and putting clear to none.

I've tried several pure CSS layouts from many open sources and a lot respond the same way.

I think the use of clear is used a little too frequently in the drupal.css and this becomes a big problem for pure CSS layouts. We now have a permanent fix so thats good but what was confusing was that with the image_assist module, it was calling the CSS after my own css, thus not allowing me to catch it due to the cascade effect.

But that DOM editor, wooohoo, thats opened new possibilities for me.

That's why I think this problem will require a structural change to the theme markup. I'm not sure what that will be, though.

According to a lullabot interview drupal.css will be dropped soon in favour or per module CSS rules. This theory means that it should be easier to keep a check on what CSS to edit for what module.

I'm not sure how good this will be in practice, but its coming :)

Sorry for this late reply, I could not keep in touch with this thread, and just didn't expect this problem and such a long thread. There's an issue with project module which stopped sending project emails to the contributor when input filter was changed on d.o. So, forgive me for my inactiveness here.

I saw http://amadorable.com in IE6, but I am not at all able to reproduce any other issues related to default drupal installation (and modules), except one for this fix: http://drupal.org/node/79486#comment-126385

I'll update for that, but before that, would like to see if I can get a universal solution, also theme is not xhtml strict at blocks. The original theme was developed and this is just a port yet, indeed further development is need.

Give me some time, I am way to busy, or please contribute a patch/fix, I'll let you update to the project.

I think I've fixed the problem for my needs by skipping the "clear: none" fixes and instead creating a float wrapper for the content. The idea is to give all the "clear: both" styles something to work on, to avoid clearing the sidebar.

page.tpl.php:

<div id="content">
  <div class="magic_float">
    ....
  </div>
</div>

style.css:

.magic_float {
  float: left;
  margin: 0 10px;
}

The margin just adds back in what seemed missing to me.

None of the above worked for me. The only content that is getting pushed down for me is the account (member) page. Everything else looks good.

The fixes posted by desm0n on August 21, 2006 and benthere on September 23, 2006 work well for us to cure the 'content dropping down' problem. However we found that with right blocks switched on, the middle content overlaps the right block if you narrow the browser window.

To fix this we added a

width: 60%; to the #content style in style.css:

We also found a strange problem that appears to be a bug in IE6 (no problem in Firefox). The centre content takes on the dark blue content from the title block. But this disappears when you scroll the page - aaargh! After a lot of fiddling about we tracked the problem down to two statements that need to be removed from the #navlist as follows. This slightly alters the look of the nav buttons but fixes the problem with IE6. Not a totally nice fix but the bug made the theme unusable so it does the job for now.

  #navlist
{
  margin-top:1px;
  margin-bottom:10px;
  text-align:center;
  /*padding: 5px 0; !!!IE doesn't like*/
  margin-left: 0;
  /*border-bottom: 1px solid #0F3974; !!!IE doesn't like*/
  font: bold 14px Verdana, arial, sans-serif;
}

Phew - I can see why people use fixed width themes but it's worth persevering to get a variable width! And always check with Internet Explorer...

Anyway, our new site using the mod-ed theme is http://www.earlymenopause.org . You can see our updated style sheet with all the hacks at
http://www.earlymenopause.org/themes/newsportal/style.css

I've tamed the beast.

basically, i've removed the margins on #main and some put in some clear:none's, then put a table into the page.tpl.php with the cell tags contained within the IF php statement so that it'll only display one two or three cells.

Don't try to debate with IE, just beat it over the head with a table or two.

This may be useful:
Three reasons sites break in Internet Explorer 7

Links to nowhere...

Hm, sorry
http://www.456bereastreet.com/archive/200611/three_reasons_sites_break_i...

User123456

Can you thow us non template people a bone and spell out your changes to page.tpl.php a bit more?

i took a new simplistic stab at this problem... just put a table around the print content in page.tlp.php

no changes to the .css and because it is in side of the content div I can use 100% to get the whole content section width.

Let me know if anything finds a problem with this...

<div id="content">
    <div><?php print $header ?></div>
    <?php if ($mission) { ?><div class="featurebox_center"><?php print $mission ?></div><?php } ?>
    <?php print $breadcrumb ?>
    <h3><?php print $title ?></h3>
    <div class="tabs"><?php print $tabs ?></div>
    <?php print $help ?>
    <?php print $messages ?>
      <table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
  <td>
  <?php print $content; ?>
  </td>
  </tr>
  </table>

Actually the 100% does not work well in IE so decrease it a bit to move the content up...

Thank you for all this posts!

Almoust got to clean site!

But why anybody post final version for this great theme??
It's worth it in my opinion.

Can anybody update sources for everybody benefit?

i'd love to see the most current fixes rolled in to the theme release package - does anyone have a patch against the current cvs tree? Then, all we need is to have gurpartap (or a proxy) commit the fixes... :D

I'd love to help commit such a patch, but my versions of the theme are customized for amadorable.com, and I'm not sure they will deal with everything that's been mentioned in this lengthy thread. :(

Go ahead inactivist, i'm having very busy march month!!

I'm not sure what you are asking me to do.
Submit a patch based on amadorable.com mods?

Whenever you have a proper fix apply the patch, you have access! remember? :)

So anyone with a proved fix?

I had similar problems with the content shifting down, and adapted the CSS with the absolute fixes above - removing the floats. This worked well for KnowProSE.com, but Your2ndPlace.com shows a bug in IE 6 where the left sidebar shoves itself into #content. It may have something to do with my broadening of the right sidebar to 230px, I'll look into that - ideas welcome.

So I'm fiddling with this - the theme is a great starter in many ways - but in reading all of this, there really needs to be something more tangible documented here. It is apparent that add on modules cause problems, yet it is a nice theme. There has to be a balance with this somewhere... I'm not finding it yet.

My mistake - I am using 5.x-1.x.dev, The rest I just posted still applies.

This lines in css solved my problems

/*avoid forum comments shift down*/
div.content { 
width: 99%; overflow: hidden; 
}

/*avoid node-edit forms shift down*/
.node-form .standard {
clear: none;
width: 98%;
}

/*avoid profile-edit shift down*/
.profile { 
clear: none;
width: 98%;
}

tested in IE6, Firefox and Opera. Thanks to everybody that posted here, maybe there exists better solution than this one, but this worked fine for me.

overflow: auto caused a scroll bar in firefox

@federico:

Thanks for your suggestion. Your proposed fix only catches the cases you know about. Depending on what modules you have installed, other stuff will break layout. Forums, ImageAssist, CCK, whatever - in my experience, something always breaks the layout, and you have to go back and patch the css file.

That's why I'd prefer a more structural fix that deals with a wide center column. Unfortunately, I've been unable to come up with a great solution. :(

thanks you helped me a lot

The theme has been removed, since the template was not GPL licensed, which is a prerequisite for hosting code on Drupal.org's CVS. #143795