I've developed a really basic site for a friend of the family. It's very nearly ready to go bar one small issue on Windows 7 browsers.
I'm not very experienced designing for the Windows 7 platform and have struck a blank. I've also not got my own Windows 7 machine and have to check at work, making it tricky to debug.
Here's the URL-
pipecoproducts.com
The issue is with the background images, they show on all other platforms I test, but not Windows 7. The image was created in photoshop adding a white wash over it to let the content show over the top. It been saved as a png file.
Here's the CSS used to bring up the background-image, but I don't see why Windows 7 browsers don't like it-
#main {
background-image:url("/img/backgrounds/pipeco.png");
background-repeat:no-repeat;
}
Does anyone have any way of resolving this?
Thanks in advance.
Nick
Tested this on my Windows 7 PC on Internet Explorer 9, Chrome, and Firefox, the image works here without any problem.
It seems that the problem lays on your side and not on your code, although I've noticed your background image is 1MB, which is really huge for a background, perhaps the image stops loading due size or you haven't waited long enough.
Is there a possibility your work computer/network has some sort of web filtering software that could be preventing access to the image file?
Otherwise, as EliotVU says, 1MB is much too big, especially for a background image. On a slow connection it might just be taking so long to load that you think it isn't going to appear.
Related
I have a pixelated font in one of my projects (like the one in the link down below) but Windows renders it blurry which is annoying because we want a pixelated font for this project. The issue is that all the developers on the project is using Mac so its hard for us to trying to play around with it to see if its possible to make it less blurry.
So my question is if there is someone out there with a Windows computer that could take a look at the link below and see if you can make it somewhat less blurry?
https://fj7o67.csb.app/
It looks like the font you are using is not working well with font weight.
Add this:
h1,h2 {font-weight:normal;}
I've recently been exploring on a site in my free time, and ran across a peculiar circumstance. When viewing an image (direct link) from imageshack, it displays in two (or more) completely different, and sometimes blurry, dimensions.
For instance -- where an image might be small in Chrome or Vivaldi, appears in full scale in Safari or Firefox. Given the differences in the background, as I believe the former two are webkit based, where as the other two use their own engine, I'm not sure if this has something to do with it, as I couldn't detect any outright styling that would force such a difference.
The links are identical when viewed between browsers, on the same machine. Same results occur when attempting on another machine. Any idea as to what might cause this, and how to remedy it for a consistent experience?
Below is a single image link for an example -- one of many instances.
Image
My thanks ahead of time for the input and any feedback or assistance!
why is div in IE 7 display difference from other browser ?
in IE 7 Look like
________________
|________________|
But in Chrome and other browser Look like
____________________________________________________________________________
How to hack ie to display look like other browser ?
<div style=" border: 1px solid #ddd; width : 200 px; height : 1px;"></div>
Having a website look the same on different browsers has been an ongoing issue for the web designers all over the world. The reason is simple - the visualization of a website depends on many different variables such as:
The visitor's OS (operating system)
The visitor's display resolution
How the browser interprets the page
The visitor's OS
If your website uses submit buttons, radio buttons, check boxes and edit fields, all of them will be visualized depending on the visitor's OS and its style. For example, a submit button can look like a gray rectangle on your Windows Classic theme, and like an oval if you use the XP style. As a workaround, you can create custom buttons for your website.
The code of an ordinary submit button looks like this:
You can replace it with the following code in order to specify the submit button image:
Submit
Similar changes can be made for the other parts of your website's interface. Consulting a professional web designer or searching the Internet will be necessary to solve all of the possible issues.
Visitor's display resolution
Display resolution is affecting quite a lot the way a website is displayed. For example, if you create your pages at 1024x768 they will not fit into the screen of a visitor that has set his/her resolution to 800x600.
In order to fix this, you should not use static dimensions for your website, i.e. instead of setting width = 1024px you can use width = 100%. This will not fix all issues but at least will make the page fit into the screen.
How the browser interprets the page or website's cross-browser compatibility
Web browsers do not render pages pixel by pixel. They read the entire code and produce an output depending on your code. There are, however, differences in the code interpretation. Therefore you should check the way your website looks on different browsers and operating systems. You can use the following online tool in order see how your pages look on different browsers:
http://browsershots.org
A good website should look the same and all its features should work in any browser.
Unfortunately, there is no easy solution for that. You should check the specificities of each browser that fails to display your website correctly and make the necessary adjustments to your code. A skilled website developer should be familiar with most common browser compatibility issues and should be able to assist you. Such compatibility issues may occur not only in different browsers but because of an old browser version which does not support completely the latest standards.
In conclusion, you should test your websites on as many different browsers and operating systems as possible. If you spot any errors, you should try searching on the Internet for a specific solution for the issue or contact a skilled developer who may assist you in resolving it.
I was playing with adaptative CSS by changing my Google Chrome window size when I noticed that the Twitter Bootstrap page seems to "make google chrome fail" on certain occasions.
Steps to reproduce (from a desktop computer):
Start with a blank Google Chrome tab, full screen
Visit http://twitter.github.com/bootstrap/
Gradually make the window narrower, letting go the mouse every 100 pixels or so.
Keep going until you get the "totally mobile version", at around 400px (The blue "View project on github" button is on top of the white "Download Bootstrap" button, and they are both full-width).
Now make the window thick again, letting the mouse go after every 20 pixels or so.
Chances are that you will get weird behaviour while doing steps 4 or 5 - Chrome gets confused about the sizes, or forgets to draw a vertical region of the page (which is rendered white). I've also managed to get a "phantom side pane" in some rare occasions.
I've tried in two different computers, and I still get the same issues (both using Ubuntu 12)
The thing is, other responsive sites don't have this issue. See for example http://css-tricks.com/ . You can change its size all you want, and Chrome never has any trouble rendering the multiple layouts it has (in fact, it has more layouts than twitter bootstrap).
So I can only conclude that this problem is twitter-bootstrap-specific. Probably related with the way the CSS rules or HTML content is written, or maybe related with the way files are structured.
I'm using twitter bootstrap as a base for one of my sites, and I'd like to solve this issue. Does anyone have any ideas on how to proceed?
If you believe this is bootstrap-specific this should be posted to the Twitter Bootstrap Github Pages instead of SO. However, I've been participating in an issue ticket reg. this which was closed after we pointed out that we're unable to reproduce the error on both Chrome / OS X and Chrome / Win 7 with the same browser build as the OP. This suggest that this is a platform specific chrome-error rather than a problem with the Bootstrap toolkit. With that said, I'd raise a ticket with the chrome team including your build # and OS/Platform setup.
Link to the Github Issue
Really not sure why this is occuring but with some systems the backround image gradient appears choppy and only half of it even appears, also some systems display the color so light is can barely even be seen especially those with lower resolution settings. Any ideas why this is occuring?
Here is the link to the page: http://www.kapacitive.com/Main_Page_Template.html I have it here just for testing purposes.
I also noticed that if I change the CSS positioning of the background to background-position:50% 50%; the issue of only having half the backround appear occurs on my main system.
I have a small touch screen Garmin device that has a web browser and with that device the background appears both choppy and only half appears, though I really didn't expect much from that device in the first place.
My secondary machine has a lower resolution display and with that system the background can barely be seen. This also occurs using an entirely different machine and display which has a lower resolution setting.
Maybe, I should just trash the background all together with all these damn bugs occuring, though in my opinion it does look better with the background.
If anyone wants to volunteer test the page using other devices and provide the results that would also be cool, I currently do not own any Apple devices.
Like I've stated any suggestions or ideas on resolving this issue would be great and even any insight about why this is occuring. I realize each machine is different but the differences in how this page is rendering between different machines is way too drastic in my opinion to be acceptable for deployment.
I believe the problem is with the color-depth of the machines viewing the background image. That nicely faded gradient relies on a LOT of colors, and on a screen with a limited palette, it's going to be choppy.
A work around would be to test the pixelDepth/colorDepth of visitors' screens, and to dynamically change the background image to something plainer if it is too low. Most browsers provide that information [via JavaScript] in the screen variable.
window.screen.colorDepth
window.screen.pixelDepth