I am using the Caveat font for my headers on a page, however the Caveat font only shows up after I refresh the page.
.title {
font-family: 'Caveat' !important;
color: #b8b8b8;
font-size: 12vw;
position: absolute;
top: -25%;
left: 5%;
z-index: 100 !important;
}
.second-title {
font-family: 'Caveat' !important;
color: #b8b8b8;
font-size: 12vw;
position: absolute;
top: -50%;
left: 5%;
z-index: 100 !important;
}
When I restart my local server and then go directly to the page (site.com/about.html for example) it seems to work, but if I restart the server go to the page through a link on the home page, it still has the issue of the font not loading unless I refresh the page.
None of the other fonts or pages seem to have this issue.
Related
I am not looking for an answer to fix the code, moreso an answer or explanation as to why.
Safari will render children elements with a relative parent in a completely different place than other browsers show. If I change the child to be absolute, it will have some consistency.
Edit: After looking at iPhone 8+ Safari & Chrome apps, it shows broke on both. So maybe this is a issue at the OS level.
Figure 1: In-consistent code (we are primarily focused on the caret with red background)
https://codepen.io/treckstar_/pen/eYVYyjK
.c-anchor-explore--toggle {
font-size: 16px;
font-weight: 700;
padding: 7px 0px;
position: relative;
}
.c-anchor-explore--caret {
position: relative;
right: -70px;
}
Safari 14 Output
Chrome Output
Figure 2: Consistent code (same caret with red background)
https://codepen.io/treckstar_/pen/xxYxpBe
I also moved the element closer and made it visually centered; however, that had no affect on the ultimate issue.
.c-anchor-explore--toggle {
font-size: 16px;
font-weight: 700;
padding: 7px 0px;
position: relative;
-webkit-appearance: none; /* remove border around safari */
margin-right: 40px; /* match the right: -40px; to make sure it looks centered */
}
.c-anchor-explore--caret {
position: absolute; /* cannot be relative as Safari will not render correctly */
right: -40px;
top: 3px;
}
You can try the -webkit-transform: translateZ(0);. Webkit is made to work for HTML5 on iOS.
.c-anchor-explore--toggle {
font-size: 16px;
font-weight: 700;
padding: 7px 0px;
position: relative;
-webkit-transform: translateZ(0);
margin-right: 40px;
}
.c-anchor-explore--caret {
position: relative;
right: -70px;
top: 3px;
}
Hello
I am building a chat room site, however it runs into a problem on iPhone (or possibly safari I have not checked yet).
When you start typing in the input which is position: fixed to the bottom, the screen zooms in, and you have to manually zoom out to see the send button. I know this was not very explanatory, so I will put my code here:
Sloppy code that works sometimes (except now)
input {
font-size: 150%;
width: 83vw;
height: inherit;
}
form {
position: fixed;
bottom: 0px;
left: -2px;
height: 6vh;
margin-bottom: 0px;
}
form button {
width: calc(17vw + 2px);
font-size: 150%;
position: fixed;
right: -2px;
height: inherit;
}
This is not anything to do with your code. I am a long time iphone user and could say that iphone does this automatically. When the keybord is initiated it automatically zoom to a point where you can see what you are typing effectievly.
Just a basic html link question.
I have an intranet setup, and I need to link to some network drives. They are located on drives such as \server_drive\blahblah\doc.docx
Using file:// does not work on either IE8 or Firefox. How can I link to these files?
To link to a UNC path from an HTML document, use file:///// (yes, that's five slashes).
file://///server/path/to/file.txt
Note that this is most useful in IE and Outlook/Word. It won't work in Chrome or Firefox, intentionally - the link will fail silently. Some words from the Mozilla team:
For security purposes, Mozilla
applications block links to local
files (and directories) from remote
files.
And less directly, from Google:
Firefox and Chrome doesn't open "file://" links from pages that originated from outside the local machine. This is a design decision made by those browsers to improve security.
The Mozilla article includes a set of client settings you can use to override this behavior in Firefox, and there are extensions for both browsers to override this restriction.
Setup IIS on the network server and change the path to http://server/path/to/file.txt
EDIT:
Make sure you enable directory browsing in IIS
Alternative (Insert tooltip to user):
<style>
a.tooltips {
position: relative;
display: inline;
}
a.tooltips span {
position: absolute;
width: 240px;
color: #FFFFFF;
background: #000000;
height: 30px;
line-height: 30px;
text-align: center;
visibility: hidden;
border-radius: 6px;
}
a.tooltips span:after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -8px;
width: 0;
height: 0;
border-top: 8px solid #000000;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
a:hover.tooltips span {
visibility: visible;
opacity: 0.8;
bottom: 30px;
left: 50%;
margin-left: -76px;
z-index: 999;
}
</style>
<a class="tooltips" href="#">\\server\share\docs<span>Copy link and open in Explorer</span></a>
I am trying to run apache on ubuntu and create a website. When I simply open the webpage in Chrome from the Documents folder it opens fine and looks good. But when I open it either from the var/www/html file or by searching my ip address through Chrome some of the css has not loaded, not all of it but just some of it. Here the cancel button has been moved even though the code is almost exactly the same as the login button.
#login {
left: 559px;
top: 161px;
position: absolute;
font-family: "Open Sans", monospace, sans-serif;
color: #1E1E31;
z-index: 2;
cursor: pointer;
}
#cancel{
left: 654px;
top: 161px;
position: absolute;
font-family: "Open Sans", monospace, sans-serif;
color: #1E1E31;
z-index: 2;
cursor: pointer;
}
This is what loads through Apache. It is difficult to see but Cancel has moved up to top left and the background has a white strip at the side and other small differences.
This is how it looks when normally opened in chrome
Just a basic html link question.
I have an intranet setup, and I need to link to some network drives. They are located on drives such as \server_drive\blahblah\doc.docx
Using file:// does not work on either IE8 or Firefox. How can I link to these files?
To link to a UNC path from an HTML document, use file:///// (yes, that's five slashes).
file://///server/path/to/file.txt
Note that this is most useful in IE and Outlook/Word. It won't work in Chrome or Firefox, intentionally - the link will fail silently. Some words from the Mozilla team:
For security purposes, Mozilla
applications block links to local
files (and directories) from remote
files.
And less directly, from Google:
Firefox and Chrome doesn't open "file://" links from pages that originated from outside the local machine. This is a design decision made by those browsers to improve security.
The Mozilla article includes a set of client settings you can use to override this behavior in Firefox, and there are extensions for both browsers to override this restriction.
Setup IIS on the network server and change the path to http://server/path/to/file.txt
EDIT:
Make sure you enable directory browsing in IIS
Alternative (Insert tooltip to user):
<style>
a.tooltips {
position: relative;
display: inline;
}
a.tooltips span {
position: absolute;
width: 240px;
color: #FFFFFF;
background: #000000;
height: 30px;
line-height: 30px;
text-align: center;
visibility: hidden;
border-radius: 6px;
}
a.tooltips span:after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -8px;
width: 0;
height: 0;
border-top: 8px solid #000000;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
a:hover.tooltips span {
visibility: visible;
opacity: 0.8;
bottom: 30px;
left: 50%;
margin-left: -76px;
z-index: 999;
}
</style>
<a class="tooltips" href="#">\\server\share\docs<span>Copy link and open in Explorer</span></a>