CSS and Mobile Devices

[bo diddly]

Hi,

Can you recommend any good sources of information relating to website display (using CSS) on mobile devices. My site www.theonlinediary.com displays well in devices that use opera but I need to amend the stylesheet to cater for IE etc.

Just as an aside do you know of a way that would keep the dark blue footer below the left hand menu structure even when the content isn't that deep? It was fine until I had to change the layout.

Thanks in anticipation

Roger

[vgarcia]

Doesn't PocketIE just use the screen-media stylesheet and shrink it down for smallscreen rendering?

[bo diddly]

Doesn't PocketIE just use the screen-media stylesheet and shrink it down for smallscreen rendering?

I have read somewhere that you have to include the 'handeld' style type?

[Paul O'B]

Just as an aside do you know of a way that would keep the dark blue footer below the left hand menu structure even when the content isn't that deep? It was fine until I had to change the layout.

As you have absolutley positioned the side column then the only thing you can do is give your centre content a min-height. Assuming of course that the right column is a consistent height throughout. If not you will need to float the left column instead.

Assuming the left nav is the sam height then this code will provide the centre content with a min-height.

#content {
 position:relative;
 z-index: 3;
 padding: 0px;
 border:0px 0px 0px 1px;/* changed from all borders*/
 margin:101px 250px 0 157px;
 background: #fff;
 font-size: 90%;
 text-align:left;
 width:650px;
 voice-family: "\"}\"";
 voice-family: inherit;
width:651px;
  }
html>body #content {
   width:650px;
}
#centercontent { min-height:720px;}
/* commented backslash hack v2 \*/ 
* html #centercontent {height:720px;}
/* end hack */ 

html:

<div id="content"> <a name="top"></a> 
  <!--<div class="top">TheOnlineDiary.com</div>-->
  <!-- INSERT CONTENT HERE -->
  <div id="centercontent">
  <div class="blog"> <a name="content"></a>
etc....
etc....
  </div><!-- END OF CENTER CONTENT -->
  <div class="bottom">iDezign <a href="website-map.php" title="follow this link to the online diary website map">&copy;</a>

Paul