A friend using the Tor Browser says that for him the image resizing is not right. Inspecting can not find the error. For me is ok.
The site use skeleton.css http://euphonia.com.br/
Pic: http://euphonia.com.br/?attachment_id=80
As I do not like to leave this bug, does anyone know how to fix? Thanks for the attention
I think the problem is that you have a floated image with no constraints, so it can overflow freely and will give you unexpected results at different resolutions IF AND ONLY IF Tor does not allow for media queries...which by the judging the project is having difficulties with. Try a simple google for "Tor media queries" and read up.
I suggest either: revamping the entire site away from a responsive design or: tell the Tor people they need to deal with it. What is the potential Tor-driven traffic for your blog? 1? 2 people? Probably not enough to fret over.
There are many reasons why this might not be working. The first, and most basic could simply be that your friend is using a different browser (Firefox with Tor I think) so the CSS is rendering differently.
After viewing using Chrome, running Tor there is no issue with it so that may be your issue.
Related
I have a really strange CSS problem (I at least think it is CSS related) with one of my websites, on the clients iMac the 2nd column of the top menu has a unwanted top margin, and I have no idea what causes this. (you can see the problem in this screenshot)
The websites URL is: http://p538551.webspaceconfig.de/
I have already tested this in all major browsers, including Safari on a MacBook but I can not reconstruct the error, everything looks perfect on all my devices. I also tested it using browserstack - also no problems there.
Does anybody know what might cause this issue, or can at least see the problem as well?
Any help is really appreciated.
The position:fixed s works perfectly fine when I do not embed a video from Vimeo. Any one knows why and how to work around it? It never used to be like that, only recently.
Does this question's discussion solve your problem? Mac, safari, background-position:fixed and iframe?
Original poster stated: "I worked around this by detecting Mac/Safari and outputting decreased functionality for the people using that system."
I would recommend implementing separate CSS for whichever browsers are causing the issue. Can you provide more details about the problem?
It's just that I don't really know enough about XHTML, CSS, or Javascript and I'm trying to learn. I know what to do in order to get things to work or look the way I want them to but I'm guessing my methods are not the standard best way to get the results I desire; obviously not because it's not working across all browsers.
I am hoping for someone who is willing to spend a little bit of time with me to go over the code, make recommendations and explain why what I have is not standard for coding. I have some validation errors but they mostly are all in the javascript, which I didn't even write so I honestly have no idea if they are causing trouble or how to fix them if they are.
So my website is pretty simple. I just want to have a professional page where potential employers can see my resume and contact information. When I look at my website in firefox 4 or Safari 5.0.5 everything is perfect. The image of my name and the "contact" tab images both line up with the edge of the main container div. Also the text with the arrow picture line up about 50 pixels to the right so the arrow does not overlap with my resume picture. I use absolute positioning because when I try to use anything else, it gets all messy.
The Problem I am Having: My name logo, contact image tab and "please indulge with..." arrow picture seem to be about 65 pixels off to the left when I view my website in IE8 and Firefox 3.
My website is: nicholasdexter.me
Once again, I'm sorry that this question is geared towards me but I know you all are experts and I don't know where else to go for help. Thank you for reading!
Here is my style sheet: http://nicholasdexter.me/style.css
There's a lot of bugs in older browsers (particularly Internet Explorer 6 & 7). Also, some things just aren't supported in older browsers.
The trick is either to:
- Use something called Graceful Degradation/Progressive Enhancement, in which newer techniques are used, but are used in a way that it won't matter if there's support or not for those things. For example, shadows, if no-one can see them, who cares? If they do, great. The trick is balancing that out.
- Avoid those "new" techniques altogether.
This is nothing new here, and is even a pain for professionals. Microsoft evens hates IE6 now. http://www.ie6countdown.com/ So don't beat yourself up for it. :)
There are alot of resources out there that may help you find the right solution(s) to your problems. Here's one:
http://www.quirksmode.org/css/contents.html
Oh, and feel free to ask questions again. Front-End Development (coding web stuff) is a real challenge some days! :)
Okay, this is REALLY starting to bug me...
This page works fine in both Chrome and Firefox. www.bloggan.tk
But if it's opened in internet-explorer it always expands beyond the page and introduces the scrollbar no matter what the resolution of the browser is.
I have NO idea what change in the html it was that cause this...
Here's the blogger-template-html-source
I'd REALLY appreciate if someone could help me with this.
Thanks in advance!
Edit:
I've "solved" it for IE using javascript, but that's only temporary (i hope). The version without javascript can be seen here, so that you still will be able to know what I'm talking about. Still trying to solve it, and still hoping for someone to help me.
Before you ask a question here, you'll need to do some basic research yourself.
Strip out everything from that HTML file you reference until you have the simplest possible document that reproduces the error. Don't expect people to dig through a 40k HTML file to find the thing that's causing you grief.
Isolate it before you ask about it.
Incidentally, however, there is no CSS width or height specifier for "the rest of the page". You need to meticulously keep track of your percentage widths to make them add up to 100%, or use tables. If your sample is using percentages, then I'd look for borders and padding, since those are the things that cause discrepancies in box size between old IE versions and modern browsers.
I am having issues with a website that I am working on in which images and background-images fail to load in Internet Explorer 6.
Here is an example of a page on which you might experience this issue:
Example Page
So far I have looked at the following possible issues and pretty much ruled them out:
XML/Extraneous data in the image files (google photoshop 7 internet explorer)
Corrupt image files
I have not ruled out invalid markup.
I have noticed that there are validation errors in most of the pages where this problem has been reported and I am working on getting those fixed where appropriate.
The behavior I see is that the page will load and all elements other than the background image render. There are no javascript errors thrown. When using Fiddler, no request for the image is made. If the browser is pointed directly to the background-image, the cache is cleared and then the browser is pointed back at the HTML page, the background-image will load inside the HTML page.
Does anyone have any additional suggestions for ways to attack this issue?
Twice now I've had people have problems with photos not showing up, and it was because they were in an incorrect colorspace, using CMYK instead of RGB.
this is a weird issue with IE6. I just right click on the image and select "Show Picture" then the image loads properly.
I'm looking at this in IE6 and trying to replicate the problem, but I can't seem to get it to happen - it always seems to load.
Some thoughts on things to try though as there appears to be another two classes that the background is over-riding is to try adding !important after the background assignment, so:
div.gBodyContainer {
background-image:url(/etc/medialib/europe/about_infiniti/environment.Par.7366.Image.964.992.direct.jpg); !important
}
Another thing to try is getting rid of all the . in the filename and cut down the length of it, shouldn't matter, but it may be causing some problems, doesn't hurt to try it anyway.
The other thing you could try is making gBodyContainer an ID instead of a class, or give it an ID as well as a class and assign the background to the ID. Again, it shouldn't matter, but it doesn't hurt to try and see if it works, IE6 does a lot of funny things.
is it only ie6 and not ie7 too? IE is pretty strict with html sometimes, versus firefox lets you get away with more. Not sure if this helps, but I just debugged weird IE6/7 bugs by slowly taking away content. But if it's only intermittent, as in happens with the same code on and off, that's a really weird one.
The problem is the "IE6" part ;-)
I think in some cases you could solve this issue by loading the full size image before the request and hide it with style display: none; so IE6 will load the image from cache.