Scroll when have hover feature in place [SOLVED]

[MisforM]

tothelimit.freeforums.net/

Is it just me (it could be just my computer after all) or when I hover the first circle I can't really scroll?  Is there a way to fix this?  I'm new to the messing around with board stuff, but I do have some coding knowledge (albeit self-taught), so my code probably is buggy and has some unnecessary stuff, but I'll post what I have for my board list. 

EDIT: One can scroll if they just click a place where the scroll bar isn't, but if they try to drag and scroll it, then it tries to pick up the image behind it.

SPOILER: Click to show

<style>
.boards table.list { float: left; width: 33%;  table-layout: fixed; }
.boards table.list .board > td { height: 100px; border:none; }
.boards table.list .main { width: auto; }
.boards table.list.first.last { width: 100%; }
.boards table.list { float: left; width: 33%; }
.ie7 .boards table.list { width: 33%; }
.boards .main { width: 100%; text-align: @board_align_main; }
.boards .threads { width: 100%; text-align: @board_align_threads; white-space: nowrap; }
.boards .posts { width: 100%; text-align: @board_align_posts; white-space: nowrap; }
.boards .latest { width: 100%%; text-align: left!important; margin-top:20px;}
.link {font-size:14px!important;position:relative;top:-8px;left:8px;
}
/*change the margin to make the 3 boards centered in the row*/
#make_square{
width:250px;
height:250px;
margin:4px;
padding-top:8px;
}
/*board with no post message*/
#no_post_here{
position:relative;top:120px;
height:20px;
}    
</style>

{foreach $[board]}
   <table class="list{if $[board.odd]} odd{/if}{if $[board.even]} even{/if}{if $[board.index] == 3} first{/if}{if $[board.index] == $[board.lastIndex]} last{/if}" role="grid">
<tbody>
           {if !$[board.is_redirect]}
               <tr id="$[board.content_id]" class="$[board.content_class]">
                   <td>
<div id="make_square">
                               
<td class="special" colspan="3"><div style="margin-left:-50px;"><a href="$[board.href]"><div class="reddboard" style="background-image:url('$[board.display_name]');background-size:cover;">
                       <div class="reddbop"><div class="reddboh"><center><hr>
                           <p class="description">$[board.description]</p>
                           <hr></center></div></div></div></a>
               <center><table style="margin-top:15px;margin-bottom:25px;"><tr><td class="reddtp"><center>$[board.posts] posts</center></td><td style="width:50px;"></td><td class="reddtp"><center>$[board.threads] threads</center></td></tr></table></center>
              <br /> <div class="board-last-post"><span>
           <center><div class="reddlast">
               {if $[board.posts] > 0}
               {if $[board.last_thread]}$[board.last_thread.recent_link]
               by $[board.last_thread.last_post.created_by_user] $[board.last_thread.last_post.date]
               {/if}
               {/if}
            </div>
            </center>
            </span>
   </div></div></td>
                    </div>
</td>
</tr>
</tbody>
<table>
{else}
<table>
<tr id="$[board.content_id]" class="$[board.content_class]">
<td class="special" colspan="3" ><div style="margin-left:-100px;"><a href="$[board.href]"><div class="reddboard" style="background-image:url('$[board.display_name]');background-size:cover;">
                       <div class="reddbop"><div class="reddboh"><center><hr>
                           <p class="description">$[board.description]</p>
                           <hr></center></div></div></div></a>
               <center><table style="margin-top:15px;margin-bottom:25px;"><tr><td class="reddtp"><center>$[board.posts] posts</center></td><td style="width:50px;"></td><td class="reddtp"><center>$[board.threads] threads</center></td></tr></table></center>
              <br /> <div class="board-last-post"><span>
           <center><div class="reddlast">
               {if $[board.posts] > 0}
               {if $[board.last_thread]}$[board.last_thread.recent_link]
               by $[board.last_thread.last_post.created_by_user] $[board.last_thread.last_post.date]
               {/if}
               {/if}
            </div>
            </center>
            </span>
                   </div></div></td>
</tr>
{/if}
</table>

{/foreach}
{if !$[board]}
<table class="list" role="grid"><tbody><tr class="last"><td class="last center" colspan="5">No boards were found.</td></tr></tbody></table>
{/if}
           




<style>
.reddbop {
       position: absolute;
       width: 250px;
       height: 260px;
       opacity: 0;
    margin-top:-5px;
    display:table;
    border-radius:400px;
       -webkit-transition-duration: .8s;
       transition-duration: .8s;
       -moz-transition-duration: .8s;
-o-transition: .8s;
}
   
