Android versus Apple
I have this page were the background image is to float. It works good on mac. pc and Andriod devices. But it does not work on ipad and iphones. What could be the problem
Background-images can't be floated -- what exactly do you even mean by that?
Though given you've got a way too large fixed width layout with NOTHING meant to allow it to be elastic, semi-fluid or responsive, I'm not sure how you can say it 'works good' on android devices (unless you happen to be using a 1920 wide tablet in landscape view).
This is a great example of "it wasn't designed with mobile or accessibility in mind, OF COURSE it doesn't work on mobile".
I mean, the markup is terrifyingly bad -- coded bullets and line breaks doing a unordered list's job, gibberish use of STRONG and numbered headings, paragraphs around tags they have no business being around (like ASIDE and DIV), static style in the markup, tags and attributes that have no business on any website written after 1997 like FONT and ALIGN, tables for layout...
... and you're wondering why it's not working on mobile? :/
This is not my work. Just had someone ask me the question. So when you view and scroll the page. the background image should not move. And it doesn't on my computer. but on a Ipad it does.
Ok, that's not "float", that's "fixed"; specifically the "background-position:fixed;" in that CSS that has no business in the HTML. Given that the content is bigger than a mobile device's screen should be, they are probably scrolling with the content. A full size non-repeated image behaves 'odd' when the width and/or height is bigger than the display across many devices, not just iOS ones... this is even more true one you have that "tables for layout" garbage in there...
Generally it's one of the reasons that:
1) don't trust background-position:fixed to actually work as advertised.
2) images that large have no business being used as backgrounds on websites.
Some of the other reasons being it makes low-memory devices painful to scroll on and it consumes WAY too much electricity for what it delivers. Generally that's why I avoid trying to use it altogether.
There is a 'trick' to make it behave properly -- you put the background on BODY, set BODY and HTML to "height:100%" and make an inner DIV wrapping everything else in BODY that's set to "height:100%; overflow:auto;" -- it's ugly, but it USUALLY works.
Really though with the laundry list of "how not to build a website", particularly if one cares about mobile -- you really should tell whoever it is that has that site to throw it away and start over; most of the design concepts aren't viable and the code is useless to anything but visual users who magically happen to be on the same size screen as the "designer". I'd be axing the "tables for nothing", get rid of all the tags and attributes that have no business on any website written in the past sixteen years, switch it to an elastic, semi-fluid and responsive layout -- which would let it be designed for those devices instead of blindly hoping that decade and a half out of date methodology will be 'tricked' into working by the browser.
The first line proudly proclaiming most of it's problems -- Admiral Ackbar territory; It's a Trap! XHTML 1.0 Transitional basically means it was written using coding techniques that are 'in transition' from 1997 to 1998 -- and it shows badly here as this is quite obviously HTML 3.2 with a X1.0 tranny doctype slapped around it.
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)