Sidebar was Blocked by Invisible Box: Resolved
I didn't know when my sidebar at my blog - AffiliateThinkTank.com was not clickable until I tried using Firefox browser a few days ago. I was editing my blog using Visual Editor and was shocked the sidebar was not clickable as it was working well in IE7.
My default browser is IE7 so didn't realized the problem. I quickly checked again using Safari and Google Chrome and indeed the non-clickable problem was not unique to Firefox but other browsers as well. From Google Chrome when I double clicked on the white space of the sidebar, there was an invisible box extended from the search box to the bottom of the page. So this is the culprit that was blocking my sidebar, see picture below.
Went back to double check my code and managed to find that it was this CSS code that created the problem.
After getting some advices from the Headway Premium Wordpress Theme Forum administrator, I added a limited height attributes (height:100px) to it and it seems to working fine now.
Well, look like it has solved the problem.
My default browser is IE7 so didn't realized the problem. I quickly checked again using Safari and Google Chrome and indeed the non-clickable problem was not unique to Firefox but other browsers as well. From Google Chrome when I double clicked on the white space of the sidebar, there was an invisible box extended from the search box to the bottom of the page. So this is the culprit that was blocking my sidebar, see picture below.
Went back to double check my code and managed to find that it was this CSS code that created the problem.
<div style="padding-left: 40px;"> body.custom div#my_absolute_div { position: absolute; top:30px; right:20px; bottom:5px; left:660px; } </div>
After getting some advices from the Headway Premium Wordpress Theme Forum administrator, I added a limited height attributes (height:100px) to it and it seems to working fine now.
<div style="padding-left: 40px;"> body.custom div#my_absolute_div { position: absolute; top:30px; right:20px; bottom:5px; left:660px; height:100px; }</div>
Well, look like it has solved the problem.
Comments
Post a Comment