I'm learning a bit of CSS from test and trial, and couldn't find a solution for this particular problem through web searches.
I help a person who's learning English, and she uses a lot of Google Translate on a small screen. I've been able to hide Google's toolbars and the annoying "Download Google Chrome" popup with the following (I'm using Stylish):
.jfk-butterBar.jfk-butterBar-info.jfk-butterBar-shown {
display:none!important;
}
#gb {
display:none!important;
}
#gt-appbar {
display:none!important;
}
The problem is: they are hidden, but the translated website is left on a frame with a space that varies from 70px to 160px on the top. The corresponding piece of code I'm talking about is here:
<div id="contentframe" style="top: 70px; left: 0px;">
And this is the best I could come up with after searching, but doesn't work:
#contentframe {
top: 0px;
}
Thank you!
You need to outweigh the specifity of the inline-style top: 70px; with the !important rule.
#contentframe {
top: 0 !important;
}
Related
I need an extra help with this, i'm just learning to code, already found this preview question but i don't understand completly how the css file must be done and upload. Or if any other way to do the same.
This is my page and this is the code that SCM provides
!-- SCM Music Player http://scmplayer.net -->
<script type="text/javascript" src="https://www.scmplayer.net/script.js"
data-config="{'skin':'skins/black/skin.css','volume':50,'autoplay':true,'shuffle':false,'repeat':1,'placement':'top','showplaylist':false,'playlist':[{'title':'blalbla','url':'test'}]}" ></script>
<!-- SCM Music Player script end -->
What I want to do it's hide it and delete the extra space that gives to the bottom.
You need something like
#playerW {
display: none!important
}
I don't like using !important because it's usually a sign of poor code, but here I think it's required as the css properties for the scm player are being set by javascript. The other method might be:
html body iframe #playerW {
display: none;
}
This adds more specificity to the target element. You want to load this after the scm.css link in your template.
However I would also check that these things are not already configurable within your theme.
Based on your last comment (and looking at the current implementation of your theme) I have this hack
#scmframe {
display: block;
background-color: transparent;
position: fixed;
top: -30px; // change this from 0px
left: 0px;
width: 100%;
height: 120%; //change this from 100%
z-index: 1667;
}
We are working on a markup with customized scrollbars.
For this task we use ::-webkit.
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
border-radius: 0px;
background-color: #bfbfbf;
}
::-webkit-scrollbar-thumb {
background-color: rgb(255,51,0);
border-radius: 0;
}
Is working great on desktop devices (chrome)... But on Android Chrome nothing happens.
Is this not working on Mobile? Any workaround or other solution?
Thanks!
I've been having the same problem... So far, the only explanation I've been able to find is that, the custom scrollbars works only if the body has position: absolute.
I don't like this solution as it affects some other features in my site, but unfortunately, there isn't any other way I've been able to show custom scrollbars in mobile...
I'm not sure why it is so... Should be simple enough, but for some reason, it's too complicated!
I am trying to make a page that can have lines to separate this sort of stuff! See the picture below!
Now the I tried many ways using empty div but still causes problems as it takes the whole page downwards. And I also thought of another way using hr tag and then use transform property to rotate it but still won't work!
Here is the link to the entire thing, few things aren't made,
the project that I am trying to make!
And here is the portion of code that I used before
<hr id="sidebar">
#sidebar {
transform = rotate(90deg);
}
Thanks any help is appreciated!
Yes you can achieve this design using :before.
Please review my code and get back to me if you have any question.
Hope it will help you. :)
Please try this css.
.slider:before {
content: '';
width: 1px;
min-height: 100vh;
background: #fff;
position: absolute;
left: 80px;
}
.slider {
position: relative;
}
One way to make this vertical line.
hr:before{
content: "";
width:2px;
height:100vh;
background-color: #fff;
position:absolute;
top:0;
bottom:0;
left:7%;
}
Basically I have a client that needs us to add some information to their website that will basically add a note in the code that the accessibility reader can say something like:
If you need assistance viewing this website please call (Insert Phone Number here).
This note does not need to display on the front end of the website if they are just browsing normally without a accessibility reader.
Is this possible? Is there something like a meta tag that we can add to the site?
Consider that keyboard users may benefit from this as well. To that end, there are plenty of "skip nav" or "jump to content" patterns that may do what you want, including ones friendly to keyboard users.
I made a CodePen example of a keyboard-friendly skip nav, but here is the code...
HTML
Skip Navigation
<main id="Skip">
<h1>The Page Is About This</h1>
<p>
This is some page content
</p>
</main>
CSS
a[href="#Skip"] {
display: block;
color: #fff;
background: #000;
margin: 0;
padding: .5em 1em;
font-weight: bold;
}
a[href="#Skip"]:link,
a[href="#Skip"]:visited {
color: #fff;
text-decoration: none;
}
#media screen and (min-width: 62em) {
a[href="#Skip"] {
position: absolute;
left: -1000px;
z-index: 2;
}
a[href="#Skip"]:active,
a[href="#Skip"]:focus,
a[href="#Skip"]:hover {
display: block;
top: 0;
left: 0;
}
}
In your case you could just change the link to a phone number:
Call us if you...
And key your CSS off that href or a class or id attribute:
a#a11yCall { ... }
Just hide the text at the top level with a position:fixed and left:-9000px.
It should be read but not visible.
Just few words. Accessibility isn't only for the blind people !
There is no such common thing as an "accessibility reader".
You might be thinking about a "screen reader", but there is a small part of population using those tools, and they do not give any benefit to people with low vision, using for instance a screen magnifier or some other specific tool (enhanced contrast, ...), nor they give any benefit to people with auditive, cognitive, or musculoskeletal disorders.
The assumption that only blind people using a screen reader need to have assistance is the first problem in designing accessible websites.
Having a content not accessible to non-blind people is also discrimination.
Now, if you really still want a note designed specifically for screen reader users, use aria-label. Do not use any CSS trick.
Here is how the site looks on Internet Explorer:
http://www.browserstack.com/screenshots/0c3c039e85f44bb70fddfc34b887b5bbc3357899
I've only seen it on the latest version of IE on Windows 8.1, but it's possible that it happens on older versions as well. Unfortunately, I'm on a Mac and can't find any emulators to run IE.. So I am coming to the greatest community of tech-savvy people I know of for help.
The site (built with Wordpress) is commercialpaintersinc.com. It looks great on Google Chrome and Safari.. so this issue seems to be just in IE (although I haven't tested in Firefox either..).
This is how it is supposed to look:
Anyone got any idea as to what CSS I entered that caused the issue and/or how I can fix it to make it look how it is supposed to on ALL browsers?
Any feedback is majorly appreciated. Thanks!
You are presently using negative margins to adjust layout, which is giving wildly different results in all three major rendering engines (Trident, Blink, and Gecko). I would advise against this, as it's likely these vendors will need to discuss whose approach is correct, or if all three need to adjust to be in better conformance with a fourth alternative.
The primary issue is is the over-hang of your logo beyond your negative margin. If you were to position the image absolutely, you could get more consistent results. However, upon doing so you will need to restore the layout of your header since a crucial element will no longer contribute to its dimensions.
#logo {
position: absolute;
}
#main-header {
min-height: 160px;
}
The above two rules appear to restore the layout for me in IE, and Firefox. That being said, I still think Chrome may be in the wrong here - you should always test your layout regularly in all three major browsers to ensure you aren't building on top of a browser bug.
I work on the Internet Explorer team, and have filed an issue internally for us to investigate this particular layout anomaly further. I've created a reduced demo of the issue as a public fiddle as well.
If you need to test Internet Explorer from a Mac in the future, please visit http://modern.ie.
Thank you all for the help. I was having a mental blockage and once again this community helped me to move forward.
Jonathan Sampson was correct that the root cause was that the CSS was not originally done correctly. I did the CSS edits myself and I am self-taught, so this was no surprise to me, haha. However, I had already come up with a solution.
My Solution:
I used the famous CSS Browser Selector script which can be found here: http://rafael.adm.br/css_browser_selector
I added it to my JS folder (mysite.com/wp-includes/js/css_browser_selector.js) and then added:
<script src="css_browser_selector.js" type="text/javascript"></script>
right before the </head> tag in the header.php file.
At that point I was able to just create browser-specific CSS. It's dumb that FF and IE are so picky when it originally worked fine how I had it in both Chrome and Safari... But oh well.
Here is the code for Chrome/Safari vs. the code for Firefox/IE:
Chrome/Safari (Webkit):
.webkit #logo {
margin-bottom: 10px;
max-height: 110px;
position: relative;
z-index: 99999;
background: #fff;
border-radius: 150px;
border: 20px solid #fff;
}
.webkit #main-header {
padding: 10px 0 0 0;
margin-bottom: -65px;
margin-top: -20px;
}
Firefox (and same used for IE as well):
.gecko .et_pb_slider {
top: -60px;
margin-bottom: -63px;
}
.gecko #logo {
margin-bottom: 10px;
max-height: 110px;
position: relative;
z-index: 99999 !important;
background: none repeat scroll 0% 0% #FFF;
border: 20px solid #FFF !important;
border-radius: 150px;
}
.gecko #main-header {
margin-top: -20px;
}
So yeah I didn't see Jon's answer until after I had "fixed" the issue. So, I will leave it as is.. although I'm sure my CSS is very sloppy! :P
Screenshot of IE browser now that it is fixed:
http://www.browserstack.com/screenshots/0d669a15d18040086fede2df90f134e526aef8f3
Thanks,
Chris