I had a problem with share buttons being cut off at the bottom on my site and have fixed using this helpful post:
Bottoms of share and other buttons cut off
Now I am trying to to do the same for the little button bubble that shows the counter next to the share button.
Originally had this problem:
Now I have fixed the buttons but the bubble counter is still the same, but not all of them as you can see from image:
Not sure what CSS I need to fix. I tried using inspect element from right clicking using browser but not sure what code to rework.
Many thanks for any helpful tips to get me on my way.
Andrew
Try adding:
.stButton .stButton_gradient
{
height: 22px;
}
This is what I get under Chrome on Windows:
I've just started a new project for my clan. First i worked in chrome, but one of my friends told me there was a strange problem with the site. At the top of the page there is a white space, but this happens only in Mozilla. When i inspect it, it says it's apart html. I've triple checked the css for margins and paddings, but i couldn't find the problem.
Here is the CSS:
https://docs.google.com/file/d/0B8jNXRky-LW_aUw4Z1hXVlVwbHM/edit?usp=sharing
This is quite a strange issue. I see it in chrome also. It seems to go away if I add display:inline-block to .content
I'm looking through it atm but i am unable to find why it requires this. will edit if I find
EDIT:
its the span inside .content it has a lot of margins / padding on top of it, it is shoving everything else down. You need to modify this
I have a mysterious (at least for me) css background image problem, that I run into only with Google Chrome. I have found similar topics, but unlike those, here no Javascript, JQuery or anything else is involved, it is pure CSS. It's just not working as it should.
If you open up the page www.bodrogietterem.hu, the background image should be below the entire content area (as it is in other browsers). In Chrome a horizontal and vertical white area is appearing.
Once you start scrolling, the background image appears all okay, and it stays there from then on. Similarly, when you open the dev tool with inspect element, the background image is immediately there, and stays there, too.
this is the pertaining css:
body.page-node-1 div#main{
background:#FFFFFF url('/sites/all/themes/bodrogietterem/images/bodrogi_bodrogi.jpg') bottom;
background-repeat:no-repeat;
background-attachment:fixed;
background-position:50% 135px;
padding-bottom:0px;
margin-bottom:0px;
}
and attaching two screengrabs on how it looks like, and how it should look like (well, I'm not allowed to attach these, as a new user, but have a look here:
http://www.bodrogietterem.hu/chrome_issue.JPG
and here
http://www.bodrogietterem.hu/should_look_like.JPG
It happens on sub-pages, too, but I think the root of the problem must be the same.
I'm using Vista, with up to date Chrome (20.0.1132.57), and up to date other browsers. btw, the second screenshot was taken in Chrome, too, but after opening the dev tool
many thanks for your kind help,
bests,
Zsolt
The latest version of Chrome is 21.0... so try updating chrome browser and see if it appears ok in the latest version. The screenshots lead to a 404 error page, so try uploading the screenshots again.
I also checked the page in IE7, IE8, IE9 the page looks good in all 3, IE7 however shows a horizontal scrollbar at bottom but the background image looks ok.
Your page looks fine in Chrome in windows 7 (Chrome 20.0.1132.57)
I have had problems in the past where various toolbars / addons that have been installed interfere with the CSS on a page quite significantly rendering Chrome to appear to bug out in isolated incidents. Try running chrome with no addons / plgins installed and see if it fixes your problem.
One observation on your CSS: #content contains floated elements that aren't cleared. I dont think that's the problem here but could be mixed with the above possibly.
Let me know if that helps at all.
Thanks for your helpful thoughts, I finally managed to resolve the problem.
While fiddling around, I measured the height of the white area, and it turned out to be 135px (which is exactly the top position of the background in the CSS above). So I decided that for whatever reason, that attribute was causing the problem, and I was right.
as a quick and dirty solution, I added 135px of white area to the top of the background image, and set the background-position property's top to 0px - which immediately fixed the issue.
as for the vertical white area, it was resolved by binding the background image to the #main-wrapper div instead of the #main div (it is a Drupal 7 build). Again, I don't exactly know why, but it fixed the problem instantly.
I love, how the web should be precise and logical, and it still stays random and ad hoc at times
thanks again for your time and effort, bests,
Zsolt
Had the same problem with two pages of http://www.stoerbeton.nl but I think I solved it after reading your above posts and some thinking.
The problem was probably in the general background: url; attribute and loading of the website css. I replaced all general background: #222222 url repeat etc.; for background-image:; , background-repeat:; and background-color:; etc.
Please let me know if your website works after editing your css. I'm still testing.
Greets, aquaster.nl
I am having trouble getting the facebook pop out dialog to be on top of my nav bar and slideshow here:
http://d14599.u62.c14.ixinstant.com
I have search for several hours and all the solutions have not seemed to work. Here is a list of what I have checked:
-overflow:hidden on other page elements causes problems. I looked into this but my nav bar does not have this property.
-z- index only works for positioned elements. I made sure my elements were positioned relative or absolute.
-I tried directly styling the js created facebook elements using things like
.fb_iframe_widget{
display:block !important;
z-index:9999 !important;
}
I'm not that good with CSS but have never been stuck this long on one single issue.
I am assuming the issue actually is with something I have done wrong elsewhere on the page, like the navbar itself, but I cannot see what it is. Any thoughts would be greatly appreciated.
I searched lot of things and tried it too but no solutions worked for me. I found one quick fix to solve facebook like dialogbox overlap issue here and it worked for me.
Hope it could save others time, Cheers!
It doesn't really solve the issue, but what I have done is to hide the comment box. For this case it was acceptable. In the css file I added:
.fb_edge_widget_with_comment span.fb_edge_comment_widget {
display:none;
}
What worked for me was to set the z-index for the element that holds the Facebook like button to be higher than the element the comment box was shown behind.
Please have a look at http://bestofyoutube.com. Anyone who knows what I am doing wrong here?
Seems like the IE (version 7+8) put the menu a lot further down then what Safari/Chrome/Firefox do. The little pic I have to the right when people log is also completely thrown out of the normal standard in Internet Explorer (The others worked fine).
Screen shot on IE:
Appreciate any help I can get. Thanks!
Interesting bug in IE. To be quickly fixed you need to add in your stylesheet.css this code:
body {
margin-top:0;
padding-top:8px;
}
In good to iterate over the options with top padding, removing it from the body.
I think IE tries to draw invisible borders for your menu table.
Try to disable borders for this table.
And don't forget about table cells padding/margin.