html - left side of webpage cut off on Android phone, but looks fine on Chrome, Safari, and Firefox -


my wesite, http://scissormanmusic.com/ when viewing on droid incredible, displays left 200(ish)px cut off. when view on desktop/laptop computer web browser firefox, safari, or chrome cutting off doesn't happen. haven't clue why. what's best way fix this. here's code:

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title> || scissormanmusic.com || </title>  <script language="javascript"> function simplepreload() {    var args = simplepreload.arguments;   document.imagearray = new array(args.length);   for(var i=0; i<args.length; i++)   {     document.imagearray[i] = new image;     document.imagearray[i].src = args[i];   }   } simplepreload( 'news.png','newsro.png','beats.png','beatsro.png','music.png','musicro.png','contact.png','contactro.png','links.png','linksro.png','scissorsheader.png','scissorleftleftheader.png','facebook.png','twitter.png','leftheader.png','rightheader.png' );  </script>  <style type="text/css"> a:link {color:#222229; text-decoration:none; border:none;} a:visited {color:#222229; text-decoration:none; border:none;} a:hover {color:#222229; text-decoration:underline; border:none;} a:focus {color:#222229; text-decoration:none; border:none;} a:active {color:#222229; text-decoration:none; border:none;} html {     background-color:#222229;     margin:auto; } body {     background:#222229;     margin:0; }    #scissorsheader{     position:fixed center center; } #headerleft {     position:relative;     right:408px;     bottom:347px; } #headerleftleft {     position:relative;     right:640px;     bottom:765px; } #headerright {     position:relative;     left:344px;     bottom:450px; } #twitter {     position:relative;     left:573px;     bottom:907px; } #facebook {     position:relative;     left:573px;     bottom:914px; } #leftmenu {     position:relative;     left:186px;     bottom:451px;     width:700px; } #rightmenu {     position:relative;     left:942px;     bottom:524px;     width:700px;         } #leftframe {     position:relative;     right:450px;     bottom:900px;     z-index:3;       width:800px;     height:2000px; } #rightframe {     position:relative;     left:472px;     bottom:2900px;     z-index:4;       width:800px;     height:2000px;   } #menucontainer {     position:relative;     right:600px; } #everything{     position:relative;     left:150px;  } </style>   </head> <body> <div id="everything" align="center"> <div id="scissorsheader" align="center"><img src="scissorsheader.png"/></div>  <div id="headerleft" align="center"><img src="headerleft.png"/></div> <div id="headerright" align="center"><img src="headerright.png"/></div>  <div id="menucontainer" align="center">  <div id="leftmenu" align="center">  <a href="news.html" target="leftframe"> <img name="news" src="news.png"  onmouseover="document.news.src='newsro.png'"  onmouseout="document.news.src='news.png'"/> </a>  <a href="beats.html" target="leftframe"> <img name="beats" src="beats.png"  onmouseover="document.beats.src='beatsro.png'"  onmouseout="document.beats.src='beats.png'"/> </a>  <a href="music.html" target="leftframe"> <img name="music" src="music.png"  onmouseover="document.music.src='musicro.png'"  onmouseout="document.music.src='music.png'"/> </a> </div>  <div id="rightmenu" align="center"> <a href="contact.html" target="rightframe"> <img name="contact" src="contact.png"  onmouseover="document.contact.src='contactro.png'"  onmouseout="document.contact.src='contact.png'"/> </a>  <a href="links.html" target="rightframe"> <img name="links" src="links.png"  onmouseover="document.links.src='linksro.png'"  onmouseout="document.links.src='links.png'"/> </a> </div> </div>   <div id="headerleftleft" align="center"><img src="scissorleftleftheader.png"/></div> <div id="facebook" align="center"><a href="http://www.facebook.com/scissormanmusic"     target="_new"><img src="facebook.png"/></a></div> <div id="twitter" align="center"> <a href="http://www.twitter.com/scissormanmusic" target="_new"><img src="twitterlogo.png"/></a></div>  <br /><br /><br /><br /><br />  <div align="center"> <iframe src="news.html" name="leftframe" id="leftframe" style="border:hidden" scrolling="no"></iframe> </div>  <div align="center"> <iframe src="contact.html" name="rightframe" id="rightframe" style="border:hidden" scrolling="no"></iframe> </div>  </div> </body> </html>

thanks!

without giving fixed positioning can try giving margin , if insist using fixed positioning try using media query detect view port width , giving different right positioning?


Comments

Post a Comment

Popular posts from this blog

java - Play! framework 2.0: How to display multiple image? -

i need display gallery of photos. here template: @(photos: list[photo]) @title = { <bold>gallery</bold> } @main(title,"photo"){ <ul class="thumbnails"> @for(photo <- photos) { <li class="span3"> <a href="#" class="thumbnail"> <img src="@photo.path" alt=""> </a> </li> } </ul> } and here controller method: public static result getphotos() { return ok(views.html.photo.gallery.render(photo.get())); } and here photo bean : @entity public class photo extends model { @id public long id; @required public string label; public string path; public photo(string path, string label) { this.path = path; this.label = label; } private static finder<long, photo> find = new finder<long, photo>( long.class, photo.class); public static list<phot...
Read more

gmail - Is there any documentation for read-only access to the Google Contacts API? -

i want read-only access user's google contacts. there stackoverflow member wanted this, , received following answer : yes, there is, use https://www.googleapis.com/auth/contacts.readonly scope , "view contacts". this exchange reference read-only access google contacts can find using google. simply using access token obtained attempt read usual google contacts api (i.e. https://www.google.com/m8/feeds ) fails insufficient permissions. similarly, using google contacts api on new target fails 404 errors (for example https://www.googleapis.com/auth/contacts.readonly/default/full ). is there documentation anywhere on how use api, or permissible way access google contacts api full read-write access?
Read more

php - Controller/JToolBar not working in Joomla 2.5 -

relevant code: jtoolbarhelper::custom('savecategories', 'save', '', 'save', false, false); ... <input type="hidden" name="controller" value="easyblogcontroller"> according can dig docs , own previous questions, should call savecategories() function in easyblogcontroller . i've tried setting value easyblog , easyblog.php (file name) current easyblogcontroller (class name). clicking on save button refreshes page. not redirect, echo or var_dump test code put in savecategories() function. var_dump ing jrequest::getvar('controller') , 'task' return correct values. creating controller object , using $controller->execute('task'); works. the values going depend on location of controller trying call, , have couple options here. typically there controller in base folder of component (likely components/com_easyblog) in file called controller.php , class name inside ...
Read more