Active Topics

 


Reply
Thread Tools
claesbas's Avatar
Posts: 290 | Thanked: 472 times | Joined on Dec 2007 @ Gothenburg, Sweden
#1
I don't know if this is a bug or a feature request or if there is a workaround (or perhaps a proper way I don't know how to do) I can use..

But the background in the CSS does not render "under" the scroll on som pages. The same thing is very visible in both IE and Firefox and I am not sure what would be the correct behaviour. Please fill in what you think.. or if you know a way for me to make my websites render there.

Here is screen shots from http://www.maemosweden.com and http://sv.openoffice.org (I have more examples). Please try them in Maemo Browser and see.

You get the same behaviour in firefox desktop but there it is not the same problem as in the N900. Because there you usually have a wider window. But in N900 you cant change the default width of render..

(I hope I make sense here.. )
Attached Images
  
__________________
Claes Norin
http://www.maemosweden.org

Last edited by claesbas; 2010-01-14 at 12:29.
 
claesbas's Avatar
Posts: 290 | Thanked: 472 times | Joined on Dec 2007 @ Gothenburg, Sweden
#2
I will add two more here...

(would this be considered a bug I wonder? it is the same behaviour in firefox-desktop if you make the window very narrow....)

mandriva and facebook websites here:
Attached Images
  
__________________
Claes Norin
http://www.maemosweden.org
 
claesbas's Avatar
Posts: 290 | Thanked: 472 times | Joined on Dec 2007 @ Gothenburg, Sweden
#3
Filed a bug here: https://bugs.maemo.org/show_bug.cgi?id=7973
__________________
Claes Norin
http://www.maemosweden.org
 
Posts: 162 | Thanked: 79 times | Joined on Jan 2010 @ Finland
#4
Well I think the issue here is that those pages are intended for larger screens thus the background you are seeing are fitted for the screen width. The "bug" is in the CSS. It's more of a feature. The only way to properly fix this is by facebook and the others to change their layout. That's the reason why it works in chrome and firefox the same way.

Last edited by chainreaction; 2010-01-14 at 13:25.
 
claesbas's Avatar
Posts: 290 | Thanked: 472 times | Joined on Dec 2007 @ Gothenburg, Sweden
#5
Originally Posted by chainreaction View Post
Well I think the issue here is that those pages are intended for larger screens thus the background you are seeing are fitted for the screen width. The "bug" is in the CSS. It's more of a feature. The only way to properly fix this is by facebook and the others to change their outlay. That's the reason why it works in chrome and firefox the same way.
Mm, I suppose so but why does the Maemo Browser put its "defaultview" width to 800px..?? The Maemo Browser is more floating in its behaviour than start at 800px, I think.. Maybe the windowsize (which you can't control in the Maemo Browser) should be floating ... do I make sense?
__________________
Claes Norin
http://www.maemosweden.org

Last edited by claesbas; 2010-01-14 at 15:07.
 
claesbas's Avatar
Posts: 290 | Thanked: 472 times | Joined on Dec 2007 @ Gothenburg, Sweden
#6
Firefox Mobile starts browsing in fullpage-width but has the same background issue.
I think I should probably file this bug to the Mozilla team instead. And then the fix will find its way into the Maemo Browser when/if they change engine to a newer..
__________________
Claes Norin
http://www.maemosweden.org
 
claesbas's Avatar
Posts: 290 | Thanked: 472 times | Joined on Dec 2007 @ Gothenburg, Sweden
#7
There is thousands of website which render this way:

Here is alot of screenshots taken from n900 from both Firefox Mobile and the Maemo Browser:
http://castus.dnsalias.com:8080/n900/index.html


Example here:
Attached Images
  
__________________
Claes Norin
http://www.maemosweden.org
 
claesbas's Avatar
Posts: 290 | Thanked: 472 times | Joined on Dec 2007 @ Gothenburg, Sweden
#8
I have found a solution for this problem but it only works in Fennec/Firefox Mobile. Maemo Browser seems to ignore this setting..

Bug filed: https://bugs.maemo.org/show_bug.cgi?id=8059

Add a metatag called viewport to your website... it should look like this

Code:
<meta name="viewport" content="width=1024" />
Where 1024 can be set to anything you want...

Here is screenshot of maemosweden.com (which now ha a setting of 1110 in the meta viewport setting)
Attached Images
  
__________________
Claes Norin
http://www.maemosweden.org
 
JonWW's Avatar
Posts: 623 | Thanked: 289 times | Joined on Jan 2010 @ UK
#9
Originally Posted by claesbas View Post
I don't know if this is a bug or a feature request or if there is a workaround (or perhaps a proper way I don't know how to do) I can use..
I believe the problem is with the code on your site...