.reddbop:hover {
       opacity: .5;
}

.reddboh {
   background-color:#000000;
   width:250px;
   height:50px;
   color:#fff !important;
   display:table-cell;
   vertical-align:middle;
   padding:25px;
   border-radius:400px;
}

.reddboard {
   border:5px #000 solid;
   width:250px;
   height:250px;
   border-radius:300px;
}
.reddtable {
   padding:50px;
}
.reddlast {
   width:250px;
   margin-bottom:10px;
   min-height:25px;
   font-size:13px;
}
   
.reddtp {
   width:200px;
   height:30px;
   font-size:15px;
}
   
.description {
height:125px;
   overflow:auto;
}
   
</style>


[Tumbleweed]

MisforM ,

It works fine on Chrome and IE for me, but FF it does not and does what you said but it does it to me on all of your images that have a scroll. I'll take a quick look and see if I see anything that stands out in the coding you posted and if I don't, I'll try to toss that on a test site and see what I can figure out but meanwhile, anyone else can jump in here if they can help as not sure if I'll get at it yet tonight. (I actually also have a test site where I did round boards probably over a year ago so may be able to refer to what I did in case I get stumped.)

Oh, also wanted to ask, is this someones theme you are using as it would be better if you asked the person who created this.  Actually, rereading your first post, sounds like this is your coding.  

Edit, I saw nothing in your coding that stood out as funky so I tossed it on my test site. What is odd is you can drag it anywhere within the hover square on FF, at least for me.  This might have to wait until I get some sleep as I've never ran into something like this before and I'm hoping I'll have a enlightened moment when I am bright eyed and bushy tailed tomorrow after a nights sleep  lol Anyway, this is weird.


MisforM , I did some searching online and ran across this. I didn't expect it to work but it fixed most of it. When I say, most of it, I mean I can actually manually use the scroll bar without the circle moving. Before no matter where I put my mouse it would drag the circle. Now if I get my mouse lined up right at the black border of the circle, I can drag it but nowhere else. I have no idea why it does that. But after some testing, I decided the home template might be the best place for the code so it doesn't affect other pages, just the home page. 

[MisforM]

Tumbleweed ,

Thank you!  I'll definitely try that!  It's not actually a custom theme anywhere, its actually me just trying to get a hang of coding and stuff myself and see what I can end up doing.  That site is where I'm testing it all on.  I wouldn't be asking for help, really, except for the fact I've done a lot and I just can't seem to figure it out.  Hopefully it'll work since it worked with you!

*** EDIT: That fixed the scrolling problem!  Thank you so much! ***

There's another problem that's also presented itself.  When there are three sub-boards on the second board, it messes up the main page weirdly, but if I rearrange it so its not the second board with three sub-boards, it goes back to normal.  D'you know how to fix this? 

EDIT2: It seems to do that occasionally when threads are added to boards too not just sub-boards. 

EDIT3: Why am I editing this so often?  Probably because its late, but anyways.  There is some CSS that isn't in that Board List area, that i just have in my Style Sheet, which if you want I can provide for you. 

SPOILER: Click to show

[Tumbleweed]

MisforM ,

I was editing my post a lot too as things came up so no biggy.

I'm not quit sure what you mean by messes up and I appreciate the screen shot but can you point out what is wrong.

[MisforM]

Tumbleweed ,

Yes totally! The screen shot shows the first three boards just fine, but then there's like an empty space for two boards, and then three more boards. If I move the second board, I'll screen shot what happens, and how it should look in a second screen shot.

Second Board has three sub-boards in it.

SPOILER: Click to show

Move the three sub-boards to the third board, only sub-boards were moved.

SPOILER: Click to show

[Tumbleweed]

I think the use of boards and sub-boards is confusing me.

So I guess I'll ask some questions.
1. Aren't just boards supposed to show as circles and not sub-boards?
2. How many boards should show in each category?

I know that when you have an odd number of boards, like say 4 boards that 4th board of course gets put in a new row and looks odd so some tweaking has to be done as to how you want that odd board to show.


I do get you have two empty spaces where boards should be but isn't that because you don't have 3 or 6 boards in that category? I apologize for being confused.

[MisforM]

Tumbleweed ,

It's no problem at all, I'm probably being confusing, I tend to be confusing at times, and for that I apologize. 

However, the sub-boards are also the circles inside the board, which is what I wanted, and it happened, but adding specifically three sub-board causes the second row to move over two slots like in the second preview.  There's 6 boards on the main page regardless, except the second board either has no sub-boards as shown in the second screen shot, or three sub-boards in the first screen shot. 

