I know it's a topic that has been answered several times, but I'm playing with css "background-attachment:fixed" property, and I wanted to make it work on mobile devices.
The answer is: it's not possible, because it is forced to "scroll" for performence reasons.
Knowing that, I still tried, and I found these examples on w3schools : example 1, example 2.
These two examples both work on my chrome mobile browser (running on Android 7.0). No matter how hard I try, I can't reproduce this behaviour.
I inspected the code and it seems based solely on background-attachment to work.
How is it possible, and how can I reproduce this?
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.
I am making a website, where when i preview it in safari. It turns out exactly as i want it to be. But when i test it out with firefox.
In my page i have a element that is aligned on the page using
Padding-left and Margin-top. Which works perfectly when i preview it in safari. But when i open the file in firefox. The element's Margin-top increases by a few pixels.
How do i code my css file so that i can have the same page for different browsers. I have tried looking on the web for a solution, but none of them so far has helped with the problem.
Reply's will be much appreciated.
As jsteinmann said, check use http://validator.w3.org/ to ensure your page validates. This will take some time to figure out if you are new, but it is an essential step.
If you are having an issue with FireFox, you are probably going to die when you look in IE. Bookmark this link! http://msdn.microsoft.com/en-us/library/ms537512(v=vs.85).aspx
You have a lot to learn and google will help: https://www.google.com.au/search?q=introduction+to+cross+browser+testing&oq=introduction+to+cross+browser+testing&aqs=chrome.0.57.5763&sugexp=chrome,mod=12&sourceid=chrome&ie=UTF-8
In future, use stackoverflow for specific questions with code examples. You will find that you get specific answers quite quickly.
Also, don't forget to tick the answer that you find most useful, and also vote some up a level. That's why people spend the time answering your questions.
Enjoy the long road ahead :)
Specify all four margin and all four padding values explicitly. That will eliminate the diffferences in the browsers' built-in default stylesheets.
There can be several reasons why your finding your layouts aren't cross-browser compatible, so it would take a considerable amount of info of the markup and css to make any kind of determination on how to help you code a 100% W3C valid web page.
I would suggest using a css framework like blueprint or 960 for your layouts, so you have less issues in this way. It's a good way to start and maintain projects, and learn how to create layouts if you choose not to use a framework.
Also, I would suggest testing all of your projects in chrome and firefox first, then safari, simply because of the amount of users that use those two browsers compared to safari. I would also say, if it looks good in chrome, it will probably look good in safari and firefox, but it's always worth testing.
I'm working on adding basic print functionality to a web map application I recently built, and I can't seem to make the printing work properly when using Internet Explorer 8 in standards mode. I was hoping that someone with more CSS experience might be able to help.
I've created a basic example on jsbin that demonstrates what I'm seeing: http://jsbin.com/osepov/16. This example prints properly in most browsers. In Internet Explorer 8 in standards mode, however, the map's tile images run off of the first page and onto a second page when printing. I've tried a bunch of different CSS combinations, and have browsed the web for hours looking for hacks that might solve the problem. I've obviously had no luck thus far.
Being that the print functionality works well in most browsers, I am willing to compromise on a few things, if needed, to get this working in Internet Explorer 8 standards mode:
The map doesn't have to fill the entire page, minus the header. It can have a fixed height.
The header is nice to have, but I'm willing to do without it.
I know it is possible to build a PDF on the server, but I really want to do this with a simple print stylesheet.
Note: Yes, I do have to support IE 8 standards mode. I had a solution that kicked IE8 users to IE7 mode, but this was not acceptable to my client.
UPDATE 2: I was able to resolve the issue by bumping IE8 down to IE7 standards mode. The map is printing correctly now.
UPDATE: Nope, this didn't solve the problem. I'm still seeing the same issue. This seemed to work, but I'm still seeing the problem.
ORIGINAL POST: I think I figured this out. Basically, it seems like the "top" div was causing the entire page to get bumped down and run over to a second page when printing in Internet Explorer 8 standards mode. I'm not sure why this was just happening in IE8 and not in other browsers, but there are all sorts of strange IE-only bugs that I don't understand.
The final fix:
#wrapper {height:100%;left:0px;position:absolute;top:0px;width:100%;}
#top {height:70px;position:relative;width:100%;}
#main {height:785px;overflow:hidden;position:absolute;top:70px;width:100%;}
So positioning the "top" div relatively and assigning a pixel height and "overflow:hidden" to the "main" div seemed to solve the problem.
This isn't a perfect solution, but it meets my current requirements.
Here's the updated solution: http://jsbin.com/osepov/19.
Webkit is an awful renderer in my opinion. As a web designer/developer, I take into account how my design looks at every magnification. Webkit handles this extremely poorly. Margins, padding, and borders all get rendered extremely poorly across various magnifications and there is no CSS you can use that is "cross-zoom" compliant in WebKit. Zoom in and out of any webpage in IE, Firefox, Opera and it is consistent. Take a look at this site, for instance:
http://development.mminc.co/davidphotos/
Try using the carousel at the bottom at different magnifications in IE or Firefox. Works fine, right? Now try the same thing in Chrome or Safari. BOOM! A developer's nightmare! Please, if anyone knows of any tricks of the trade to get Webkit to behave with something that even Trident is able to successfully do I'd like to hear it. I've heard of a jQuery zoom plugin, but that is sort of a last resort. I've looked everywhere for the issue but no one even mentions Webkit zoom issues. It's like it's taboo or something. Personally I think it's one of the biggest blunders of the modern browser era, especially when such a (otherwise) great browser like Chrome is giving me more trouble with presentation issues than IE7.
EDIT: I feel I should be more general and use an example where it is obvious only HTML and CSS are implemented.
http://www.gamespot.com/
Webkit forces a line-break with the top menu w/ zoom tests, but other browsers don't. It is a major issue with the engine and if there are any concrete solutions I'd like to hear them. If there isn't then I think this issue should be addressed and resolved immediately; it is an eyesore to users and a nightmare for developers. The fact that it isn't addressed anywhere on the net is troublesome.
This isn't answering how to fix WebKit zoom issues in general, but it should help with your specific problem.
You're using jCarousel.
Even the simple demo shows the same problems you describe.
So, that plugin is simply broken when it comes to zooming with WebKit browsers.
You could either ask the author of the plugin for advice, or find a different carousel plugin.
For instance, this one doesn't seem to have any problems when you zoom in using a WebKit browser:
http://www.thomaslanciaux.pro/jquery/jquery_carousel.htm (look at the "dispItems" demo)
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.