Make forum threads work properly in IE without min-height or background image

Confirmed here. I could use the solution for this also. This affects both alpha 13 and dev release. I could not find the solution myself, in the little time I had to look for it. What a great module for a great cms. Thanks Michelle

Internet Explorer 7 is bug'd.
Firefox 3 works fine.

This is due to the changes from Morbus's patch to get rid of the background image. He says he can get it working in IE 7 so I'm leaving it in his hands. :)

Michelle

The old code is always in CVS. If Morbus can fix this bug, then this will be the style I maintain. If he can't, I'll go back to the old way. I'm not going to maintain a separate style that only has the background image as a difference. The background image was a hack because I couldn't get it to work without it.

Michelle

The min-height was placed on the wrong pane. Because the author pane is a float, its height/width never affect its parent DIV (being the entire post wrapper). I've duplicated the min-height to the comment pane, and shrunk it down to 225px. Attached screenshot shows result in IE 7 (on the right) and FF 3 (on the left).

Repeating what I said on IRC:

Morbus - Well, I tried your patch on SocNet and it works if I change the min-height to 300px. But I've got to say I'm really not keen on a solution that relies on min-height. Aside from the IE 6 issues, there's the fact that an ideal height is going to be different for every site.

I'd really love a solution that doesn't depend on either an image or min-height. Anyone have one?

Michelle

To expand on this issue:

I have found a little time to come back to this issue and work on my forum. I have re-installed alpha 13 on a testbed I have. This issue may relate to the core of both styles, not just blue lagoon. Let me try and explain. I have tried both standard styles, blue lagoon and naked. The problem exists in both themes. I didnt catch this my first test which was the blue lagoon style only. Today I tried both. I had to apply the new patch, at Michelles 300px size, seperately on both styles, to fix the original issue. And all it does is remove the floating height of the container, and make it a permanent fixed height. I dont like it. If someone does not have an avatar, they are stuck with the container size you set. It looks very tacky now. Also, this does not fix the next page issue. (See attached.) This also appeared after the major css changes in alpha 13 and dev. It is still here. On my second page of forum comments, the initial post floats up in IE 7, works fine in FF 3. (See attached.) I am back to using alpha 12, hoping Morbus Iff can get these issues resolved soon. Both alpha 13 and dev versions are not usable by me the way they are now.

Yes, the structure has some serious issues. dvessel said he'd be working on it but he has some other things he needs to finish up first.

Michelle

Not serious to me, just a minor set back, another bug to work out. I know that it will get fixed, it always does. I have been building my site on your forum module for over 6 months,. I am very close to launch now, and I love the fact that Drupal with Advance Forum makes the best all in one package available. Other module developers should look at your dedication to this module if they want to see how a great module developer works.

Cleaning up the statuses & giving it a better title.

Summary: The patch in #323631: naked style problems: borders wrong eliminated the background image of the author pane but caused problems in IE where the author pane contents spill out of the forum post wrapper if the post contents are shorter than the author pane contents.

I've been working on this myself but no joy. Hopefully one of the CSS gurus will have some time for it soon.

Michelle

Just subscribing here so I can look into this later. I do have other work ahead of me but this doesn't look difficult to fix so expect something shortly.

subscribing, because 50% of people use IE6

An update: I've been tweaking the styles and I've got them looking pretty decent at least in FF & IE 7. IE 7 is only working because I used min-height, which is just a bandaid. dvessel said he could work on this sometime next week so I'm hoping he is able to get it working without the min-height.

Also, all the style changes are only in the D6 branch for now. Once dvessel has worked his magic, I'll copy them over.

Michelle

Subscribing

Ugh... Please don't "subscribe". There's nothing going on here until dvessel has time to look at it next week and then it will be committed and marked fixed.

Changing the title to reflect the real goal here.

Michelle

Hi Michelle,

Not sure if this is a related, or if its a new or seperate issue.

