ok. so I decide to take it upon myself to do the mobile phone templates for the soon to be launched location based service Echoecho.
hmmm...now I'm stuck on something that seems so simple.
I tried to do my homework and of course a whole bunch of google and I realise there are umpteen different ways that I can try to position the text but whatever I do I end up with something not working.
Here's the link to try for whoever feels like helping me...
I'm trying to make a simple template for our mobile specific pages (I'm not worried about iphone because the webkit is so good it's easy to make workable stuff)...I'm trying to make a generic template for all other mobile phones.
Mobile phone css documentation is either archaic or non-existent - so we designed a very simple template which just scrolls vertically with content and looks like this
What's annoying me is the gap between the text (contact/blog/api/help) and the second dotted line (which is a 2 pixel gif)
The css is very easy aswell - it's here
The bit of the css that controls the size of the gap between the text and the dotted line is this
font-family: Lucida Console, Monaco, Verdana, monospace;
margin: 3px 0 -9px 13px;
but look at that ridiculous negative 9 bottom margin. I had it at zero originally but then there was a massive gap between those two divs.
I can solve this problem with absolute positioning but that strikes me as unwise...in any case I figured I'd ask the experts...seems like a fairly easy solution...
I attached a jpeg with what it's supposed to look like (don't worry about fonts etc it's just the positioning of that line that bothers me...