Apologies to inflict an IE6 post on everyone - posting in the hope that someone will have had experience of these issues. I don't have a link for now unfortunately, but the first issue is that occasionally images are stretched without keeping aspect ratio - the images have their height and width defined in the tag, then in the css file their width is set to be a little smaller than that. Sometimes the images load fine, sometimes really badly stretched. Any ideas what is happening here? Fine in all other browsers.
The other issue, which I've not come across before, is that some pages on my site need a refresh of the page for floated elements to align properly. Is there a reason why this could happen in IE6?
Thanks, and apologies again :)
Related
I know questions like this get short shrift on here for not containing actual code but I have been banging my head against a wall for over 2 hours here.
If you browse the site, you can see the site sits 100% width in the good browsers, but in ie11 when on the home page there is a horizontal scrollbar, something is stretching it beyond the browser width. I have taken things out systematically but it is driving me insane?
http://ag.splatwebsolutions.co.uk
Thanks
i think your problem is in this style.
.site{
display:table;
}
using Normalize.css might help
Trying to attain a near-exact cross-browser experience for our clients, lately, I've come to a problem that I can't fix. I've got the website up and running, and it's functioning smoothly on every and each browser, expect Mozilla Firefox. The problem that occurs in Firefox, is that I get to witness a broad white space on the right side of the site's main contents, and it is arising from my responsive css3 slider. The link below shows you 100% of the slider's codes, which works perfectly on jsfiddle;
Css Slider
but well, the problem is that each article tag is taking its space, even when it's hidden and not being displayed in Mozilla. So the more the slider comes toward the end of it, the less white space I get to see. The next upcoming slides are hidden, but however, they are still occupying a certain space, which forces a lot of vacuous area on the right side.
You can check the website itself at the link below;
My Website
Hoping that I have clearly stated the issue, what could be the possible solution for this matter ?!?
Adding overflow-x: hidden on the <html> tag seems to fix it. I'm not sure why, though. Hopefully someone has a better solution.
I've developed a responsive website, and just when I thought it was perfect and ready to launch, I found out that the images on the homepage are not displaying properly on iPhones (I developed the site while testing on an Android, so I was none the wiser about iPhone oddities until now). The images should be fitting into the width of the screen (I've set max-width: 100%; on them), but instead they are stretched and pixelated way beyond their actual resolution.
Curiously, images on any other page of the site display just fine. I thought the issue was rooted in the fact that the images on the homepage are actually set via a CSS background property, while images everywhere else are set in <img> tags in the HTML. So I commented out the "background" declarations in the CSS file and instead used <img> tags on the homepage, just like everywhere else. When I did that to the very first image, it displayed great. However, as soon as I switched the rest of the images to HTML, they all reverted back to the ugly that was present before.
My boss (who has access to an iPhone) sent me this video (apologies for it being out of focus, but you get the idea): https://www.youtube.com/watch?v=_vFJVZiBc3Q
The first four images he scrolls past ought to all fit above the fold, and you're only seeing the left ~1/10th of the actual image, that's how far it's stretched out.
I'm out of ideas here. Is there anything special I need to do for iPhones? With the <img> tag, these photos should be in the same format that the rest of the working images are in.
Thanks so much in advance!
As it turns out, it was a me-specific issue. Apologies for being vague above, I really had no idea what I should have been looking for when it came to iPhones. The images in question were contained in <div>s in which I specified a height in vh units. As a future reference for anyone reading this, you apparently shouldn't do that. Changing height to a percent unit fixed the issue, and it displays great on both Android and iPhone!
So I'm stuck with this annoying and minor IE8 problem. When I'm scrolling it seems like IE cuts off some piece of my H1 titles. I made a video so it's clear what is happening.
The HTML & CSS are very large, so before I'm going to include all the HTML and CSS I would like to know if someone knows an possible cause. Or maybe it's an known IE problem?
The titles (BRACELETS, NECKLACES, ..) are H1´s with z-index set to 999.
The video can be found here http://imageshack.us/clip/my-videos/607/wcw.mp4/
A live code sample would be great to explore. My only guess based on the video (which is very helpful in this scenario nice!), is that IE8 is choking and lagging on rendering items as you are scrolling. Is there any markup changes tied to scroll events or perhaps some CSS "fixed" items on your page?
i know it's a very old question but i think it could help others
I found myself having the same problem with a free-for-commercial-use font
The solution i found was playing around with the line-height CSS property
In some sports setting it to the height of the div, in others to the font-size, in others to a little bit more than that
In my experience it changes from font to font and from font-size to font-size
I've built a website for someone, but according to him, scrolling is very very choppy on the website in IE7 on his computer. On my computer I don't have any problems with scrolling (in any browser), i've already tried some things, but according to him scrolling still is very choppy. So I was wondering if someone has some suggestions for me? I think the main problem is the full width background image, but i'm not entirely sure.
The website is:
www.casalagodilugano.nl
The website is in dutch, but for this question that doesn't have to matter
edit:
Tx for the helpful answers. In the end, it was indeed the background image which caused problems in IE7. By accident I found a way to work around this problem: I set the image as the background image, centered the image, and using css3 I made sure the was stretched the way it should.
I had a problem similar to this. It turned out to be because my computer was full and my performance suffered. Viewing the issue on my new machine (also had IE7) produced no choppy scrolling. I fear your client has the same problem, perhaps suggest it's his computer and not your website?
Edit:
Many things affect the processing on a website, I'd suggest it has to do with your background image. The sand has quite a "repeatable" texture so perhaps you should Photoshop it down so it's a much smaller image and just use 'background-repeat' in your CSS to achieve a similar effect. Your background image is also around 200% of what it displays on the website, I copied the URL of the image and viewed it by itself and it's HUGE! The emphasis here is on image file size, because IE is having trouble shifting the image down when you scroll. It's not a very good browser to be fair. I've also noticed that your large header image is larger in actual size, suggesting that the size is reduced by your code. Try reducing this image size to the size you want to display it
Edit pt 2
I've stumbled upon a script that for some reason waits 5 seconds before running and that is the Google maps API. I respect that you need this for the Routes page but if I were you, on any page where there is no map, remove any mention of the google maps api from the source code.
I have found that IE gets choppy when you have an <input> tag without a border or background specified ... very strange IE "bug" but i've fixed choppy scrolling on sites/pages by just adding a border to the <input> tags.