I finally had a little time to get back to testing this. I have tested the last 2 dev pushes, Nov. 9, and Nov. 10, currently running Nov. 10 version. I noticed with this round of testing that Signatures are also floating up the same as the container was. This is in both IE7 and FF3. The minimum height set the container to a fixed amount now, and page 2 seems to be back in place now, not floating up, but sig's are still floating up. It reminds me of the (clear fix issue?) we had awhile back when almost the same thing was happening with the sig's and link buttons, when you were adding the buttons. They were floating up. I wish I knew more CSS to help with this. Just feeding you all the info I find when testing hoping it helps the CSS Guru's.

Please excuse the delay. I had some serious issues with my dev install and ended up working on alpha 13. Didn't know they were so different.

This fixes the equal column heights issue in IE6 & 7. The author pane background should now be used to set it's background color and the immediate wrapper is for coloring the right-hand content.

Applies to the 6 branch from CVS for blue lagoon.

Whoops, forgot to remove overrides done by my CSS editor.

Wait, we're giving up min-height for a padding: 9999px and an overflow? Hah. -1 from me. I'd prefer a revert over this travesty.

@Morbus - If you'd like to present a patch that makes this work with no background image, no min-height, and no padding 9999px, you do have a bit of time before alpha 15.

Michelle

@Morbus: min-height isn't exactly elegant either because you can't always predict how high one side will be with any certainty. Nothing will be elegant when trying to mimic a table based layout. I mentioned this to Michelle but if it was acceptable to not even have it look like tables and optimize it for divs, we wouldn't have to do any of this.

The padding + inverse margin works in IE6 while min-height does not. And min-height can break *any* browser when resizing fonts and the author panel is full. +maybe not. Assuming a certain pixel height made me think this but it doesn't seem to break. :p But still, there will always be a tradeoff.

Michelle: you seem to be suggesting that you'd rather have 9999px than a CSS background-image. I can't agree with that in any sense and, if I had time to submit a proper patch, I certainly would have done it long before the veiled and implied threat of "the 9999px is gonna go in" ;) One is entirely supported (background-image is dirty, but it works and is within scope), but the other is just hackish all around.

As for the whole min-height issue, it depends entirely on how you phrase it. dvessel: "you can't always predict", sure, but I've said to Michelle before that that's an irrelevant argument - there's plenty of things in the existing CSS that make predictions about what's going to work in a theme, and themers will find themselves modifying those values right alongside the min-height. The min-height I proffered assumed the default avatar height as provided by Drupal. The fact that it doesn't work in IE 6 is relatively easy to fix, and specifically for that one browser. The 9999px hack, on the other hand, is a hack that effects every single browser - instead of targeting one that no longer exists (IE 6), it now targets every browser now and in the future. (With that said, I confess to not knowing the issue about resizing fonts - could you explain?)

The biggest issue, I think is: why is min-height bad? Is it bad because it doesn't work in IE 6, or is it bad because it sets a min-height (it's "tacky", per Shyin, even though said tackiness, presumably the whitespace, is visible on the themes we're trying to emulate, and becomes more obvious if one adds features like badges, points, locations, roles, IM buttons, etc.)? As mentioned to Michelle in the past (but which is probably new to you, dvessel), there's a "fine in IE 6" theme I built over at Let's Change the Game, which doesn't even use the standard IE 6 min-height workaround. I just haven't had time to figure out what's different between the two (I /think/ it relates to the second row beneath the author pane).

It's not a threat. It's a simple fact that I don't know how to make this layout work without using images/min-height as a crutch. I've been asking for help for some time and dvessel stepped up with a patch. Then you come along and -1 it. So, fine, if you don't like it, offer an alternative. But I need something that works and provides a strong foundation because all this switching around is sucking up a lot of my time and is no good for users trying to theme their forums.

My reasons for not liking min-height are:

