Mobile AND desktop compatibility (that validates)?

Well, I put that word list in a table (though maybe there’s a better way?), and it centers ok. And I finally got the page to validate as html 5, with 1 warning for I don’t know what exactly. Thanks, I really appreciate your help.

Tables are not the best thing to use for layout (unless it’s actually tabular data - that is, arranged in rows and columns). You could have simply kept the left-alignment and made the #box div much narrower. Though presumably you don’t want all that left and right white space, so perhaps there would be more to this than meets the eye at this stage. You need to consider your whole design.

well this design is only for smartphone type screens. I’m testing it in the Opera mini simulator. Of course for bigger screens, I want to use @media queries and hopefully have much less white space. I tried that idea of making the div smaller - 11em…it looks fine in the simulator! Thanks.

Ah, right, that makes sense. :slight_smile:

…now I’m testing in opera mini simulator and iPhone 4 simulator and I can’t get the box div text centered in both. It seems

% or em widths render quite differently in both screens, so not good for centering. Maybe I need to think of something like 100% width and the old reliable margin : 0 auto - if I could only get it to work…maybe a centered (and justified) bullet list? Tomorrow’s another day!

If this is just for small screens, then yes, I’d say don’t set a width on it at all (in which case it will default to width: 100%) and then just set some padding on the box div to keep the text away from the edge of the screen.

Using the padding as a way of centering didn’t work well - the padding values render differently in opera mini and iPhone 4 simulators. So anyway, I did a few other things, and I think it looks ok in those 2 simulators - but I haven’t tried other simulators yet - do you know any good site for mobile layout testing? I’d appreciate it if you could let me know if I’m on the right track before I change the rest of my site. So far this is my test page: www.profesornativo(dot)com/edit.htm Thanks.

Mobilizer is a handy app for testing a few mobile devices. But the best, of course, is to use the real devices. I’m planning one day to make friends with a local mobile phone shop!

On Mobilizer, your layout works well on iPhone, Blackberry, HTC and Palm Pre. I can’t promise that’s truly accurate, though.

That’s good to know about mobilizer! Those screen shots look good! So at least you haven’t pointed out any serious css or HTML flaws, so I’ll go ahead with the project, which will probably take me ages, being as I am a bit slow … a bit? ;o) Thanks again.