So I'm designing and build a website for school as part of a project, on this page there are 3 images which in Internet Explorer and Firefox seem perfectly fine but when in Google Chrome, When ever you re-size the browser they seem squashed. I tried Googling it to see if there was a bug but nothing has popped up?
Picture comparing Google Chrome with Internet Explorer : http://prntscr.com/22cr26
Live site (So you can see for yourself) : http://baileywhite.comule.com/penguin/Shop.html
You have width and height attributes on the img tag that are not the same ratio as the original image, and that is what is "squishing" the image.
Related
So I'm making a website and using Safari as the browser of choice. I decide to open the website in chrome but the font and images are broken. I tried the same thing on my phone, but there ONLY the image is broken.
Here's the website:
dikril.viliworld.eu/Archive
heres the image that has to show up in the top left corner but doesn't.:
https://dikril.viliworld.eu/Archive/images/Dikril-white-print.svg
Please delete your invalid manifest line in your html-file. Chrome is using it, safari not.
I have a problem with images being blurry and crispy in internet explorer. Sometimes it happens in Edge too. I first thought it was because some of the images was being resized by the browser, but I have tested it without forcing the browser to resize and than does not trigger the problem.
Anyone got any ideas how to fix this?
See examples here
I am beginner in web page development so I don't have any knowlede about which things one should keep in mind while developing webpage as different browser have different approach of displaying the webpage. So please help me to know the proper way to develop the web page.
Right now i am facing a problem :
In the table if 'td' border is not set then the background image displayed in firefox but not in chrome and safari and if set then it display in chrome, safari and firefox.
Why?
in my site I have problem in proper rendering of icons in Google Chrome as shown.
As you can see the right and bottom edge of image seems to be cut-off. But the same icons renders properly in all other browser including IE, FF, Safari.
Following is the screenshot of mozilla for the same.
Actually icons are of very big size around almost 1000 X 1000px, and I'm showing that in 100 X 100px area. The problem is I can't scale down the images and I have to use these images only.
In chrome when I zoom-in or zoom-out my website, for a moment it renders correctly but again after some time is renders as shown above.
Any possible solution to this?
Thanks for your time!!
I have resolved it myself by using image-rendering css property.
I am trying to make a website with a video background using HTML5's video tag. I also tried using a jQuery plugin (http://plugins.jquery.com/project/videoBG). I got the video to load and work properly, but every time it makes other content appear grainy/pixelated. Is there anyway to place items on top of the video background and not have them appear grainy / pixelated?
You can see the pages I've created. The code is fairly simple, so I won't include it here.
With Video: http://createinform.com/test4.html
Without Video: http://createinform.com/test3.html
You'll notice that the logo and text look different from page to page, but they are using the save CSS rules. Thank you in advance!
Cheers,
Evan
This seems to be a known issue with Chrome. I tried the same two pages in Firefox (5.0), IE (9), and Opera (10), and I couldn't tell the difference in the rendering.
EDIT: I also tried the two pages in Safari (5.0.1/Windows), and the rendering looks even worse there. So, perhaps it's a webkit issue.
A part the Chrome bug, your logo image is bigger than it appears, and is scaled down via CSS.
Using a correctly sized image would remove any logo issue.
The text below renders fine in both version BTW (chrome 14.0.797.0 m)