Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I've taken out all of the styles on a page, and I'm still seeing this really odd font border issue. All of the text is really weighted, and I've ran out of things to debug. Here is what it looks like close up:
See the light blue and tan edges? That's what it looks like close up, but at 100% it just makes all of the text look really dark and weighted. Oddly enough the only fix I've been able to find is changing the z-index of a certain element(a header), but that won't work for the long term b/c it renders the header unclickable. I'm using Chrome 36 on OSX, and it turns out that this occurs even with as simple a page as:
<html>
<head>
</head>
<body>
link
</body>
</html>
Anyone have any idea?
That's not a border, that's the lcd smoothing algorithm. It works by assuming a particular orientation of RGB cells on the LCD monitor, so it can turn on e.g. 1/3 of a pixel at a time for a "smoother" font. You can turn off smoothing in Windows by disabling "ClearType", but know that your viewers are likely to have it enabled.
References:
http://szafranek.net/works/articles/font-smoothing-explained/
http://www.davidjnice.com/articles/windows7_disableClearType.html
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 months ago.
Improve this question
This is very weird problem. I can't solve it.
I am embedding YT video using the code provided by YT, using:
<iframe width="584" height="330" src="//www.youtube.com/embed/N739-Wzmf18" style="border:none;" allowfullscreen></iframe>
Next to it I am adding some text with title that has some color.
The problem is the color text is getting dark. When the website is loading or refreshed it has a good color for a second and then it turn to much darker.
The rest of the text that is white is not affected that way.
Also the "footer" that is a "separate-being" and also has some text in color that color is turned to dark. In this case I just use simple to color that text.
When I getting rid of yt code (or even just src="") the colors are ok again.
In one case when I got only YT videos without text I used insted of and it solved the problem for this case for the "footer". But it not working when there is some text added next to YT video.
I tested on Chrome, Edge and Brave (maybe they use the same engine)
You can check it yourself:
Select SHORTS
Click Refresh couple of times - you shoud see that red color titles and red year on footer flickers from bright to dark.
Select another menu like INFO to compare good red color with the darken one (the footer example will be the best)
The link:
http://www.mateuszstaniszew.pl/index.php?m=1
I'm going to take a stab in the dark here and suggest that your problem is with font-weight rather than color. At least for me, bolding the text looks like the closest to page-load render.
Try adding font-weight: bold; to .text-title in your CSS.
My theory is that an asynchronous script is injecting some styles that overwrite wherever .text-title is inheriting the bold weight from. I can't find the proof in your styles, but I'm feeling optimistic :)
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 6 years ago.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Improve this question
Not a Wordpress expert, but reasonably well versed in HTTP/HTML/CSS/Javascript/etc. Customer has a Wordpress site of not recent vintage, and I want to just get in, do the minimal required work, and get out. A page needs an image, so I upload it to the "Media Library". Push buttons and doodads to insert it into page, view the result and... the image looks blurry.
Some hours later, I understand there's a ton of Q&A about blurry images on Wordpress, but AFAICT they have nothing to do with my problem. When I view the image in a browser, it is reliably being scaled up by precisely 4/3 (1.33333...).
What drives me nuts is, I pick a browser, load the page, go into the console debugger, and it agrees both that the image is being rendered at 4/3, but also knows exactly what the correct original size is. Fine, but I should be able to see why it is rendering at 4/3. I cannot locate any relevant CSS parameter that is causing this. I have tinkered with enumerable combinations, including elaborations where I shove the img in a div and set the width of that div, etc. Every single time, the browser calmly scales the image up. In Firefox's console debugger, the "box model" view displays the actual original size rather than the scaled-up blurry size.
I feel I have eliminated PHP and Wordpress by just using Ctrl-U or the browser debugger to look at the result. But apparently somebody has managed a trick I don't understand, so I'm not sure whether to view this as a Wordpress question, CSS question, or what. So I'm flinging this question out in case the magic scale factor of 4/3 rings a bell with someone who immediately knows what the problem is. Let me know if other info is required to locate the problem.
I just checked it in IE11 on a virtual machine running Win10 and it was the correct size. It may sound daft, but are you sure you haven't accidentally enabled zooming in your browser?
This might sound simple-stupid, but sometimes, we all tend to miss something trivial:
While inserting the image/s into page, there is a column called ATTACHMENT DETAILS (extreme right). Down below on this column, there is a Size dropdown. Have you tried adjusting that? HTH.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I've just edit one page, and in my local computer its get perfect. I made the things in such way that the navigation menu still in a position in with it got a good look in contrast to the background image (transparent navigation background, with black characters over a part of the background menu where it is white). It's looking like this in my local machine:
But when I send it to remote servers, it get ugly, in unless two different ways, as follow:
This first, ugly, and;
This 2dn, even more ugly.
What could be happening?
First off - The second host is using an extra element, probably for tracking, or alike, which causes your style for div-elements, to apply to that aswell. You should use specific id's or classes for your elements, instead of just "div". Especially with "background"-properties.
You could solve this by adding following:
--some code--
<body><div><header></header>
--rest of the code
To
--some code--
<body><div id="container"><header></header>
--rest of the code
And changing in style.css: div {....to div#container {....
In my browser, the first link looks like your image, as it should, aswell.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I added an background image inside a container that was smaller than the image. It was part of the plan. Even though it automatically rotated itself 90deg, without me touching anything (there was 3 other boxes with the exact same settings, not the same image though.). Any idea how to fix that, or what it is happening?
EDIT: Issue solved, Kyle Shrader told me to use and EXIF tool, which I did. That told me the photo was rotated 90 degree, in the metas, even though it looked fine front end. I used an exif editor and put it on Horizontal (normal value for a photo) instead of Rotated 90 CW.
If the image has EXIF orientation set, some browsers will interpret this and automatically rotate the image. You can use a tool like EXIF Data Viewer to quickly check that this is not the case for you.
If this is the case, you can solve the issue in your style sheets or in the image file itself.
To solve this problem with CSS, use the image-orientation css property to set your image orientation. image-orientation: 0deg; is what you could use, in your case.
To remove the EXIF tag from the file, you can use a tool like theXifer EXIF Purge
edit: replaced the originally linked online solution with an offline solution. With each there are concerns. Online solutions pose an issue to leaking company information or assets. Obviously you should only use trusted offline solutions, since this could pose a security risk. Thank you for the recommendation, #TomerOfer
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I'm having a great trouble with something. I made this website http://arnmusica.netai.net/ (Thats a current free testing domain) and when I click on "Productos" Tab, sometimes the elements (guitars) dont show, and sometimes they do. I don't know why this keeps happening. I tried to correct or modify lots of stuff of the css, html, and didn't work. The elements appear randomly when I refresh the page. The guitars should always be visible.
Please please please help me.
Thanks a lot.
Please isolate your problem into a jsfiddle or anything similar , so your answer can be useful in the future.
The width of the #scroller element is being overwritten by a misterious javascript plugin (simplyScroll.js).
The most common cause is:
The plugin is running before the load of the images.
See Javascript calculate image size, after image load
EDIT:
From jQuery simple scroll website:
Notes/issues:
simplyScroll jumping? Make sure you specify images sizes or start on
window load (Chrome is especially affected by this - it's just so darn
fast!)
http://logicbox.net/jquery/simplyscroll/#comments
EDIT2:
You can do on load, but has some caveats.
$( '.img img' ).load(function() {
$("#scroller").simplyScroll({
auto: false,
speed: 10
});
});