Breaking catbg.

[Matthew K.]

Not sure if this has been reported yet. But Scotty and I found a bug with the SMF 2.0 RC4 display.

To recreate this, simply collapse *any* category. My guess is, this has something to do with the main_block.png changes that were made in the RC4 update, so it should be a quite simple change, have not attempted to fix yet.

Labradoodle-360

[Aleksi "Lex" Kilpinen]

Got a screenshot? I just tried, and didn't notice anything off...

EDIT: Actually, I did - something small, but still. The right hand side of the bar is off. That what you meant?

[Matthew K.]

Yeah, sorry about that. http://prntscr.com/16k5y. I just did some playing around on SimpleMachines, and it appears not to occur on every category, it's quite odd.

Edit: after some more testing, it seems to be correlated to ?action=collapse. Once a category is collapsed, if you clear the URL back to /index.php, the break disappears, and vise versa for expanding.

[Aleksi "Lex" Kilpinen]

Yeah, can see that happening myself too.

[Matthew K.]

I'm not positive if this was in RC3, but I don't remember this occurring.

[Aleksi "Lex" Kilpinen]

You're right, it only happens when you collapse a category, but it's fine again when you reload the page with collapsed categories.
Tested here with FF 3.6.12

[Joker™]

when you collapse a category, but it's fine again when you reload the page with collapsed categories.

Same thing happening in opera 10.63 also.

[Matthew K.]

Tested in Google Chrome, and it does not occur. Oldies tried in FF4 Beta 7 and it does not occur either.

Edit: Just tested in Safari, does not occur.
Edit2: Tested in IE8, occurs.

[Brettflan]

It's the anchor link at the end which seems to cause it. Not sure why offhand, but with that anchor link ("#c2" or whatever it is for the category you choose) it happens for me, without that anchor link it doesn't. You don't even need to be actually collapsing a category, for example:
http://www.simplemachines.org/community/index.php#c2   (note the "Simple Machines" category)

EDIT: Strange, I've viewed the list of CSS affecting that catbg using the Firefox Web Developer addon and there's nothing different there, and further the page contents are exactly the same as well other than current time, page creation time and other expected things. Hmm.

EDIT 2: similar anchor links to other stuff (such as a board or the validator link) don't seem to cause any problems at all. However, a brief foray into the CSS regarding those board title links which are the anchor targets didn't turn up anything for me; maybe someone else will have better luck or understanding of what specifically can be causing it.

[holodoc]

In fact its not div.catbg that is causing the issue but div.cat_bar. It has overflow:hidden applied to it while it can't accommodate the content of its children which usually causes some layout shifting etc. Additionally a margin-bottom attribute also created the problem with a white line beneath the cat_bar container in several places.

In order to fix this issue div.cat_bar in /Themes/default/css/index.css needs to be fixed from looking like this

Code Select Expand

div.cat_bar
{
background: #99abbf url(../images/theme/main_block.png) no-repeat 0 -160px;
padding-left: 9px;
height: 31px;
overflow: hidden;
margin-bottom: 1px;
}
to looking like this

Code Select Expand

div.cat_bar
{
background: #99abbf url(../images/theme/main_block.png) no-repeat 0 -160px;
padding-left: 9px;
height: 31px;
/*overflow: hidden;
margin-bottom: 1px;*/
}
Of course the part that was commented out can also be removed however I choose to simply comment it out in order for other people, specifically SMF customization specialists, to be able to disable this fix if it turns out to cause cascading issues with other CSS.

This fix has been tested in Firefox, Chrome, Opera, Safari and IE (6,7,8,9 beta) .

EDIT: Sorry, it was actually not tested in IE6 Just a slip off.

[Brettflan]

That does the trick for me as well, nice find. 

[Sverre]

IE6 seems to need:

Code (ie6.css) Select Expand

div.cat_bar
{
overflow: hidden;
}

[Matthew K.]

To be quite honest, I don't think SMF should have support for IE 6 anymore anyways. Great job holodoc!

[holodoc]

I had some time to further analyze the CSS code and find a solution for this issue which is IE6 compatible. It eliminates directly the reason which is responsible for not allowing elements to fit inside their wrappers.

The solution is to open the /Themes/default/css/index.css and change the following code

Code Select Expand

div.cat_bar
{
   background: #99abbf url(../images/theme/main_block.png) no-repeat 0 -160px;
   padding-left: 9px;
   height: 31px;
   overflow: hidden;
   margin-bottom: 1px;
}
to look like this

Code Select Expand

div.cat_bar
{
   background: #99abbf url(../images/theme/main_block.png) no-repeat 0 -160px;
   padding-left: 9px;
   height: 31px;
   overflow: hidden;
  /* margin-bottom: 1px; */
}.

Additionally the following code

Code Select Expand

h4.catbg, h4.catbg2 , h3.catbg , h3.catbg2 , .table_list tbody.header td.catbg
{
background: url(../images/theme/main_block.png) no-repeat 100% -160px;
padding-right: 9px;
}
needs to be altered to look like this.

Code Select Expand

h4.catbg, h4.catbg2 , h3.catbg , h3.catbg2 , .table_list tbody.header td.catbg
{
background: url(../images/theme/main_block.png) no-repeat 100% -160px;
padding-right: 9px;
   padding-bottom: 0;
}

This fix was tested in all browsers including IE6 and it fixed the issue as expected.

To be quite honest, I don't think SMF should have support for IE 6 anymore anyways. Great job holodoc!

Unfortunately although I would like to agree with you I believe that I speak in the name of the whole SMF development team when I say that one of the SMF goals is to be as compatible as possible with all currently used browsers and IE6 is, unfortunately, still over the 1% landmark usually considered as a point at which its acceptable to rethink about dropping support for a particular browser.

