Rendering my website on mobile browser [Issue]

HTML & CSS
1

Currently I have a website that I want to render well on mobile devices. However one device that seems to be giving trouble is the Blackberry 8520. It always breaks the header and pushes my back button downwards. What can I do to avoid this. My website is http://webapp-testing.com. Any tips and would be greatly appreciated.

2

If the back should be on the same line with position inline, I sugest that you reduce your toabsize, becouse now all 4 are 25% (makes 100% in total) so there is no place for the btn and it moves to the next line. (it even does in chrome)

3

The space with the back button is not the problem is the section above it with the links. It shows well on a normal broswer but on the bb browser only the 8520s the sections with the links go onto the next line (it doesn’t stay on one line). If i drop the width to less than 25% it fits well but on the normal browsers it comes up short. So i need a solution to cater for this.

4

Try soaking up any rounding errors on the last list with a negative margin.


#tab-bar li + li + li + li{margin-right:-10px}

Not sure if it will help as I don’t have a blackberry to test.

5

I got this to work but my li width is 24.9% lol I have no idea what is causing the last li to drop to the second line if they are all equal in width.

The code you posed above I should put this in my css file as a separate entry or into the original #tab-bar

6

Just add the code under the original rules.

The negative margin will offset the rounding errors because 4 x 25% will very often be wider than 100% if each portion is rounded up by a pixel and the browser isn’t clever enough to notice.

7

I am not seeing any difference my css code is as follows

#tab-bar li + li + li + li{margin-right:-10px}
  
#tab-bar {
  zoom: 1;
  background: #5C4033;
  border-bottom: 1px #441d22 solid;
  position: relative;
  z-index: 200;}
8

I don’t see the code added in your page at the link above.

Are you sure its uploaded.

It may not be the issue but from what you are saying it sounds like it should help.

9

Sorry I did it locally as I am working on other stuff now locally also. I didn’t see a change neither was it in firebug as a reference.

10

ok I take that back it works fine tks alot Paul O’B