[Tumbleweed]

Feb 27, 2016 13:51:07 GMT -8 MisforM said:

Tumbleweed ,

It's no problem at all, I'm probably being confusing, I tend to be confusing at times, and for that I apologize. 

However, the sub-boards are also the circles inside the board, which is what I wanted, and it happened, but adding specifically three sub-board causes the second row to move over two slots like in the second preview.  There's 6 boards on the main page regardless, except the second board either has no sub-boards as shown in the second screen shot, or three sub-boards in the first screen shot. 

O.K. I get what you are saying, I pretty sure anyway. I've never had sub-board be on the main page like that so I need to think about this and fiddle with things on my own test site. I'm wondering if it has something to so with those sub-boards trying to stay connected to their parent board but I'm not sure. Give me some time to think and fiddle and maybe cross your fingers too because I'm not sure I'll come up with a answer.

[MisforM]

Tumbleweed ,

The Sub-boards aren't on the main page, they are inside the main page boards.  If that makes sense. 

Basically:
Board 1
Board 2 - with 3 sub-boards
Board 3
Board 4
Board 5
Board 6

Results in the messed up one, but with no sub-boards its normal.

[Tumbleweed]

Feb 27, 2016 14:38:16 GMT -8 MisforM said:

Tumbleweed ,

The Sub-boards aren't on the main page, they are inside the main page boards.  If that makes sense. 

Basically:
Board 1
Board 2 - with 3 sub-boards
Board 3
Board 4
Board 5
Board 6

Results in the messed up one, but with no sub-boards its normal.

I'm sure you feel like you have been talking to a brick wall by now. lol So now reading your last post and then going back and reading your other ones again, I get it and was able to replicate it on my test site so now I can dig in to why this is happening.  Stay tuned as this might take some digging.

Just wanted to do a update before I head to bed. I think I pinned it down to something in the class area ".reddboard". If I comment out the css for that class, all the boards go back and are lined up correctly. If I just comment out the width and height, again, all lined up correctly but of course you have no circles so now I just have to find why. But need to get some zzz's first. I don't want to sleep away my whole day off tomorrow. LOL

Another update: I just realized you have a div surrounding a td tag. You really can't do that because a table is all interconnected. It's this part:


<td>

<div id="make_square">

<td class="special" colspan="3">

As you can see you have a opening td and then another opening td without a closing of the first td so that has to confuse the browser. Plus that divide around the td tag. Divides can only be inside a td tag. So I'm working on how best to do this and check for any other coding errors. You can put a divide around a whole table or within td tags but not outside a td tag if that makes sense.

Edit again. Now I fixed so all boards are showing like they should. Now I just have to make each board look like you had it. Back at it again, and I'm not sure where you want your posts and threads. You have them in the template but they don't show on your site or any of the screen caps so I'm not sure where you intended them to be. If you want, I could just give you the fixed version (as far as the boards lining up) and you can take it from here or I can get things more where you want them.

[MisforM]

I was actually trying to to remove the posts and boards thing. I could totally take what you have and see what I can do from there. I really appreciate your help Tumbleweed!

[Tumbleweed]

Here ya go and sorry for the delay. I just included the css right with the template. Not sure about you but I leave my css there until I get things perfected.
Anyway, my tip for you is when you are positioning something, throw a border in the css so you can see what you are dealing with. If you had done that with some of the div's and td tags, you probably would have seen where you went wrong. Let me know if you have any issues and I'll try to help.





