I've set the Linkedin Follow button within a hidden element, so only when you hover an icon, the hidden element becomes visible and button is shown.
Problem is that in Firefox v35.0.1 the followers number is shown not on the same row, as if there is no enough space on the same row. Look at the photo:
When I'm expecting the source code it seems the iframe is being set width and height in the moment of becoming visible (on hover) and then (on blur) its width/height is set back to 0. In Chrome the iframe has a constant width/height, which doesn't change on hover.
I tried to set the iframe width with css, which didn't work because when I expected the code it turned out there is another iframe in the Linkedin iframe and the internal iframe has again wrong dimensions.
Any ideas?
UPDATE: when I set the wrapping element to be visible all is good, so this seems to cause the problem, but how can I fix it?
UPDATE 2: You can see the problem yourself: link (make sure open it in Firefox!)
EDIT: Someone edited my post removing Linkedin tag from it, but I truly believe that this is more their issue than Firefox's or CSS, as there is something within their javascript that adds the width/height to the button iframe and adds them wrong. Also in IE the same issue appears. I added the button twice - first time as it was and second time in a visible wrapper and it's obvious that in the visible wrapper all is OK, though in the hidden wrapper is broken.
UPDATE 3: I realized that the button iframe width is the same as its #body element's 'min-width: 57px', so if Linkedin team correct that min-width to let's say 120px this may solve this problem.
problem is here :
in firefox the loaded width are 2px in the element but in webkit(chrome and opera) are 106px.
the style is not making enough width to show elements in one line.
and here is answer :
.social-details {
width: 195px;
/* float: left; */
position: absolute;
left: -120px;
top: -7px;
background-color: white;
padding: 11px 10px 8px 10px;
z-index: -1;
border-radius: 5px;
visibility: hidden;
}
and
#social .social-linkedin:hover .social-details {
visibility: visible;
}
its allow the element load with 106px of width and it is hidden to users.
Related
I have problem with scrollbar with an inner container. The main issue is that scrolling the mouse wheel only scrolls the outer scrollbar while I expect the inner scrollbar to scroll when I'm hover it and also why is the scrollbar styled differently (at least in Chrome, in Firefox it shows ok)?. I am not sure what is happening but I think it's caused by CSS somehow. I use Bootstrap framework (BS3 and BS4 both show the problem) and the row container has the following CSS
{
position: absolute;
width: 100%;
overflow: auto;
border: 1px solid #c0c0c0;
background-color: #f7f7f7;
padding: 0;
z-index: 1000;
vertical-align: middle;
display: block;
}
You can see from the print screen below that the scrollbar is styled differently (there's no top/bottom arrows at least in Chrome), I have no clue why and I didn't apply any styling to the scrollbar.
There's a live demo here Angular-Slickgrid - Row Detail, click on the "+" icon to open any of the row detail container. Also note that I'm the author of Angular-Slickgrid (which is a wrapper library of SlickGrid) and it's a library used by few hundred people.
However note that the same demo works in SlickGrid - Row Detail which basically the same demo but in plain html/css, it uses jQueryUI instead of Bootstrap.
It might actually be Angular that cancels the scroll, I see this mousewheel event handler and if I remove it then it works
I'm doing all of this to modify an already existing website using an extension called Stylus. Also, I'm doing this on Android. I use a browser called Kiwi Browser. It supports extensions.
I'm trying to make an element that sticks to the right of the screen so as to hide the scroll indicator on Android.
I can't hide that with ::-webkit-scrollbar {display: none} or any variation of it because that element seems to be part of Android. My current solution is to add border-right: 5px solid gray !important to the body element or any element where that would work.
I exaggerated the width there a bit so it'd very visible. With that border in place, the scroll indicator becomes invisible or unnoticeable because it has the same color as the border. Now, my problem is that when I zoom in on the page, especially on the very left part of the page, that scroll indicator is noticeable again. That's why now I want to try using ::after. I'm trying to create an element that will stick to the right of screen even if I zoom in. I also don't want it to float. I want it to occupy space so that the content of the page will resize. I tried this code (which I also found here on stack) but it didn't work:
body::after{
content: " ";
position: -webkit-sticky !important;
position: sticky !important;
top: 0;
right: 0;
background: gray;
height: 100%;
width: 10px;
z-index: 9999 !important;
}
I use Kiwi Browser to read manga and comics. And the reason I want to hide that scroll indicator is because when you touch any part of the screen, that indicator appears and I can see how much is left from what I'm reading and that really ruins the mood for me.
Edit:
It seems that half of what I want to accomplish is not possible with just CSS. For reference: Prevent that a fixed element resizes when zooming on touchscreen
I'm using chrome and when I go to this page the menu is not visible. The menu is the 3 lines button at the top right. If you go now and open the inspector the element is hidden because is above the header. Now if you refresh the page the menu is correctly positioned. Also happens in chromium. The page in question is: http://playszone.com/ (Don't click on the link, read below)
In order to reproduce the problem you should not click on the link. Open a new tab and copy paste the url. Then refresh the page.
If you go to inspector and disable and enable the position on the body > .wrapper > header > .icons it will show at the right place. I really cannot understand what is making the page to wrongly position the element, only when open in a new tab and write the site url.
What is the problem? Is my fault or what?
Add this, it fixes it. bottom: 1px
.icons {
display: inline-block;
height: 55px;
position: absolute;
right: 0;
bottom: 1px;
}
Or...
.icons {
display: inline-block;
height: 55px;
float: right;
}
Actually it's not in the right place. It's in the "same place" in the code, but when you hover the code of the "icons" div, it shows you on the page that it's actually a little bit lower, behind your white menu and since the menu is probably rendered on top of it, you can't see it.
A quick fix would probably be to set the "icons" div with absolute positionning and setting the position-top to 0px.
So, I'm getting this strange styling bug.
You can use Firebug or inspect element on the website here: www.leapfm.com but won't be able to see edit, and destroy as that's admin only.
However, the main issue is that when I go into admin. The space between songs stays the same even though there are buttons there. Why is this? and What can I do to fix it?
I tried to fix it with this code (no luck)
.admin {
margin: 0px 0px 10px 350px;
}
I guess it's some kind of list order or unordered.
Then how about making it like so:
ul li { position: realtive; padding: 0 100px 0 0; } /*where the paddinh must be a little bigger then the admin size*/
ul li .admin { position: absolute; top: 0; right:0; }
You have a height property set to .song class.
By defining a height property you make the element always stay in that specific height, regardless of content. The overflow is by default visible, but if you hide the overflow, you will see clipped buttons.
So in order to make your boxes expand automatically when there is more content (i.e. buttons) there, remove the height property.
At the top of a website I'm currently working on, I defined a «Skip to content»-Link with the following markup:
Skip to content
I placed this link somewhere outside the viewport, using CSS position: absolute. As soon as somebody focusses the link (when «tabbing» trough the page), the link gets moved back to the viewport and it pushes the content below down a bit, so it gets the space it needs.
#skip-to-content {
display: block;
text-align: center;
position: absolute;
top: -999px;
}
#skip-to-content:focus {
position: static;
outline: 0 none;
border: 1px solid #681;
top: 0;
}
If you now click the link, my browser skips to the content correctly, but after that the link looses focus, so the content slips up again a little bit (because the link above gets moved out of the viewport again). So in the end, you need to scroll up a little bit to see the beginning of the content. It looks, as if the anchor link would skip too far.
Is there any way I can make sure, the link always skips to the content and not some pixels below?
Please don't suggest any JavaScript-Solutions, this is basic functionality that needs to work in every browser. Thanks for your help.
— André
While not an elegant solution, try adding this to your CSS, it may give you an idea of how to fix it.
#content {
margin-top: -60px;
padding: 60px 1.1em 1.1em;/*add approx 1.1em in px for top padding here*/
}
Where 60px is the approximate added height when the skip link is visible. It's just moving the top edge of #content up a little bit. You can try different measurements to get the padding back to where it needs to be. I didn't want to suggest wrapper divs or anything, but that could work to give you the exact 1.1em top padding you originally had.
If you can figure out the exact total added height when the link is visible, use that measurement in ems instead of px.
You could just not reset the position back to static in your :focus rule.