Browser Compatibility Issues

[echoParticipant]

I believe there is something amok with my (intended to be simple) CSS. The other day one of my Twitter friends informed me of the following problem with echoverse.org:

Safari wont let me read all your blog entry. [...] This is Safari on iPod Touch by the way – bottom gets cut off with no scroll bar.

a) I’m not sure where the problem lies; maybe a fresh pair of eyes can tell me where my coding went wrong?

b) The site looks like it should in Safari 5 on my computer. Since I don’t have access to a mobile device to check for myself, is there a site similar to browsershots.org where one can test how a website looks on mobile devices?

Here is the ‘offending’ CSS:

body,html {

margin: 0px;

padding: 0px;

color: #fff;

background: #111122;

font: 11px "Lucida Grande","Lucida Sans Unicode",Tahoma, Helvetica, Verdana, sans-serif;

}



#container {

width: 800px;

margin: 0 auto;

}



#header {

text-align: center;

background: #000;

}



#left {

float: left;

width: 100px;

min-height: 400px;

max-height: 600px;

}



#center {

float: left;

width: 600px;

min-height: 400px;

max-height: 600px;

overflow: auto;

margin: 10px;

padding: 10px;

}



#right {

float: right;

width: 60px;

min-height: 400px;

max-height: 600px;

}



#footer {

clear: both;

color: #fff;

background: #000;

height: 20px;

text-align: center;

}



a:link {

color: #B9CAFF;

text-decoration: none;



}



a:visited {

color: #B9CAFF;

text-decoration: none;

}



a:hover {

color: #4C6981;

text-decoration: none;

}



a:active {

color: #B9CAFF;

text-decoration: none;

}

Thanks in advance!

[VeraParticipant]

I checked it on my phone (which has an Android 2.2 OS), using the default browser and I could reproduce it. From the second entry I can only see the first two lines.

I think the problem is the overflow:auto

I checked this feature with another site that I had to develop for work and it doesn’t see the scrollbars either. Is there any chance you can ditch the overflow for the #center div? IMO, it’s much more comfortable for users to have the whole page scroll, rather than just the div. That way if I roll the scroll button anywhere on the page, it will scroll, and I won’t necessarily have to be on top of the center div.

Note: don’t know what the browser is called (apparently it’s not Chrome), but it is a Webkit-based one (Safari and Chrome have a webkit engine).

[echoParticipant]

I removed the overflow:auto bit and it almost worked but then I ran into a problem with my footer: the text was spilling over. So I knocked the

min-height: 400px;

max-height: 600px;

out of the left, right and center divs and now it seems to be working.

Can you tell me if the scrolling problem is resolved on your phone?

Thanks, Vera

[VeraParticipant]

Yep. It’s fixed now.

[Anonymous]

Don’t know what the browser is called (apparently it’s not Chrome), but it is a Webkit-based one (Safari and Chrome have a webkit engine).

Thanks

---

iPad2 case

iPad 2 case

ipad 2 Charger

[Author]

Posts