[Matthew K.]

So if I made a browser that more than 1% of people used, even if it broke every coding standard, SMF would build compatibility for it?

Additionally, I don't think full browser compatibility is bad, but I do think it is time to drop IE 6.

[holodoc]

Additionally, I don't think full browser compatibility is bad, but I do think it is time to drop IE 6.

Once again I couldn't agree more with you especially considering the fact that IE6 is primarily used in corporate environments today. However for a software solution that aims to be as widely compatible as possible I believe supporting IE6 is important but only if it doesn't make too much trouble adjusting the software itself to be compatible with IE6.

I personally am not offering IE6 support for any of my projects but I do try to at least provide a bare minimum of functionality even on IE6.

[Forum Guy]

Reminds me, using the core theme, these category expand buttons are now placed on the left side? 

WHY?

[Antechinus]

Ok thanks Holodoc. I'll get onto it.

Not sure about the Core theme. As far as I recall nothing was changed there. I'll take a look at it.

[Forum Guy]

Thanks, Antechinus, indeed fairly unpleasant for every right-hander to have these buttons across the page.

[Sverre]

The proposed fix exaggerates an issue associated with the catbg(s) on certain pages. Just compare ;action=help for example, where #help_container is given a margin-top: 4px; declaration, to ;action=profile.

Also, the original bug doesn't affect title bars as far as I'm aware, but for the sake of consistency, shouldn't the fix be applied to div.title_bar, etc. anyway?

[holodoc]

@Sverre
Could you perhaps provide some screenshots and exact relative URLs of the pages which seem to have the issues you are mentioning. Also it would be helpful if you could specify in which browsers you are experiencing the issues.

[Sverre]

Sure,

Profile:


vs.

Help:


CSS has been edited according to the proposed fix for these screen shots using Opera Dragonfly.

Tested in Opera (obviously), Chrome (SRWare Iron), IE6, IE7 and Fx 3.6.x.

[holodoc]

The following solution should finally resolve the white line issue at the bottom.

Restore div.cat_bar to its original

Code Select Expand

div.cat_bar
{
background: #99abbf url(../images/theme/main_block.png) no-repeat 0 -160px;
padding-left: 9px;
height: 31px;
overflow: hidden;
margin-bottom: 1px;
}
and change the following code

Code Select Expand

div.roundframe div.cat_bar
{
background: #99abbf url(../images/theme/main_block.png) no-repeat 0 -240px;
}
to look like this

Code Select Expand

div.roundframe div.cat_bar
{
background: #99abbf url(../images/theme/main_block.png) no-repeat 0 -240px;
    margin-bottom: 0;
}
That should take care of the problem while avoiding to use negative margins and declaring new selectors which might cut off content.

[Sverre]

I haven't had the time to test your latest fix, but from the look of it, I think I would prefer that margin-top: 4px; was applied to the elements below the cat_bars, like in index.php?action=help, instead.

[holodoc]

I haven't had the time to test your latest fix, but from the look of it, I think I would prefer that margin-top: 4px; was applied to the elements below the cat_bars, like in index.php?action=help, instead.

I get it now what you were aiming at however that's an issue completely unrelated to the issues which the OP reported here Please refer to http://www.simplemachines.org/community/index.php?topic=409163.msg2851189#msg2851189 and take a look at the attached pictures for explanation what were the issues in this topic.

I am also not quite sure if adding space between the cat bars and elements beneath it would make the page more or less consistent with other pages since if you take a look around SMF you will notice that there are a lot of places where that space doesn't exist indicating a much higher bond between the bar and the element beneath it. That's why I will simply leave it to developers to decide if they want to add some space in there. If they do simple change of #basicinfo to look like this

Code Select Expand

#basicinfo
{
width: 20%;
float: left;
    margin-top:4px;
}
would do it.

[Sverre]

Yeah, I only brought it up here because your initial fix removed the space completely. As you said, the spacing below the cat bar is used consistently inconsistent throughout the software, so this could be by design, but if the developers choose to do something about it before 2.0 final, I'm definitely in favour of 3 or 4px.

[emanuele]

I can still see a small glitch with Chrome (under Linux, not tested on Windows).

Just after the (un)collapse the text is moved a bit higher (see attachment), it disappear when changing page. Seems related to the anchor in the url (#c11 in that case), since removing it it comes back to normal.
Works fine in Opera and FF4.

[Antechinus]

It was fine with Chrome on Windows, but I didn't test Chrome on Nix as I don't have Nix. Norv does though. Norv totally loves penguins. Blame Norv.

Yes, that bug is related to the collapse link for the categories. It was happening in all browsers and on all operating systems before the code changes for Final. If it's only happening with Chrome on Nix now I'd call that an improvement.

[emanuele]

It was fine with Chrome on Windows, but I didn't test Chrome on Nix as I don't have Nix. Norv does though. Norv totally loves penguins. Blame Norv.

I'd call that an improvement.

Yes absolutely! Reported just because I was testing.
Just noticed it still happens also with FF 3.6...a bit badly.

I'm rather dumb about styling, but why does the appearance change if the "#cXX"?
I know there should be a "target" thing in css, but I can't find it in Curve...don't waste time explaining, I'll find out if I really want to know.

But more important: why don't we fix it using "#category_7" instead of "#c7" since the first doesn't change the appearance and is positioned just few pixels above the one we are using now?

[Antechinus]

Beats me why the text was jumping if the category collapsed. One of the weirdest things I've seen. We didn't bother trying to nut out why it was doing it, we just concentrated on finding a way to make it behave.

[Joshua Dickerson]

Ant, I'm guessing you fixed this?

[Antechinus]

Yup. AFAIK it's fixed.