The following is happening to me:
I have a CSS with a font where I set the size in em.
All works fine and gives me the result I want. But on the follwing conditions something strange happens:
After developping my site with PHP and HTML pages and of course a CSS stylesheet, when I move the site form a subdirectory to the directory (a level higer) the font size suddenly changes.
I also have the same problem with the folling condition: Everything works fine on domain www.abc.com but as soon as I access the site trough a site alias www.xyz.com again the font size, specified in em, differs from the other.
Is there something I need to think about in the CSS?
Regards,
Hans
After ensuring your CSS file is being accessed correctly...
Have you set a base font size? EM's are relative, so a base size needs to be set. For example in your CSS you would use:
html, body{font-size:14px;}
p{font-size:1em;}
h1{font-size:1.2em;}
Problem solved! It seems what I described as my problem only happens in Chrome.
I did clear cache, cookies, history, etc. What I did not clear were passwords, site certifcates and apps hosted.
After clearing everything in my browser the site came up correctly though normal domain name and through alias domain name.
Thans for the help.
My problem was not about the font size actually the zoom level of each domain. Check your zoom size for each domain is the same
Related
My nav menu items (li's) are changing size on different pages and I can't figure out why. Nothing is different with the dom prior to the main content, however, from the home page to the contact page, the size of the entire menu increases by about almost 7 pixels, from 655px to 672px. I tried both Chrome and MS Edge and it happens in both browsers. I am using em for the menu font size but in the inspector it computes as 16px for both pages so its not that. The menu is actually brought into the page using server side includes so the html itself and the associated css is identical in both pages.
It's not really a big deal, but I do want to figure out why it's happening. I would put the relevant code here but have no idea which code is causing it. Its a basic html/css website (although the contact page is php, could that have something to do with it?).
https://avayoupaint.com
I shouldn't be doing this, as you shouldn't be sharing a link to a production site, but instead share code of your menu and relevant styles.
If you are on a Mac like me, and inspect your menu, you'll see the letter o for "Home" is different. Inspect with DevTools, and you'll see one is serving Open Sans, the other page serving Helvetica.
Somewhere in your code, you are not loading the fonts consistently (probably a file path issue). One font has slightly different letter shapes than the other, explaining that 7px difference.
EDIT: DevTools might be showing this for you:
Blocked loading mixed active content “http://fonts.googleapis.com/css?family=Open+Sans:300,400,500,600,700,800”
Make sure to load the Google Font using the https protocol to avoid this issue.
So I have this Wordpress-site set up:
http://dev10.xmedia.no/
One my computer and on my colleagues computer the site displays normal as it should. On my Android-phone, when in Chrome's Private Surf Mode it works at normal.
But its "screwed up" without images and CSS on the customers computer, on my phone in Chrome's normal mode and when rendering it through Googles speed test its also missing.
I've set up multiple WP-sites the same way on servers with the same settings, so there should be nothing special here. Anyone got a clue why its not loaded correctly on some devices?
The CSS isn't being loaded because it's password protected. If you try to go directly to the stylesheet you'll see what I mean:
http://dev10.xmedia.no/wp-content/themes/fiberteam/assets/styles/style.css
Remove this block and the stylesheets will load properly.
You only load 3 stylesheets.
style.css?ver=1, font awesome, and the video player css.
style.css seems to have very little in it:
.wpml-ls-legacy-list-horizontal{border:1px solid transparent;padding:7px;clear:both}.wpml-ls-legacy-list-horizontal>ul{padding:0;margin:0 !important;list-style-type:none}.wpml-ls-legacy-list-horizontal .wpml-ls-item{padding:0;margin:0;list-style-type:none;display:inline-block}.wpml-ls-legacy-list-horizontal a{display:block;text-decoration:none;padding:5px 10px;line-height:1}.wpml-ls-legacy-list-horizontal a span{vertical-align:middle}.wpml-ls-legacy-list-horizontal .wpml-ls-flag{display:inline;vertical-align:middle;width:18px;height:12px}.wpml-ls-legacy-list-horizontal .wpml-ls-flag+span{margin-left:.4em}.rtl .wpml-ls-legacy-list-horizontal .wpml-ls-flag+span{margin-left:0;margin-right:.4em}.wpml-ls-legacy-list-horizontal.wpml-ls-statics-footer{margin-bottom:30px}.wpml-ls-legacy-list-horizontal.wpml-ls-statics-footer>ul{text-align:center}
So it looks like you just forgot to load the main stylesheet.
UPDATE When I accessed the link to the CSS in your comment, I got a CAPTCHA. Now when I access the site, I see the site as it should look. Could that be your problem?
There is no problem in the code. i have downloaded source code and put in on my local and it is working fine. it seems there is something corrupted on hosting server.
So in the included image, you can see a copy of the website I'm currently working on. The site is going to have separate pages for each of the company's machines. Obviously the navigation bar and menu bar are going to be the same throughout the whole website so I thought I'd make use of a single line of PHP script to just load the menu in each time.
http://i.imgur.com/spVS3a4.png
(Attached image as I do not have +10 rep yet)
Though, from what I understand, the pages within folders (Not within root) wont be able to link to the rest of the site without the use of ../ within the href.
So if I load the menu part of the site containing the navbar, etc, it won't work on all the pages because they'll all be within different folders, meaning every folder will need it's own version of the navbar PHP import.
Am I going about this the wrong way? I'm just trying to minimize the amount of code I'm using on each page. Not only that, but once I finish the site if I have to make a change to the menu-bar, I don't want to have to update 30-40+ pages. I figured the PHP import would save me that sort of trouble? Is there a better way of doing this that isn't terribly complicated?
It should also be noted that I'm doing this in HTML5 with Twitter-Bootstrap as my main CSS.
I would also be making a similar PHP call that would import a footer as well.
If I missed anything that could be of help, please do ask.
TL;DR - How do I make links work throughout the entirety of the site, regardless of where they are in the folder hierarchy. Thought about using a tiny PHP script that would contain the menubar, etc and would be loaded on every single page. Though I'm not sure if that will work due to folders?
Try to start your links from /. This means that url is started from site root.
For example:
Patch Kettles
Just define a constant with the root path and echo it within all the links inside the pages that are contained in a folder like this:
[Put this in a file that you include through out your whole website (e.g. like the file with your database connection if you have one)]
define('BASE_URL' , 'http://'.$_SERVER['HTTP_HOST'].'/');
Than just add an echo in the start of each link:
Home
And for images the same thing:
<img src="<?php echo BASE_URL; ?>images/img_01.jpg"/>
You can just use /path/to/image.jpg to get absolute paths, while still being fine if your domain name ever changes.
I have one dynamic website with back end control panel which contains ckEditor for data entry. ckEditor inserts images with path like: /userfiles/image1.jpg and when I call page to display on user interface it shows perfect if I access it from main url but due to some reasons few section we have to move on a sub folder and when I access same page from that subdomain it fails in displaying image.
when I checked url of the image, it shows like:
app1.mysite.com/userFiles/image1.jpg But the actual path is:mysite.com/userFiles/image1.jpg.
Is there any trick or technique to solve this?
I am using PHP.
You can define a <base> in your <head>:
http://www.w3schools.com/tags/tag_base.asp
To do ist with PHP is hard. Changing it beforehand to an absolute URL might be the best way, changing it afterwards means HTML scanning, finding the images, check wether the url is absolute or relative and change it, if needed.
I have a problem that is related to the URL of the images if I use a subdomain.
For example, if the image is located at address
http://www.mydomain.com/images/photo.jpg
And if I want to use subdomain to speed up page load, in this case subdomain is:
http://img.mydomain.com
How should look like the url to the image foto.jpg if I use subdomain?
The path for subdomain:
/home/mydomain/public_html/img/
The path for images folder:
/home/mydomain/public_html/images/
just add an alias to your img subdomain and keep the same structure. This way if you need to change in the future it will be transparent
edit:
is also good to have more than one subdomain for assets. like img01 img02 and so on. But be these subdomains consistent.
like if you have the image image1.jpg that targets to
http://img01.domain.com/images/image1.jpg
the next time the imagen appears in the code should appear as
http://img01.domain.com/images/image1.jpg
AND NOT as
http://img02.domain.com/images/image1.jpg
so the cache can optimize the calls.
I usually use this formula
return sprintf("http://img%02s.domain.com", abs(crc32($imagename) % (9)));
this way the subdomain will be always consistent with the image name
edit 2:
Browsers limit the amount of connection opens peer server. So by having multiple subdomains you are faking this and therefore improving the load speed of the page.
But in the other hand if for a same image you load it from more than one different server the browser's cache can't operate because it doesn't know that you want to load the same image.
So by hashing the image name you are obtaining always the same server and then obtaining the best of both worlds: more connections opens AND browser caching
If your subdomain's document root is:
/home/mydomain/public_html/img/
And your images at are:
/home/mydomain/public_html/images/
Then you will not be able to access them. You'd have to navigate to http://img.mydomain.com/../images/photo.jpg which, for very obvious security reasons, is not possible.
Your subdomain's document root should instead be:
/home/mydomain/public_html/images/
And then your URL is:
http://img.mydomain.com/photo.jpg