1) it requires everyone to go into their theme and override the height we choose unless they just happen to have the same amount of information in theirs. How do we pick a number? It's my module; do we go by my site? IIRC, I need it set to about 300.

2) It makes posts with short comments and no avatars look silly with a ton of whitespace on the bottom.

3) It requires hacks in IE.

My reason for not liking the image was that it requires people to edit a graphic to change the color of their forums.

So far I see nothing in dvessel's approach that I don't like but I've only had time to skim the patch.

I won't be able to commit this for a few hours at least and it can always be changed again if needs be. But I need something soon that works and works well so I can stop yanking the theme around and people can start actually making styles for AF without having to chase a moving target.

Michelle

I'll bow out of this issue then. I find all three of your reasons irrelevant, for opinions already stated.

9999px throws a big alarm in my head; the fact that it doesn't for you is a fundamental difference.

(And to answer the rhetorical question: no, my opinion is that any module needs only to ensure that it looks "perfect" in Garland only; that is the only sane base with which to operate with, as it is the default of an install.)

Morbus, I just took a closer peek and the way left pane float interacts with the "clear-block" class causes min-height to do nothing. Look at the div with .forum-post-panel-main. Remove the min-height for it and it still fills in the right column. Not for IE of course but this behavior is consistent in Safari and FF. I wanted to bring this to your attention as it's easy to miss.

Go ahead and remove the padding/margin hack. I certainly don't think it's the best solution. It's the only one I could think of with my limited time on it.

As for the whole min-height issue, it depends entirely on how you phrase it. dvessel: "you can't always predict", sure, but I've said to Michelle before that that's an irrelevant argument - there's plenty of things in the existing CSS that make predictions about what's going to work in a theme, and themers will find themselves modifying those values right alongside the min-height.

IMO, it should make as little assumptions as possible. It can't always be done but when it can be avoided I think it should. It can become another obstacle for others to hunt down and alter. This particular issue may not be a big deal but in general, there should be less of these so it gets out of the way.

(With that said, I confess to not knowing the issue about resizing fonts - could you explain?)

Changing font sizes can throw off the assumed optimal height. For example the min-height is applied to the right content region at 245px. If the post is a single sentence, increasing the font size will not go past that 245 min-height while the author pane may grow beyond that expected buffer and introduce gaps. I mentioned above that clear-block makes min-height moot though for standards based browsers. IE just fails as usual.

"9999px throws a big alarm in my head; the fact that it doesn't for you is a fundamental difference."

I'm not a themer and don't even play one on TV. If it works and doesn't require people using the module to fiddle with the layout because they have big avatars, great.

You keep saying you've got a site with a peachy layout but no time to make AF work like that. Well, I'm not a total "code or dont' talk" sort of person and I welcome opinions, but with opinions in one hand and a working patch in the other, I think the choice is clear.

If you can do a better job, great. But I need to use what I have until that point.

Michelle

I've got a site that uses min-height on IE 6 with no hacks. That's not what
you're looking for, so my patches would be irrelevant. No worries :)

would you please tell how would the patch from #20 (equal-column-heights-fix.b.patch) look like for the drupal 5?

@transliteration - Exactly the same. It's only patching the style.

@all - There's been discussion between Morbus, dvessel, and I about this on IRC about the best way to go and at the moment I'm leaning towards Morbus's min-height fix even though I'm really not keen on min-heights. I could use feedback if there's any other designers out there.

Michelle

@Michelle - sorry, I just didn't notice that there is already 14-th alpha and was comparing the patch with the 13-th versions of both .css-files :)
After upgrading from 13-th to the 14-th this bug looks a bit less annoying, but still not acceptable, so I have decided for me to use the patch #20, thanks for it!
However, I also hope that someone who knows css better than me :) will provide the third solution that will satisfy both sides of the discussion "which of two current approaches is better".

There was a fellow from Microsoft on IRC last night and he was trying to help me with this problem. He had to go before we found a solution but he mentioned something that I wanted to record in case it means anything to people with more CSS skills than me:

* so, my not-simple solution, which I'd try if I had an hour or so to kill, is to remember how to do this without a float
* treat it more like a CSS table

Michelle

I wish I knew more CSS, but I am learning slowy. After talking to my nephew last night, and reading Michelle's last post, I went back to the CSS website today, studied a little more, and decided to try this fix:

From:
/* Post text area */
.forum-post-panel-main {
margin-left: 150px; /*Set left margin to LeftColumnWidth*/
min-height: 245px;
}

To:
/* Post text area */
.forum-post-panel-main {
margin-left: 150px; /*Set left margin to LeftColumnWidth*/
height: auto;
}

It seems to be working fine, but i dont know if it will effect anything else long term. I an no CSS Guru. It is on my testbed now.

Please check and see if I am on the right track here. Here's my Testbed:

http://www.shyins.com/testbed/node/28

Can't really tell from that since you don't have a background on the author pane or a border on the right, which are the things causing the problem.

Michelle

* so, my not-simple solution, which I'd try if I had an hour or so to kill, is to remember how to do this without a float
* treat it more like a CSS table

I assume he's talking about forcing table properties on divs but he's from microsoft so he should know that IE doesn't support it. :p Not using floats I think is impossible without running into bigger problems. I look forward to his fix. :)

The link morbus provided on IE6 min-height I think is the way to go. Technically it's a hack also since IE fails to comprehend the !important declaration when placed in a specific order but still it's more elegant. The issue I mentioned about using it would be less of an issue if the min-height is set high enough. It would introduce more white space but I think it's acceptable.

The hack I posted has other problems. It can be read here. http://www.positioniseverything.net/articles/onetruelayout/appendix/equa...

Well, I think I got all the time I'm going to get from the 'softie and it was nice of him to try and help but in the end we didn't get anything working.

Sounds like Morbus's plan is the way to go. I'm going to be out of town this weekend so probably won't get much coding done. I'll revisit this next week and get an alpha 15 out.

Thanks everyone for all your help. I appreciate you helping out a non themer like me :)

Michelle

Thanks Michelle,

I added the background color and border back in and it didnt work. I could not get control of the inside of the container, and get it to float, since it is coded seperate from the outside of the container, which floats fine. /Shrug

Sorry I could not be more help. The min-height that we are using works fine for now. I think I would lean towards staying with this instead of changing to the 9999px fix.

If someone could post a forum link where this is occuring, I can work on it to fix it. I don't need write access to your site and nothing will be changed on your site. I can look at the code and play with it without affecting your site in any way.

If you dont want to post the link here, you can email it to me at etiger13@gmail.com

Ok, committed the fix suggested in #24. I have spent entirely too much energy fighting this IE issue. If people don't like min-height, they can always override it. That's the beauty of CSS.

Michelle

to much white space in one sentence reponses!!!! forum-post-panel-main clear-block this style is unstylable! why are we required to have so much whitespace! i've been messing with this for 3 hours. i've read the entire mastery for css recently and i can't find an answer. and i want one! i would like for the forum post to be about half the size that it is if there is no avatar and only one sentence posted. Bad use of screen real estate. i believe you coudl see 30-40 percent more posts in one page if i could resolve this issue. there is some clearing going on in the default theme style.css file. and i can't get around it.

If you resolve it, feel free to post a patch. Coming here and complaining on a closed thread where we clearly struggled for quite some time with this issue and ended up with the best we were able to do does no one any good.

Michelle

your very to the point Michelle. I willl continue to research it. i wasn't sure that my issue was the exact one being discussed. I thought it sure sounded familar!

The whitespace is because of the min-height which is the only workable solution we came up with after many hours of going round and round trying to make IE happy. I wasn't being sarcastic; if you have something that works better, patches welcome. Complaints, however, are not. I've sunk far too many hours into this problem already and am done with it unless someone provides a better solution.

Michelle