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
Related
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.
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.
I seem to be having an issue with some CSS on our live platform.
We have an add to cart button which is pulling changes from 'index' rather than our css that we're pushing through.
This code seems to work fine on both our staging and live platforms:
.single-product div.product form.cart .quantity {
float: initial;
}
.single-product div.product form.cart .button {
float: initial;
margin-top: 30px;
padding-right: 158px;
background-color: #ff63b1;
}
However, it seems that when we trying to change .added_to_cart.alt, .button.alt,
button.alt, input[type=button].alt, input[type=reset].alt,
input[type=submit].alt { it doesn't get recognised as if the code is incorrect and continues to pull from index.
This is the change we're trying to do which works fine on staging but not on live:
.added_to_cart.alt, .button.alt, button.alt, input[type=button].alt,
input[type=reset].alt, input[type=submit].alt {
font-size: 18px;
font-family: Georgia;
letter-spacing: 1px;
line-height: 20px;
font-style: normal;
font-weight: 700;
text-decoration: none;
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-top: 15px;
padding-bottom: 19px;
padding-left: 158px;
padding-right: 100px;
color: #fff;
border-width: 0;
border-radius: 0;
border-style: none;
border-color: #62b237;
background-color: #47a332;
}
Our staging platform is a recent copy of our live (3 days ago) and no major changes have happened since our last copy. While checking inspect, it looks like the elements are the same and there isn't any errors in the console.
I've tried turning off our caching plugins on live and also removing my own browser history but this didn't work. I'm quite stuck now and could really do with some help.
If you want to check the code yourself, here is a link to our product page:
http://www.cutepinkboutique.com/product/selfish-love-heels/
You didn't link the CSS file correctly. This is what it looks like:
http://www.cutepinkboutique.com/?sccss=1&ver=4.7.5
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>
on my website: http://evoxity.net/en/wallpaper/3-wallpaper.html
i noticed two bugs with fancy box. The first one is, if you decide to enlarge the pciture with a click on it. The first time it loads, the background is a bit out of the center, if you close the window and enlarge it again, its fine. This bug contains if you hover one of the sites of the fancybox and switch through the images.
The secound bug is, the line under the X to close the window.
Any suggestions how to fix that?
product.tpl:
{else}
href="{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox_default')|escape:'html':'UTF-8'}"
data-fancybox-group="other-views"
class="fancybox{if $image.id_image == $cover.id_image} shown{/if}"
global.css:
.fancybox-skin {
background: #f4f5f7 !important; }
.fancybox-skin .fancybox-close {
width: 28px;
height: 28px;
background: none;
font-size: 28px;
line-height: 28px;
color: #333333;
text-align: center;
background: #f4f5f7!important;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px; }
.fancybox-skin .fancybox-close:hover {
color: #515151; }
.fancybox-skin .fancybox-close:after {
content: "\f057";
font-family: "FontAwesome"; }
Here some pictures to explain the last bug. (just click first, secound image to navigate) http://imgur.com/kGUyv2i,Ts8rrOk#0
Removing the lines under the X
a {text-decoration: none;}
The box looks centered for me when I open it.
search in global.css line 7959 add text-decoration:none;