Content pushed right in IE 7

Yes, I'm seeing this too. Here are specifics:

Firefox 1.5.0.7 on WinXPSP2

• On audio node pages, the block that contains the track data and the cover image is pushed below the left sidebar. This seems to be caused by a div .clear - which I think must be from the audio module. Will this present a wider issue with modules not being used to pure CSS layouts? Obviously users can override this, but some users may not grasp this and lead to a lot of support issues!
• on og group homepages the blocks showing lists of the group's nodes (grouped by node type) are pushed below the left sidebar. This seems to be a element. Does it need to have a float:left ?

IE 6 on WinXPSP2

• In the left hand side bar navigation block. There seem to be two little grey boxes to go behind two of the icons. These actually show up a bit lower down the page??! (screengrab attached)
• All of the audio node gets pushed below the left sidebar, including the title (which didn't get pushed down in firefox) (this is also shown in the screengrab).
• All of the admin section is pushed below the left sidebar.

It's very exciting to see such a great new theme coming together. I'll keep testing away and giving any feedback I can.

Thanks

There is a new CSS style in Drupal 5 called "clear-block". This method should be used for clearing floating elements. You can find it here:

http://cvs.drupal.org/viewcvs/drupal/drupal/modules/system/defaults.css?...

I'm guessing that these modules have their own way of clearing floats that is somehow incompatible.

It's important to mention that their methods are likely incompatible with *any* CSS layout that uses floating sidebars (not just Zen), so they'll likely want to update their code.

Can anyone find this behaviour happening with any core pages?

Okay, I've found this one happening on the /admin page in IE6.

Here's a screenshot.

I've been doing some experimentation and this issue of the main column being pushed below the left sidebar in IE6 is happening because something in that main column causes it to become wider than the space IE thinks is available for it in order to float it next to the sidebar.

so if the admin page showing the logs, or themes is wider it will get pushed down.
In my case it was the tabs (because of various tabs added by contrib modules) that were causing the audio node pages to be wider - i could simply set:
.tabs { display:none;}
as an experiment and the main page floated up next to the sidebar again.

So to solve this problem you somehow need to restrict the width - or deal with the overflow!

Most of the time ordinary users won't encounter the problem of course - unless there's a post that contains an extra long URL, or a large image. It'll just be admin users who get extra tabs, or have the wider admin pages (but they can use an alternate theme for the admin section anyway). But it would be nice to 'failsafe' this.

hope that helps, and that it triggers your CSS-master brain to dream up the solution!

cheers
steve

Likely this is caused by:

margin or padding on some element
the element's width

This is not a clearing issue. A clearing issue is entirely different. That is a problem when you have text appearing *next* to each other that shouldn't or various backgrounds not expanding when they should.

This is a width issue.

Hmmm... I'm baffled. But I'm wondering if it's got something to do with the :after declaration in the .block-clear style. We've found that IE isn't fond of :after.

This is perplexing... but IMO, this is the only major bug still happening with this theme. And it could actually be a problem with the core .block-clear rather than the theme.

I'm going to try to ping some hard-core CSS gurus and see if we can shed some light on this.

I think this is a known issue with IE6 and the width of nested/floated divs.

It knows how much space there is to slot the div in, and if it turns out to be wider it slots it in lower down rather than floating it correctly.

I've seen something on this written on a CSS site somewhere a while back...I'll try to track it down again.

It's not the same page i saw before, but here's a page that may help:

http://www.positioniseverything.net/explorer/expandingboxbug.html

I'll keep looking

a comment further down this page:
http://forum.stylegala.com/viewtopic.php?t=3961&sid=ddbff299505813e6da80...

suggests that IE6 doesn't like the widths of the divs to add up exactly because it handles padding and margin differently. the writer says that adjusting the width just for IE will solve the problem.

Yes, this is not a clearing issue.

It looks do be a Box Model issue in IE6: http://www.communitymx.com/content/article.cfm?cid=E0989953B6F20B41
The #main div is fluid, and centered using margins, it currently has no width attributes.

The quick fix of

* html #main {
overflow:auto;
}

did not work, neither did overflow:hidden.

I think that tweaking #main, #sidebar-left, and #sidebar-right and giving them proper margin/width combos for IE6, the columns should snap into place. This would be the best way to go on the current layout framework, instead of doing individual * html IE hacks for each offending element (for example, the ".message" div) that breaks the layout.

It should also be looked into to change this dynamic 3-column layout into a CSS framework that allows for content-first source ordering, so that #main would be above the sidebar divs in the source. All of the ones I was looking into and tried out today did not work out so well, because the current CSS needs to be adapted over to a new method and it got a bit hairy. Perhaps someone knows of a solid framework that meets these requirements and wants to give it a go from scratch? Unfortunately, I don't have any time to look further into this until later in the week.

Ok, this one has been driving me nuts - I've spent most of today on it, googling the issue and just messing with stuff (ever have one of those days where IE6 just seems to waste hours on end for no apparent benefit???)

