I use tlk chat integration, and I kept seeing 2 scrollbars only on Windows Firefox + IE.
tlk allow me to put a custom CSS to their chat.
I did some research and I've tried all of these below trying to prevent it, but none of them CSS seem to work. On top of my HTML file, I've added
//html, body {height:100% !important;}
// html { overflow-y: scroll !important ;}
// * html .clearfix { height: 1% !important; }
// html {overflow-y: hidden !important; }
Fiddle = https://jsfiddle.net/bheng/yrq93jyy/show/
If you view it on a Windows, you will see this like me
How can I debug this?
This has absolutely nothing to do with laravel nor PHP.
The element #tlkio has a CSS rule overflow: auto; which is differently interpreted by different browsers. To override it, you can do something like this:
#tlkio {overflow: hidden !important}
Ideally, you'd change the original rule without overriding it, but I assume you can't do it since it's a third-party integration.
Check it out: https://jsfiddle.net/yrq93jyy/1/
Related
I'm new to CSS. I've got a deceptively simple problem. This is a fiddle of a simple page.
http://liveweave.com/c6j68I
The objective is to show a fixed 900px white div centered against a coral background.
I've tried to achieve this using two divs maked #outerWrapper and #wrapper.
However, the whole page still seems to have a white background, which seems to be connected to the body tag. (Please use the fullscreen mode to see it).
If I give the body the background color of the #outerWrapper, again, the color appears on the top and bottom of the page too, which is undesired. (Please uncomment the CSS of body to see this.)
I've tried using the article tag; using negative margins; and changing dimesions of the body tag. Nothing seems to work.
In simple terms, a want a 'columned' look: coral-white-coral; instead of the 'boxed' look I currently have.
Please help.
Just add a style for the body in your CSS and set the margin to 0px, like so:
body {
margin: 0px;
}
Because most major browsers, the default margin is 8px on all sides. It is defined in pixels by the user-agent-stylesheet your browser provides.
If you want to change it, you can just do this, add it on your css
* {
padding:0;
margin:0;
}
Want to be more complete?
use normalize.css. It resets a lot of default values to be consistent across browsers.
Try adding the following
<style>
body,html {height:100vh; width:100vw; padding:0; margin:0;}
</style>
Body has default margins set by the browser (most browsers set default styles to different elements and they can vary depending on the browser) as seen below in developer console.
Note: In most browsers you can open the developer console by pressing F12 on your keyboard:
Just set the following css to avoid it:
html, body {
margin: 0;
padding: 0;
}
Demo: http://liveweave.com/EzWH0o
We have a phone number at the top of our website, for customers to call us of course. I have the Skype plugin, which is handy and I've noticed other users have it too. But it throws off the design completely. I noticed the html of the webpage is altered with css styles. Is there a standard way to alter the appearance of the Skype phone numbers?
UPDATE: The phone number is altered with this span tag added around it:
<span class="skype_pnh_print_container_1359399953">
Then there's a ton of span tags after this which is the Skype menu when you hover your mouse over the phone number (hidden initially). I could override styles with this class, but I want to make sure I do this the proper way so that it works with different (newer) versions of Skype and all browsers (Skype might work differently in other systems?). Isn't there some official way of dealing with this?
body span.skype_pnh_container {
/* "body" is not really necessary */
/* here, but it increases CSS */
/* specificity – just in case ... */
display: none !important;
visibility: hidden !important;
}
body span[class^="skype_pnh_container"] {
/* override the 'skype' styling */
color: red!important;
background-color: green!important;
}
body span[class^="skype_pnh_print_container"] {
display: inline !important;
}
copy pasted from the net
Also, according to http://forum.skype.com/index.php?showtopic=78380 you can prevent it with the following META tag:
<meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE" />
Carry on
Here's how I styled the Skype links:
a[href^="skype:"] {
color: white;
}
Personally, I don't see any additional markup like extra Skype span tags, so the above CSS code should work for any Skype call links.
I'm working on this site: http://stdionis.org.uk/
When the site is viewed in IE 9 or below, the drop down menus on the home page appear underneath the slideshow (It's a google slideshow), however when you go to another page, the drop-downs appear on top of images.
I've set the z-index of the drop-down div to 9999, and I've tried setting the z-index of the slideshow to zero, but I can't seem to make it work.
The CMS we are using doesn't directly allow access to the HTML code of the page (don't ask...) so I can only use CSS or javascript to make changes. Hence why i can't change the doctype to make it display in standards mode.
Not looking for a clean solution necessarily, any crazy javascript hacks would be much appreciated.
try this -
.t_horizontal * { z-index: 1000 !important; }
or
.t_horizontal table { z-index: 1000 !important; }
if even not working then - try using jQuery -
$(document).ready(function(){
$('.t_horizontal *').css('z-index','1000 !important');
});
NOTE: menu is using table which is not proper way to build menu.
Have you tried:
#ctlHeaderModules {
position: relative;
z-index: 2;
}
#frm1 {
position: relative;
z-index: 1;
}
Both of these two elements are on the same level and when I inspect them in Chrome I dont see any of these properties being applied, its worth a shot.
There is also this plugin: http://archive.plugins.jquery.com/project/TopZIndex
I'm trying to get this to work:
<!doctype html>
<html>
<style>
section{
display: none;
}
section:only-child {
display: block;
}
</style>
<body>
<section>This should be visible</section>
</body>
</html>
I believe that the text 'This should be visible' should be visible! This is also the case in Firefox. Firebug, as well as Safari's Web Inspector think so as well.
However, if you open the page in Safari (OSX and iPhone), the text is not showing. Why is this?
I tested your code, also with a doctype, and with a non-HTML5 element (a div). All webkit browsers I could test had issue: Safari-on-Windows 5, Chrome Windows, Chrome Linux, Epiphany-webkit.
When I changed from display states to background colours, however, webkit worked fine. Changing other display states like float also worked fine.
This is very likely a bug (though I didn't see one via search engines, but I did not search bugs.webkit.org) purely to do with changing display states. It also works fine if the element is first set to block and :only-child is set to none, so it would specifically be overriding the display: none. Opening element inspectors seems to trigger the CSS display which remains until refresh.
Your code (if you add a doctype too) seems to be a pretty good test case. If this bug isn't already on bugs.webkit.org you could submit this code.
*edit okay I definitely have Javascript on, still don't see the ability to have this be a comment rather than an answer, which is what I originally intended.
I have the same problem and I found this workaround:
http://jsfiddle.net/ZxAnH/
section {
height: 0;
overflow: none;
}
section:only-child {
height: auto;
}
It wouldn't hide the elements margins but as a wrapper it could be enough to hide some elements. Did you found another workaround?
I am adapting a website in order to make it feel native on the iPad.
This website has navigation that shows a drop-down with the sub-navigation on hover.
This works like a charm on the iPad. When you touch it the subnav, it opens and closes again when you click/touch somewhere else.
Now i have the requirement to make it close again when the navigation point is touched again.
I was thinking, i could just set the pointer-events:none on hover & active for the iPad, but this makes the sub-navigation flicker and it does not work...
i have also tried to cover the navigation point with element set with the before selector and setting its pointer events to none, but this does not work...
Any idea, how i could solve this problem using CSS only. (I can not modify the HTML nor the JS)
PS: you can reproduce this on www.macprime.ch for example... (click the main navigation on the top, and try to close the dropdown again)
edit ok i tried almost everything that was possible with CSS only. I don't think its possible. If anyone can tell me why, he/she will get the bounty reward.
You could have a second transparent element that appears above the one you tapped. That way, when the user taps again, they will be selecting the other element and the first will lose its hover status:
<div class="blocker" onclick="void()"></div>
<div class="menuItem" onclick="void()"></div>
<style>
.blocker, .menuItem {
/* use the same position, width, height, etc */
}
.menuItem {
/* make it look pretty */
z-index: 100;
}
.blocker {
z-index: 99;
}
.menuItem:hover {
z-index: 98;
}
</style>
Of course, this will have a negative effect on the desktop, so you will want to do something like:
<style>
.blocker { display: none; }
.touchevents .blocker { display: block; }
</style>
<script>
if('ontouchstart' in document)
document.body.className += ' touchevents';
</script>
UPDATE Added onclick events to make them clickable.
You can see a working demo here: http://fiddle.jshell.net/vfkqS/6/
Unfortunately, I could not find a solution that does not require HTML or JavaScript changes, but I was able to keep them to a minimum.
You would need to make two non-CSS changes total:
Add a JavaScript mechanism for identifying if touch events are supported. See two line example above.
Add one div per menu which is clickable (onclick="void()") and has a unique identifier that can link it to the menu.
You may be able to do those two things with CSS but I'm not sure. Tablet detection would be a little sketchy in CSS and I don't think you can make something that sophisticated with a :before or :after pseudo-selector.
This is an interesting question and similar to one I've had come up recently. How do you marry a standard navigation dropdown that displays on hover with a touch event interface. Using the hover event as a trigger works really well on a desktop. In a world without hover events (tablets and smart phones), not so much.
In my case I landed on the idea of defining the behaviors: click/touch event would do the triggering, hover event would do subtle indications. For more details on this line of thinking see: http://www.markdotto.com/2012/02/27/bootstrap-explained-dropdowns/
For the issue you're trying to overcome I'm wondering if using #media queries in your CSS is a better solution...
#media (max-width: 979px) {
/*
New CSS declarations to show the sub navigation lists
in a more compact way that fits nicely on the iPad.
Something like...
*/
section.nav-overlay {
display: block;
height: 60px;
visibility: visible;
width: 979px; /* Or the max container width */
}
section.nav-overlay ul li {
float: left;
}
/*
Etc. etc. with the additional exceptions.
You get the idea.
*/
}
By doing this you would create more of a native interface on the iPad. However, if going this route is off the table, something like what Brian has above is better. Just wanted to give you an alternative.
Set pointer-events: none on the active state:
nav#mainnavi > ul > li > a:active {
pointer-events: none
}