Breaking catbg.

[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.