I still haven't found a proper solution, but I've found something that kind of works - and might help us find a proper solution.

Put this:

       <div style="clear: both; display: block;"></div>

just before the container div.

That seems to do the trick for me. It's not best practice to clutter things with another div...so can we take this and make a better solution out of it? (of course this is assuming that it fixes the problem for you guys too...I've fairly heavily modded the zen template, so it'd be worth trying on a clean install (but I'm going to bed now I have this miniature victory over IE).

Sorry - a bit of false hope there.
That only worked in combination with disabling the .clear-block CSS code provided by core - obviously not a suitable solution.
But it may help us find what's wrong.
I'm still learning the ropes while stabbing around in the dark - but hopefully this will trigger a brainwave in someone cleverer than me.

Not to throw (yet another) wrench in the works, but I would love to switch around the source order while we're fixing this. Meaning: right now, the XHTML source goes:

1st: Left sidebar
2nd: Main/center
3rd: Right sidebar

and I'd really like it to be:

1st: Main/center
2nd: Left sidebar
3rd: Right sidebar

Perhaps I'm being too idealistic, but this should be possible. And I'd hate for anyone to spend too much time fixing this issue only to have things break again if/when we switch around the source order.

Actually jeff, that might help solve this problem.

Some useful resources to help get a working layout in the source order you want:

http://www.positioniseverything.net/piefecta-rigid.html

http://brunildo.org/test/lrfc.html

http://www.positioniseverything.net/articles/pie-maker/pagemaker_form.php

Hi, I'm new to this, I know, but I think this is a great project idea and I want to help out if I can.

I notice those links show that the middle column is first, but they don't say why. I think if the only motive is that it makes the styling easier, then it shouldn't be done that way. The whole Zen-garden philosophy is to separate the content from the style.

I think you should decide which makes the most sense to go first from a content point-of-view and then we'll figure out how to style it. Stylesheets are really flexible (and that's the point), so don't compromise the html for the sake of the css.

Maybe imagine using the theme completely unstyled (like in a text browser or something) and think of what would make sense to go first and just keep it that way.

Anyway, that's just my opinion, of course, but I'd be eager to know what others think of it.

Ok - I have the beginnings of a solution!!

Try this at the bottom of layout.css:

*html #container {
  margin: 0;
  padding: 0;
  zoom: 1;
  position: relative;
  }
  
*html #main {
  border: 1px;
  margin: 0;
  zoom: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 95%;
}

It's just experimental, so it's not perfect yet. It only works with the left column..It doesn't work with the right column yet. I'll keep experimenting, but perhaps someone else knows more about how to take it from here?

Also, we may be able to slim it down by removing some of thsoe items, I've been experimenting with allsorts, so perhaps the zoom and margin settings can come out. The key bits are the positioning statements.

cheers
steve

update..

sorry,
width: 95%;

needs to be:
width: 580px;

in order to fit in. Again this only works with left sidebars - and the footer doesn't stay in position at the moment. but at least that pesky whitespace has gone.

I'm not suggesting this is the solution - but it gives us a starting place as to how to fix the problem properly.

I'm going to experiment porting over the layout stuff from Garland and see how that works out.

Here's a partial fix. I did this on the 10/23 version, but it should be similar if the new version has the main column first in the source.

Basically, we couldn't use the "overflow" property to fix IE because our main column didn't have a width. I switched the layout to use percentages instead of a fixed pixel widths so that the main column could have a width, too. I picked the percentages such that it would be the same widths with the fixed-width stylesheet.

There's still a few problems:

• I don't know how to make a style apply only if both the "withright" and "withleft" classes are present, so in IE the width is wrong if the right sidebar is present but the left isn't.
• I wasn't sure how to handle the overflow because I didn't want to just crop it and leave things hard to use (like the "themes" page crops off important inputs). I picked "auto" because it fixed the problem with the content being pushed down, but for some reason Firefox always shows the vertical scrollbar. It works fine in IE and Opera, though (only showing the scrollbars when necessary).
• In IE the admin panels don't display as columns anymore (because it is two narrow for both of them). It looks like we could remove their margins in IE, but I couldn't find where this was styled.

Anyway, that's a start, maybe.

Sorry. Here's the patch file. (And it looks like the newest CVS has the content first but that this layout file hasn't changed yet. Is that right?)

Here's a new patched version that keeps the source column ("main") first. I added a few wrapper columns for the columns to facilitate this (col-wrapper-one, two, and three, for how many of the successive columns they contain). I also added a class for the container div called "withboth" for when it uses the right and left columns.

I let the "overflow" property be "visible" for Opera and Firefox. This still lets them show over the top of the right column in places, but I thought that would happen less often than Firefox unnecessarily showing a scrollbar. Maybe someone has a better solution than this but that's what I came up with.

