I have a WordPress site in development that seems to have a CSS issue that I cannot find. I installed the plugin AJAX Event Calendar and dropped its shortcode [calendar] in the page editor. That works as intended, but there is something pushing the calendar down somewhere in the neighborhood of 400 plus pixels. I've checked all containing divs, and the calendar divs as well. I also see no errors in the console. I just can't seem to locate what's pushing it down.
The page in question can be seen here.
in your custom.css file fix this:
#aec-container {
position: relative;
float: none;
}
with this:
#aec-container {
position: relative;
float: left;
}
i tried and it works.
Related
I have integrated Google One Tap into my website. The login process works well on desktop, but on mobile, there is a horizontal scroll after logging in. It's also important to note that the direction of the website is right-to-left.
Following a user's sign-in, Google adds an empty <div> with the ID "g_a11y_announcement" at the end of the <body>:
It has the following CSS attributes:
#g_a11y_announcement {
height: 1px;
left: -10000px;
overflow: hidden;
position: absolute;
top: auto;
width: 1px;
}
I get a blank screen right after signing in because of a 10,000 pixel overflow:
Unfortunately, I can't share a link to my website, but taking this element out of the DOM removes the scrollbar.
There's no documentation on this <div> or how to tell Google One Tap that the page is right-to-left. The only solution I can think of is to override the CSS, but I don't want my application to be blocked by Google.
#g_a11y_announcement {
display: none;
}
What is the purpose of this <div>? Is there another solution that I am missing?
I have same problem like you, I resolved for first moment this problem on next way:
after logout I redirected on login page by window.location, I know thats not right answer for this problem but that will resolve for first, problem is because in this solution app will refresh
Rather than hiding the div completely, I moved it to the right when the page direction is right-to-left. The solution below uses the SASS parent selector to check the direction.
#g_a11y_announcement {
[dir="rtl"] & {
left: auto;
right: -10000px;
}
}
The only downside to this solution is that it could break if Google changes the One Tap implementation.
I haven't touched anything, so I think it may have been a chrome update that happened recently. But my menu, which is div with nested ul's, randomly loads invisible.
If you open developer tools (F12) and mess with any of the css, it automatically reappears. I can add a style that is completely invalid css, just make stuff up, and the menu will re-appear.
Can anyone help me find what is causing this?
I'm on Chrome 33.0.1750.146 m
My guess is that your menu CSS or JS is improperly setting the heights of all the parent ul elements to height: 0. Upon hover, they expand.
Take my comment above to heart and restructure your menu with a single top-level ul, and make sure you're only hiding ul ul on load.
You might also try setting z-index on those top-level ul elements instead of their children:
#navbar ul {
position: relative;
z-index: 1;
}
This is your cuplrit. In css mc_grid3.css:
There is :
.container:after, .header:after, .header-bottom:after, .navbar:after, .main:after, .content:after, .content div:after, .subcontent:after, .subcontent div:after, .footer:after {
content: ".";
display: block;
height: 0; // Remove this
clear: both;
visibility: hidden; // Remove this too
}
Or remove .header-bottom:after from the above css rule.
Thanks for the input guys. I understand some of my html is bad, and I will take your advice to clean it up. However like I said, everything worked fine until recently w/ no code changes.
I decided to rip out the entire menu and replace it w/ modern html/css and in doing so, I discovered the problem. I was using font 'FuturaMedium' as my menu font, and the latest update to Chrome 33.0.1750.146 introduced some bugs with fonts. So even my brand new css menu wouldn't work with that font.
For now I pulled the font and I will figure out what I need to do to fix it. Again, thanks.
Link to bug
I'm using a plugin to display vote buttons on my wordpress install.
Plugin loads the css from an external source (plugin owner site).
Since I can't touch that css I'm using custom.css to change the positioning of button.
The problem is that while it loads, for 1-2 seconds, the element that contains the button is displayed distorted. Since I have 25 such elements per page, it looks aweful until the buttons load and my css takes effect.
You can see it in action here: http://theroadmap.co/generation/
Here is my custom css for the button (also if you inspect element on my site):
.likebtn-wrapper.lb-loaded.lb-style-heartcross.lb-popup-position-top.lb-popup-style-light
position: absolute;
text-align: right;
top: -3px;
right: 0;
width: 10%;
I was wondering what would be the easiest way to fix this? I was thinking of doing display:none or visbility:hidden until the user hovers, but it doesn't seem to solve the problem. I tried using a lazyload for the image, but it's the element that's causing the visual distortion not the image.
Thanks!
Try adding following code to your CSS:
.tooltip { height: 24px; }
Edit: You'll just need to set height of list items (i.e. class tooltip).
Basically, it will create the structure while CSS gets fetched from likebtn.com
I am going to have to link to an external website as I am having trouble reproducing this issue in JSFiddle.
For some reason accessing my page with an URL fragment corresponding to an ID that exists on the page appears to pull up certain areas of the document, the behaviour is not reproduced with a non-existant ID. There is no JavaScript on the page which could be causing this behaviour.
This behaviour is consistent in the following (so is unlikely to be a browser bug):
Google Chrome 31
Firefox 21
Internet explorer 8
Live view (accessed: 19/12/13) Issue resolved - see graphic below:
This is the page as it should look: http://sixplusfour.co.uk/encyclopedia/
This is the page with the named anchor: http://sixplusfour.co.uk/encyclopedia/#pagelist
The error is shown side by side in the following image:
Does anyone know what could be causing this behaviour?
My guess is that the :after pseudo-class of #pagelist is causing this. I have no clue why this is happening but the display doesn't seems to load properly.
This pseudo-class seems like a quick fix. You might want to delete this pseudo-class and fix the real problem. Try to add a overflow: hidden to your wrapper so its floated contents keeps in the flow:
.col-group {
margin-left: -1em;
margin-right: -1em;
zoom: 1;
overflow: hidden; /*new line*/
}
I can not test it on reload, but this should work.
Update
The real problem is probably because the the base-line is shifting based on its font. It contains a dot as content. Now this is still not clear why this happens when redirecting. However i suggest to you a empty content for this:
.col-group:after {
display: block;
visibility: hidden;
height: 0;
clear: both;
content: ""; /* removed dot */
}
This should work without modifieng too much.
If you set overflow: auto; on #container you start to see why the problem occurs. The contents of #container are actually taller than their container. When the URL fragment is in place, the browsers are scrolling within #container to reach it.
(I haven't yet figured out exactly why, but hopefully this will point you in the right direction.)
It is probably linked to a :focus or :hover selector.
I see this code in your style.css :
.pagenav li a:focus {
outline: #114d74 solid 1px;
outline-offset: -1px;
padding-left: 0.5em;
}
Couldn't this be a different value of padding or outline that makes things change?
I have had a google +1 button on my site for more then a year and it all worked fine.
In the last couple of days this button started to create a horizontal scroll bar on my site.
I know that beacase when I remove the button the scroll bar disappears.
Here is my site: www.kitchen-guide.co.il
Any suggestions what should I do?
Thanks!
borrowing from superware's answer, was having the same problem... however, this worked for me:
iframe[id^="oauth2relay"] { position: fixed !important; }
Google's +1 button is adding the following iframe to the end of the page body:
<iframe name="oauth2relayXXXXXXXXX" id="oauth2relayXXXXXXXXX" src="https://accounts.google.com/o/oauth2/postmessageRelay?parent=http%3A%2F%2Fwww.example.com#rpctoken=XXXXXXXXX&forcesecure=1" style="width: 1px; height: 1px; position: absolute; left: -100px;"></iframe>
One workaround (to this Google bug) can be to include the following rule in your CSS:
iframe[id^="oauth2relay"] { left: auto !important; right: -100px !important; }
If your website is all RTL then it should work fine, but if it's also LTR (multilingual) you will have to somehow target that role on RTL pages only. Check resizenow.com.
The iframe is no longer used to render the information bubble.
therefor, the previously suggested solution will not work anymore.
To fix the issue define the data-onendinteraction callback attribute.
<div class="g-plusone" data-onendinteraction="gplusoneinteraction"></div>
Then, implement the interaction callback function:
window.gplusoneinteraction = function(params) {
$('iframe[id^="oauth2relay"]').next('div').css({left: 0, right: '-10000px'});
}