Hi there guys and gals. I have this strange problem and I really can’t understand the reason for it. I made a video for you tu understand. It’s a mouse-hover problem. It only happens on my second computer’s browser (Firefox). On my other computer, using Firefox everything is ok. I tested it with Safari and Chrome and it works correctly… here on my first PC I have this problem and I really don’t know how to fix it. Live link: http://www.forumapicoltura.com/conversations/forum-di-benvenuto
Thank you for your reply RyanReese, I tried your solution but adding the inline-block it just create a vertical list and I don’t want it to display as a vertical list. I need them to stay as they are now (at least when I don’t go over them with my mouse pointer). The floating element occur even if I only add the display:inline-block to the .tabs li element without removing the float:left.
What? The inline-block should have made them behave exactly the same as floating. I just did it again and confirmed that they are still a horizontal list.
Yes, I did something wrong. I was operating on the wrong CSS id. But now I have anther problem with the icon and the text “Tutti i forum” which is going too much on the left. I see the same problem on your screen.
Remove the margin-left:-129px; on “#conversationsFilter .channelListItem”
Heck, every single list item there seems to have a huge negative margin. Remove all of them. Let’s see what problem you are attempting to band-aid fix .
Yeah I’m not updating the live site because I was trying to found a definitive fix before changing the original files and put them live. I tried all the things you suggested and I thank you a lot for your time, but I still end with a non-well aligned thing and I don’t like it. I think that I’ll leave it as it is, as for now the problem seems only to occur on my Firefox browser… an others browsers it doesn’t happen. I also tried clearing the cache.
Yes but the “problem” is that here on my Mac Pro on Firefox I have the problem. On my portatile Mac Book Pro, still Firefox (same version) the problem does not occur.
You are adding a border to the anchor when selected and trying to offset it with a negative margin which is probably causing the float snag.
Rather than using a negative margin just apply a transparent border by default and then there will be no change in dimensions when you color the border.
.tabs li a{border:1px solid transparent}
.tabs li.selected a {
background-color: #fff;
border-color:#d5d5d5;
color: #666;
}
On “.tabs li a:hover” you give margin:-1px; which is causing the jump.
You presumably do that to offset the border you are setting but on “.tabs li > a” you already have a 1px transparent border set so you aren’t adding any width .
I just added my network navigation bar to forumapicoltura.com. I had to edit some CSS rules to make it work but now it’s ok. The problem comes when I click on “New Reply” (Rispondi - in Italian)… the navigation bar has taken too much space on the top and the reply function comes with a problem. Normally when you click on “reply”, it scrolls the page to the reply box, which is a text area… but now it goes down to much, and you have to go back up with the vertical navigation. You can check it by yourself doing this way:
Now if you click (on the right) on the button “+ Rispondi” you see that the page goes too much down. How could I fix this problem? Any help is much appreciated!
And as far as I see the scrolling function problem is not related only to the reply function. Even when I go into a forum section is the same.
If you take away your sticky header / nav you will see it goes exactly to the top of the reply.
You need to rework your Javascript to scroll to #reply but also add in the height for the header/nav so it doesn’t scroll so far. I moved this to the Javascript forum for them to look at.
Yeah, basically I need to add the height of the nav / sticky header to the Javascript for the scrolling functions. Ok, theorically. Pratically, what the hell do I need to do? LOL
.
.