The admin panels still get pushed down if the window isn't wide enough (or all of the time, I think, in the zen-fixed theme), so that should still be fixed.

I've just made a commit that is basically a port of the Garland layout. It is still a bit buggy and it is NOT fully tested. I'm going to try to smooth it out in the next few days.

Another note: the Garland layout current depends on the source ordering of left-sidebar, main, right-sidebar... So I'm still open to other solutions...

bcasteel, can you upload an entire copy of your layout.css, so I can experiment with that a little more?

Thanks
-j

Is this issue sorted thanks to the commit from Jeff?

>> 28

I'm also waiting on this. It's been a month and a half since there was any real activity on this, so is it fixed?

Yes... I believe that this was fixed.

I ported over the layout from the Garland theme and it seems to be working *pretty* well and content is no longer getting pushed down.

The two layouts work very differently, but the good news is that basically all that changed was the layout.css file!

I'm going to close this issue and if there are any side effects to the new layout, we can pick them up in a separate issue.

Hi jjeff,

Sorry, I think the problem still exists; I grabbed a copy (5.x-0.6 Jan 17 & 5.x-1.x-dev Jan 20) of Zen and did a test on test data, an the problem still exists. You can check it out here; http://testedgroup.com/50/ (trusting you have IE6 for testing purposes)

I have stopped MS update installing IE7 until this problem is resolved. Hope this feedback is ok.

Russ

I do have IE for testing, but it's still helpful to have a screen shot. One is attached for future reference.

Okay, questions:

1) Does this still happen if you do not have a mission statement?
2) Does it happen on pages other than the home page? (doesn't seem to)
3) Does it happen when you are using the non-fixed-width version of Zen?
4) Is this a new behavior since a Zen update or has it been this way since you installed?
5) Is one of the nodes on your home page causing this behavior? Try unpublishing or demoting from home page and see if things line up again.
6) Are you actually using the HEAD version of Zen or the DRUPAL-5 version? HEAD has not been updated in some time.

oop. screen shot attached.

This seems to be caused by this issue.

I'm going to postpone this until there is movement on the core issue.

Please post followups to this core issue:
http://drupal.org/node/101305

-j

I've been investigating the rendering problems with Zen, and believe that the issues for IE have been resolved with the Glossyblue theme.

I have tried Glossyblue on WIN with IE6 and FF2 and it works well...

Perhaps there are a few lessons we can learn here????

I have also suggested over at groups.drupal.org that a few people get together to form a Zen Task Force! to resolve as many issues as possible... Perhaps we can ralley some support...

Wow! A Zen task force!

That's very exciting. How about we start this as a separate group so that everyone (not just those in Australia) can participate.

Oop. This is open source. I'll scratch my own itch and do it myself! :-)

Here it is!

http://groups.drupal.org/zen-task-force

I have installed the patch at http://drupal.org/node/101305 which fixes the problem with forms containing textareas, but content is still being pushed down on certain pages using zen-fixed theme for example admin/build/themes, admin/user/access. This may be more of an overflow issue with wide content.

For me at least, this bug has been fixed with this patch: http://drupal.org/node/110902

The patches in http://drupal.org/node/101305 have gone into HEAD and 5 dev so hopefully 5.2 is released soon and that particular issue will be resolved. It seems that folks are still having a few issues outside of that patch though so I'm moving this back to active. Also moving the component to IE problems.

I use zen 5.x-1.x-dev with fckeditor and the patch for textarea.js (http://drupal.org/files/issues/textarea-patch-5_0.txt)

For IE7 it works fine, but not in IE6.

When I delete all temporary files (IE-extras-internetoptions-delete files) first pageload is ok, but when I reload the page fckeditor becomes so expanded, that it overlaps the right sidebar.

For zen-fixed I added

* html #edit-body___Frame {
  width: 470px;
}

which works, but it's no good solution for zen.

Hi

Drupal : Version 5.1
Theme: Zen fixed
Browser: Firefox 2.0.0.4, IE 7

Things were displayed fine on IE 7 until I enabled the nice menu module. I have placed the menu at the top below the logo. The content now appears on the right side in one long column. My accept my apologies if this has been answered below as I have searched a lot but have not been able to find an answer to it.

Regards,

Is there a reason that changing

#main {
float: left;
width: 100%;
}

to

#main {
float: left;
width: 99%;
}

is not an option? Obviously, this won't fix egregious cases of non-breaking content in IE6, but it fixed my breakage problem with non-oversized content that "shouldn't" be pushing down the right-left-columns on my tiny 1024 x 768 screen.

The standard layout declarations don't seem to have 'wiggle' room for IE (in other words, everything is down to the pixel, where i've always found the need to give IE a couple extra pixels for it's poor margin/padding implementation), so it's possible that a 'fix' could be made there as well.

I guess this isn't really 'standards', but might be a quick fix for people out there that are ok with a web page just working in IE (and being mostly semantically correct. ;) )

Fixed in http://drupal.org/node/110897