<style>
.boards table.list { float: left; width: 33%; table-layout:fixed;height:350px; margin-left:3px;   }
.boards table.list .board > td { height: 350px;}
.boards table.list .main { width: auto; }
.boards table.list.first.last { width: 100%; }
.ie7 .boards table.list { width: 33%; }
.boards .main { width: 100%; text-align: @board_align_main; }
.boards .threads { width: 100%; text-align: @board_align_threads; white-space: nowrap; }
.boards .posts { width: 100%; text-align: @board_align_posts; white-space: nowrap; }
.boards .latest { width: 100%; text-align: left!important; margin-top:20px;}
.link {font-size:14px!important;position:relative;top:-8px;left:8px;
}
/*change the margin to make the 3 boards centered in the row*/
.make_square{
width:320px;
height:320px;
margin:4px;
padding-top:8px;
}
board with no post message*/
#no_post_here{
position:relative;
top:120px;
height:20px;
}    
.reddbop {
position: absolute;
width: 250px;
height: 260px;
opacity: 0;
margin-top:-5px;
display:table;
border-radius:400px;
-webkit-transition-duration: .8s;
transition-duration: .8s;
-moz-transition-duration: .8s;
-o-transition: .8s;
}
.reddbop:hover {
opacity: .5;
}
.reddboh {
   background-color:#000000;
   width:250px;
   height:50px;
   color:#fff !important;
   display:table-cell;
   vertical-align:middle;
   padding:25px;
   border-radius:400px;
}
.reddboard {
border:5px #000 solid;
width:250px;
height:250px;
border-radius:50%;
margin:auto;
}
.reddtable {
   padding:50px;
}
.reddlast {
   width:250px;
   margin-bottom:10px;
   min-height:25px;
   font-size:13px;
}
.reddtp {
   width:200px;
   height:30px;
   font-size:15px;
}
.description {
height:125px;
overflow:auto;
}
</style>>





{foreach $[board]}
<table class="list{if $[board.odd]} odd{/if}{if $[board.even]} even{/if}{if $[board.index] == 3} first{/if}{if $[board.index] == $[board.lastIndex]} last{/if}" role="grid">
<tbody>
{if !$[board.is_redirect]}
<tr id="$[board.content_id]" class="$[board.content_class]">
<td class="special" colspan="3" >
<div class="make_square">
<a href="$[board.href]">
<div class="reddboard" style="background-image:url('$[board.display_name]');background-size:cover;">
<div class="reddbop">
<div class="reddboh">
<center>
<hr>
<p class="description">$[board.description]</p>
<hr>
</center>
</div>
</div>
</div>
</a>
<!--<center>
<table style="position:relative;bottom:8px;border:1px solid green;">
<tr>
<td class="reddtp"><center>$[board.posts] posts</center></td>
<td style="width:50px;"></td>
<td class="reddtp"><center>$[board.threads] threads</center></td>
</tr>
</table>
</center>-->
              <br />
<div class="board-last-post">
<span>
<center>
<div class="reddlast">
{if $[board.posts] > 0}
{if $[board.last_thread]}$[board.last_thread.recent_link]
by $[board.last_thread.last_post.created_by_user] $[board.last_thread.last_post.date]
{/if}
{/if}
</div>
</center>
</span>
</div>
</div>
</td>
</tr>
</tbody>
<table>
{else}
<table>
<tr id="$[board.content_id]" class="$[board.content_class]">
<td class="special" colspan="3" >
<div class="make_square">
<a href="$[board.href]">
<div class="reddboard" style="background-image:url('$[board.display_name]');background-size:cover;">
<div class="reddbop">
<div class="reddboh">
<center>
<hr>
<p class="description">$[board.description]</p>
<hr>
</center>
</div>
</div>
</div>
</a>
<center>
<table style="margin-top:15px;margin-bottom:25px;">
<tr>
<td class="reddtp"> <center>$[board.posts] posts</center></td>
<td style="width:50px;"></td>
<td class="reddtp"><center>$[board.threads] threads</center></td>
</tr>
</table>
</center>
              <br />
<div class="board-last-post">
<span>
<center>
<div class="reddlast">
{if $[board.posts] > 0}
{if $[board.last_thread]}$[board.last_thread.recent_link]
by $[board.last_thread.last_post.created_by_user] $[board.last_thread.last_post.date]
{/if}
{/if}
</div>
</center>
</span>
</div>
</div>
</td>
</tr>
{/if}
</table>
{/foreach}
{if !$[board]}
<table class="list" role="grid"><tbody><tr class="last"><td class="last center" colspan="5">No boards were found.</td></tr></tbody></table>
{/if}
           





[MisforM]

Thank you so much!  It works perfectly!  I had kept trying and hitting dead ends, but I'll definitely keep the css until its perfect next time.  I'll end up comparing the original layout to this one, so I can see exactly everything that was changed, that way I can learn.  Again, I cannot express to you how much I appreciate your help!

[Tumbleweed]

Mar 4, 2016 0:18:35 GMT -8 MisforM said:

Thank you so much!  It works perfectly!  I had kept trying and hitting dead ends, but I'll definitely keep the css until its perfect next time.  I'll end up comparing the original layout to this one, so I can see exactly everything that was changed, that way I can learn.  Again, I cannot express to you how much I appreciate your help!

You're welcome. Not much was changed. Just moving that <div class="make_square"> inside the td tag and removing the extra td tag and I might have made a couple tweaks in the css.