Load site in IE, FF, Chrome and Safari, reduce the width to 800 or so, grab the horizontal scroll bar and move left to right, problem is evident in each browser. They cannot all be wrong.

Paste this code into an HTML file, problem is not evident in a desktop browser / MicroB.
HTML Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD><TITLE>Background Error</TITLE></HEAD>
<STYLE>
body{background:url(http://www.maemosweden.com/templates/maemosweden_1280/images/bg.jpg) top center no-repeat black}
table{background:url(http://www.maemosweden.com/templates/maemosweden_1280/images/bg.jpg) top center no-repeat black}
b{color:#F00}
</STYLE>
<BODY>
<CENTER>
<BR><BR><BR><BR><BR><BR><BR>
<B><H1>A little test - Body Background</H1></B>
<TABLE border=2><TR><TD><CENTER><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<B><H1>A little test - Table Background</H1></B><BR>
<IMG src="http://www.maemosweden.com/templates/maemosweden_1280/images/bg.jpg" width=1102></CENTER></TABLE>
</CENTER>
</BODY>
</HTML>
Hope this helps

Last edited by JonWW; 2010-01-15 at 18:34.
 
claesbas's Avatar
Posts: 290 | Thanked: 472 times | Joined on Dec 2007 @ Gothenburg, Sweden
#10
You are right that those browsers are not wrong. It is ok for them cause they are made to show websites at 1024px + size. Usually 1280px or more..

I think we are abit ahead of time at the moment with our mobile browsers at 800x480px screens and we have "converted" our "bigger brothers" down to this without taking in concern that the web today is made for 1024-1280px width in most cases. So even though our mobiles have a screen resolution of 800x480px we still want to be able to surf the real web. Also the whole viewing experience in a mobile is very much more fluid... you are at different zoom levels all the time and 100% pixel size is usually never really readable and 100% pixel are not the best view for your eyes as with a big screen. So instead you zoom to the thing you want to "look at", read, click etc etc.. what the website width is in pixels makes no real difference for the experience..

I am sure I could find a way to hack my site to make it view proper in MicroB / Maemo Browser but that is not a solution..

http://www.queness.com/
http://www.vegasuncorked.com/
http://www.comfortbrothers.com/
http://lab.colorsmagazine.com/
http://www.ndesign-studio.com/
http://www.creativespark.co.uk/
http://mightydream.com/
http://www.ministeriodeartesfreedom.com/
http://www.nineflavors.com/
http://www.giblette.com/
http://www.floridaflourish.com/
http://www.further.co.uk/
http://www.trongate103.com/
http://www.jonesandpalmer.co.uk/
http://www.colingrist.com/
http://www.pixelbrushstudios.com/
http://www.i-avion.com/
http://thingsthatarebrown.com/
http://ryokan.es/
http://www.foodincmovie.com/
http://www.theplant.jp/en/
https://www.thecommon.org/
http://www.leliathomas.com/
http://www.juandiegovelasco.com/

I very quickly surfed on www.webcreme.com and found these links with the very same problem. I can give you lots and lots more links and they all can't be wrong.

However the Mozilla team told me about this:

Code:
<meta name="viewport" content="width=1110" />
and that really solves the problem for me as a webdesigner if all mobile browsers will take on this standard (I think its a standard.. but I am not sure). Fennec/Mobile Firefox works just great with this knowledge..

the whole 800x480px surfing is still quite young and things like these will soon be common knowledge amoung webdesigner..

EDIT: Btw, your example has a table with a big image that pushes out the web content. This is not a very common layout in todays full CSS based websites
__________________
Claes Norin
http://www.maemosweden.org

Last edited by claesbas; 2010-01-15 at 22:23.
 
Reply


 
Forum Jump


All times are GMT. The time now is 01:19.