Databases
StackOverflow2013
Postsdbo
POScreen Size Optimization For Safari
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POScreen Size Optimization For Safari
    primarykey
    data
    text
    <p>I am having problems with my site optimization. On my laptop everything seems to work fine with the widths, heights, margins and so on. But when i use an Imac or another computer with larger screen sizes, the content offset to laptop screen size not full screen.</p> <p>Here is my CSS:</p> <pre><code>body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, input, textarea, fieldset, blockquote { margin: 0; padding: 0; border: 0; } body { width:960px; height:2587; padding-left:30px; background-color:white; } .headertwitter { margin-left:40px; margin-top:-58px; } .headervimeo { margin-left:80px; margin-top:-59px; } .headertypecontact { margin-top:-16px; margin-left:290px; } #header { } .headerwork { margin-left:147px; margin-top:-51px; } .headercontact { margin-left:302px; margin-top:-51px; } .logo { position:fixed; z-index:20; margin-top:30px; } .floater { position:fixed; z-index:10; color:#ffffff; background-color:; width:3000px; height:270px; margin-left:-100px; } #quote { text-align:center; background-color:; margin-right:-5px; margin-top:-400px; color:#ffffff; font-family:Heiti TC; font-size:20px; } #banner { position:fixed; background-color:white; } .companyimage { margin-left:-80px; } #headericons { background-color:; padding-left:430px; margin-top:80px; position:fixed; z-index:10; letter-spacing:100px; } #headertext { background-color:; padding-left:430px; position:fixed; z-index:10; word-spacing:93px; margin-top:130px; font-family:Heiti TC; } #banners { background-color:; padding-left:1000px; margin-top:161px; position:fixed; z-index:10; } #middleicons { padding-left:450px; margin-right:-200px; } #portfolio { padding-left:175px; margin-right:-200px; } ul { list-style:none; } .center { margin-right:-200px; font-family:Heiti TC; padding-right:210px; text-align:center; color:&lt;--#ffffff--&gt;; padding-top:20px; } .contacttext { margin-right:-155px; font-family:Heiti TC; padding-right:210px; text-align:center; color:#ffffff; font-size:15px; line-height:22px; } h3.center { font-size:20px; letter-spacing:1px; line-height:30px; } #middledown { margin-top:550px; position:relative; background-color:white; width:1235px; margin-left:-80px; padding-left:80px; overflow:hidden; } #form { background-color:; margin-right:185px; padding-left:210px; z-index:10; } #footericons { background-color:; margin-right:-200px; padding-left:495px; letter-spacing:30px; z-index:10; } #contactinfo { background-color:; margin-top:-450px; z-index:10; } #contactwhite { background-color:white; padding-left:546px; z-index:10; } #footer { margin-top:-40px; background-color:black; width:px; margin-left:-40px; } a:link {text-decoration:none;} a:visited {text-decoration:none;} a:hover {text-decoration:none;} a:active {text-decoration:none;} a:link {color:#000000;} a:visited {color:#000000;} a:hover {color:#000000;} a:active {color:#000000;} label { font-color:white; color:white; font-family: Heiti TC; } input { width: 120px; height: 30px; padding: 3px 15px 0 10px; float:; background: #f9f9f9; border: 1px solid #dedede; box-shadow: inset 0px 3px 5px 0px rgba(0, 0, 0, 0.1); -moz-box-shadow: inset 0px 3px 5px 0px rgba(0, 0, 0, 0.1); -webkit-box-shadow: inset 0px 3px 5px 0px rgba(0, 0, 0, 0.1); font: 20px Heiti TC; color: #7d7d7d; z-index:10; } input#submit:link {color:#ffffff;} input#submit:visited {color:#ffffff;} input#submit:hover {color:#ffffff;} input#submit:active {color:#ffffff;} input#submit { width: 150px; height: 35px; float:; clear:; cursor: pointer; background: #585858 url(images/btn-bg.png); border: none; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.4); -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.4); -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.4); font-size: 20px; color: #f9f9f9; text-shadow: 0px 1px 6px rgba(0, 0, 0, 0.4); -moz-text-shadow: 0px 1px 6px rgba(0, 0, 0, 0.4); -webkit-text-shadow: 0px 1px 6px rgba(0, 0, 0, 0.4); margin-top:-45px; } #entirefooter { margin-top:50px; } iframe { background-color:; padding-left:345px; } </code></pre> <p>HTML:</p> <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt; &lt;title&gt;Phantom Productions&lt;/title&gt; &lt;link rel="stylesheet" type="text/css" href="phantomproductions.css"/&gt; &lt;script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js'&gt;&lt;/script&gt; &lt;script type='text/javascript'&gt; jQuery(document).ready(function($) { $(".scroll").click(function(event){ event.preventDefault(); $('html,body').animate({scrollTop:$(this.hash).offset().top}, 500); }); }); &lt;/script&gt; &lt;script src="js/jquery-1.7.2.min.js"&gt;&lt;/script&gt; &lt;script src="js/lightbox.js"&gt;&lt;/script&gt; &lt;link href="css/lightbox.css" rel="stylesheet" /&gt; &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="header"&gt; &lt;img class="floater" src="header.png" alt="header"/&gt; &lt;/div&gt; &lt;a href="#header" class="scroll"/&gt; &lt;img class="logo" src="logo.jpg" alt="logo"/&gt; &lt;/a&gt; &lt;div id="headericons"&gt; &lt;ul&gt; &lt;li&gt; &lt;a href="#bug" class="scroll"/&gt; &lt;img src="about_header.jpg" alt="about"/&gt; &lt;/a&gt; &lt;/li&gt; &lt;li class="headerwork"&gt; &lt;a href="#workstophere" class="scroll"/&gt; &lt;img src="work_header.jpg" alt="work"/&gt; &lt;/a&gt; &lt;/li&gt; &lt;li class="headercontact"&gt; &lt;a href="#footer" class="scroll"/&gt; &lt;img src="contact_header.jpg" alt="contact"/&gt; &lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div id="headertext"&gt; &lt;ul&gt; &lt;li&gt; &lt;a href="#bug" class="scroll"/&gt; ABOUT &lt;/a&gt; &lt;a href="#workstophere" class="scroll"/&gt; WORK &lt;/a&gt; &lt;/li&gt; &lt;li class="headertypecontact"&gt; &lt;a href="#footer" class="scroll"/&gt; CONTACT &lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div id="banners"&gt; &lt;ul&gt; &lt;li&gt; &lt;a href="http://facebook.com/"/&gt; &lt;img src="headericons_03.png" alt="logo"/&gt; &lt;/a&gt; &lt;/li&gt; &lt;li class="headertwitter"&gt; &lt;a href="http://twitter.com/"/&gt; &lt;img src="headericons_05.png" alt="logo"/&gt; &lt;/a&gt; &lt;/li&gt; &lt;li class="headervimeo"&gt; &lt;a href="http://vimeo.com/"/&gt; &lt;img src="headericons_07.png" alt="logo"/&gt; &lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;br&gt;&lt;/br&gt; &lt;br&gt;&lt;/br&gt; &lt;br&gt;&lt;/br&gt; &lt;br&gt;&lt;/br&gt; &lt;br&gt;&lt;/br&gt; &lt;br&gt;&lt;/br&gt; &lt;br&gt;&lt;/br&gt; &lt;br&gt;&lt;/br&gt; &lt;br&gt;&lt;/br&gt; &lt;div id="banner"&gt; &lt;img class="companyimage" src="imagewshadow_06.png" alt="company_image"/&gt; &lt;div id="quote"&gt; &lt;h1&gt; PHANTOM PRODUCTIONS &lt;/h1&gt; &lt;br&gt;&lt;/br&gt; &lt;p id="abouticon"&gt; "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore. &lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;br&gt;&lt;/br&gt; &lt;br&gt;&lt;/br&gt; &lt;br&gt;&lt;/br&gt; &lt;div id="bug"&gt; &lt;br&gt;&lt;/br&gt; &lt;br&gt;&lt;/br&gt; &lt;div id="middledown"&gt; &lt;h1 class="center"&gt; WITH OUR FILM MENTALITY, WE &lt;/h1&gt; &lt;br&gt;&lt;/br&gt; &lt;p class="center"&gt; EMBRACE THE IMPOSSIBLE &lt;/p&gt; &lt;br&gt;&lt;/br&gt; &lt;br&gt;&lt;/br&gt; &lt;br&gt;&lt;/br&gt; &lt;ul id="middleicons"&gt; &lt;li&gt; &lt;img src="about_middle.jpg" alt=""/&gt; &lt;/li&gt; &lt;/ul&gt; &lt;br&gt;&lt;/br&gt; &lt;iframe src="http://player.vimeo.com/video/62398574" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen&gt; &lt;/iframe&gt; &lt;div id="workstophere"&gt; &lt;h3 class="center"&gt; "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt &lt;br&gt;&lt;/br&gt; ut labore. et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation &lt;br&gt;&lt;/br&gt; ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute &lt;br&gt;&lt;/br&gt; irure dolor in reprehenderit in voluptate velit esse &lt;br&gt;&lt;/br&gt; cillum dolore eu fugiat nulla pariatur." &lt;/h3&gt; &lt;/div&gt; &lt;br&gt;&lt;/br&gt; &lt;br&gt;&lt;/br&gt; &lt;br&gt;&lt;/br&gt; &lt;br&gt;&lt;/br&gt; &lt;ul id="middleicons"&gt; &lt;li&gt; &lt;img src="work_middle.jpg" alt=""/&gt; &lt;/li&gt; &lt;/ul&gt; &lt;div id="portfolio"&gt; &lt;ul&gt; &lt;li&gt; &lt;a href="only.png" rel="lightbox[movies]" title="Only God Forgives"/&gt; &lt;img src="state_03.png" onmouseover="src='state_18_03.png'"onmouseout="src='state_03.png'"onmousedown="src='state_18_03.png'"&gt; &lt;/a&gt; &lt;a href="killing.png" rel="lightbox[movies]" title="Killing Them Sofly"/&gt; &lt;img class="view view-first" img src="state_05.png" onmouseover="src='state_18_05.png'"onmouseout="src='state_05.png'"onmousedown="src='state_18_05.png'"&gt; &lt;/a&gt; &lt;a href="2013-05-02 08.47.41.png" rel="lightbox[movies]" title="Iron man"/&gt; &lt;img class="view view-first" img src="state_07.png" onmouseover="src='state_18_07.png'"onmouseout="src='state_07.png'"onmousedown="src='state_18_07.png'"&gt; &lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="2013-05-27 20.38.38.png" rel="lightbox[movies]" title="Empire Strikes Back"/&gt; &lt;img class="view view-first" img src="state_12.png" onmouseover="src='state_18_12.png'"onmouseout="src='state_12.png'"onmousedown="src='state_18_12.png'"&gt; &lt;/a&gt; &lt;a href="2013-02-04 00.03.56.jpg" rel="lightbox[movies]" title="Django Unchained"/&gt; &lt;img class="view view-first" img src="state_13.png" onmouseover="src='state_18_13.png'"onmouseout="src='state_13.png'"onmousedown="src='state_18_13.png'"&gt; &lt;/a&gt; &lt;a href="2013-05-15 08.47.59.png" rel="lightbox[movies]" title="The Hunger Games -Catching Fire"/&gt; &lt;img class="view view-first" img src="state_14.png" onmouseover="src='state_18_14.png'"onmouseout="src='state_14.png'"onmousedown="src='state_18_14.png'"&gt; &lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;br&gt;&lt;/br&gt; &lt;br&gt;&lt;/br&gt; &lt;div id="entirefooter"&gt; &lt;div id="contactwhite"&gt; &lt;img src="footercontactcut_03.png" alt="footercontact"/&gt; &lt;/div&gt; &lt;div id="footer"&gt; &lt;img src="footerworks_02.png" alt="footer"/&gt; &lt;/div&gt; &lt;div id="contactinfo"&gt; &lt;p class="contacttext"&gt; Tel:2398 9850&lt;br&gt;&lt;/br&gt; Fax:1960 3410&lt;br&gt;&lt;/br&gt; e-mail: phantom@hotmail.com&lt;br&gt;&lt;/br&gt; 135-235 1/F, Gloucester Road Wan Chai, Hong Kong &lt;/p&gt; &lt;br&gt;&lt;/br&gt; &lt;p class="contacttext"&gt; SUBSCRIBE TO OUR NEWSLETTER! &lt;/p&gt; &lt;br&gt;&lt;/br&gt; &lt;br&gt;&lt;/br&gt; &lt;br&gt;&lt;/br&gt; &lt;br&gt;&lt;/br&gt; &lt;div id="form"&gt; &lt;form action="#" method="post"&gt; &lt;fieldset&gt; &lt;label for="name"&gt;Name:&lt;/label&gt; &lt;input type="text" name="name" id="name" /&gt; &lt;label for="email"&gt;Last Name:&lt;/label&gt; &lt;input type="text" name="name" id="lastname" /&gt; &lt;label for="email"&gt;Email:&lt;/label&gt; &lt;input type="email" name="email" id="email" /&gt; &lt;input type="submit" value="Submit" id="submit" /&gt; &lt;/fieldset&gt; &lt;/form&gt; &lt;/div&gt; &lt;br&gt;&lt;/br&gt; &lt;br&gt;&lt;/br&gt; &lt;br&gt;&lt;/br&gt; &lt;br&gt;&lt;/br&gt; &lt;br&gt;&lt;/br&gt; &lt;div id="footericons"&gt; &lt;ul&gt; &lt;li&gt; &lt;a href="http://facebook.com/"/&gt; &lt;img src="footerIconswshadow1.png" alt="facebook"/&gt; &lt;/a&gt; &lt;a href="http://twitter.com/"/&gt; &lt;img src="footerIconswshadow3.png" alt="twitter"/&gt; &lt;/a&gt; &lt;a href="http://vimeo.com/"/&gt; &lt;img src="footerIconswshadow2.png" alt="vimeo"/&gt; &lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;br&gt;&lt;/br&gt; &lt;p class="contacttext"&gt; Copyright © PHANTOM PRODUCTIONS - 2013 &lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>UPDATE HTML</p> <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt; &lt;title&gt;Phantom Productions&lt;/title&gt; &lt;link rel="stylesheet" type="text/css" href="phantomproductions.css"/&gt; &lt;script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js'&gt;&lt;/script&gt; &lt;script type='text/javascript'&gt; jQuery(document).ready(function($) { $(".scroll").click(function(event){ event.preventDefault(); $('html,body').animate({scrollTop:$(this.hash).offset().top}, 500); }); }); &lt;/script&gt; &lt;script src="js/jquery-1.7.2.min.js"&gt;&lt;/script&gt; &lt;script src="js/lightbox.js"&gt;&lt;/script&gt; &lt;link href="css/lightbox.css" rel="stylesheet" /&gt; &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="connectedbody"&gt; &lt;div id="header"&gt; &lt;img class="floater" src="header.png" alt="header"/&gt; &lt;/div&gt; &lt;a href="#header" class="scroll"/&gt; &lt;img class="logo" src="logo.jpg" alt="logo"/&gt; &lt;/a&gt; &lt;div id="headericons"&gt; &lt;ul&gt; &lt;li&gt; &lt;a href="#bug" class="scroll"/&gt; &lt;img src="about_header.jpg" alt="about"/&gt; &lt;/a&gt; &lt;/li&gt; &lt;li class="headerwork"&gt; &lt;a href="#workstophere" class="scroll"/&gt; &lt;img src="work_header.jpg" alt="work"/&gt; &lt;/a&gt; &lt;/li&gt; &lt;li class="headercontact"&gt; &lt;a href="#footer" class="scroll"/&gt; &lt;img src="contact_header.jpg" alt="contact"/&gt; &lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div id="headertext"&gt; &lt;ul&gt; &lt;li&gt; &lt;a href="#bug" class="scroll"/&gt; ABOUT &lt;/a&gt; &lt;a href="#workstophere" class="scroll"/&gt; WORK &lt;/a&gt; &lt;/li&gt; &lt;li class="headertypecontact"&gt; &lt;a href="#footer" class="scroll"/&gt; CONTACT &lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div id="banners"&gt; &lt;ul&gt; &lt;li&gt; &lt;a href="http://facebook.com/"/&gt; &lt;img src="headericons_03.png" alt="logo"/&gt; &lt;/a&gt; &lt;/li&gt; &lt;li class="headertwitter"&gt; &lt;a href="http://twitter.com/"/&gt; &lt;img src="headericons_05.png" alt="logo"/&gt; &lt;/a&gt; &lt;/li&gt; &lt;li class="headervimeo"&gt; &lt;a href="http://vimeo.com/"/&gt; &lt;img src="headericons_07.png" alt="logo"/&gt; &lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;br&gt;&lt;/br&gt; &lt;br&gt;&lt;/br&gt; &lt;br&gt;&lt;/br&gt; &lt;br&gt;&lt;/br&gt; &lt;br&gt;&lt;/br&gt; &lt;br&gt;&lt;/br&gt; &lt;br&gt;&lt;/br&gt; &lt;br&gt;&lt;/br&gt; &lt;br&gt;&lt;/br&gt; &lt;div id="banner"&gt; &lt;img class="companyimage" src="imagewshadow_06.png" alt="company_image"/&gt; &lt;div id="quote"&gt; &lt;h1&gt; PHANTOM PRODUCTIONS &lt;/h1&gt; &lt;br&gt;&lt;/br&gt; &lt;p id="abouticon"&gt; "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore. &lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;br&gt;&lt;/br&gt; &lt;br&gt;&lt;/br&gt; &lt;br&gt;&lt;/br&gt; &lt;div id="bug"&gt; &lt;br&gt;&lt;/br&gt; &lt;br&gt;&lt;/br&gt; &lt;div id="middledown"&gt; &lt;h1 class="center"&gt; WITH OUR FILM MENTALITY, WE &lt;/h1&gt; &lt;br&gt;&lt;/br&gt; &lt;p class="center"&gt; EMBRACE THE IMPOSSIBLE &lt;/p&gt; &lt;br&gt;&lt;/br&gt; &lt;br&gt;&lt;/br&gt; &lt;br&gt;&lt;/br&gt; &lt;ul id="middleicons"&gt; &lt;li&gt; &lt;img src="about_middle.jpg" alt=""/&gt; &lt;/li&gt; &lt;/ul&gt; &lt;br&gt;&lt;/br&gt; &lt;iframe src="http://player.vimeo.com/video/62398574" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen&gt; &lt;/iframe&gt; &lt;div id="workstophere"&gt; &lt;h3 class="center"&gt; "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt &lt;br&gt;&lt;/br&gt; ut labore. et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation &lt;br&gt;&lt;/br&gt; ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute &lt;br&gt;&lt;/br&gt; irure dolor in reprehenderit in voluptate velit esse &lt;br&gt;&lt;/br&gt; cillum dolore eu fugiat nulla pariatur." &lt;/h3&gt; &lt;/div&gt; &lt;br&gt;&lt;/br&gt; &lt;br&gt;&lt;/br&gt; &lt;br&gt;&lt;/br&gt; &lt;br&gt;&lt;/br&gt; &lt;ul id="middleicons"&gt; &lt;li&gt; &lt;img src="work_middle.jpg" alt=""/&gt; &lt;/li&gt; &lt;/ul&gt; &lt;div id="portfolio"&gt; &lt;ul&gt; &lt;li&gt; &lt;a href="only.png" rel="lightbox[movies]" title="Only God Forgives"/&gt; &lt;img src="state_03.png" onmouseover="src='state_18_03.png'"onmouseout="src='state_03.png'"onmousedown="src='state_18_03.png'"&gt; &lt;/a&gt; &lt;a href="killing.png" rel="lightbox[movies]" title="Killing Them Sofly"/&gt; &lt;img class="view view-first" img src="state_05.png" onmouseover="src='state_18_05.png'"onmouseout="src='state_05.png'"onmousedown="src='state_18_05.png'"&gt; &lt;/a&gt; &lt;a href="2013-05-02 08.47.41.png" rel="lightbox[movies]" title="Iron man"/&gt; &lt;img class="view view-first" img src="state_07.png" onmouseover="src='state_18_07.png'"onmouseout="src='state_07.png'"onmousedown="src='state_18_07.png'"&gt; &lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="2013-05-27 20.38.38.png" rel="lightbox[movies]" title="Empire Strikes Back"/&gt; &lt;img class="view view-first" img src="state_12.png" onmouseover="src='state_18_12.png'"onmouseout="src='state_12.png'"onmousedown="src='state_18_12.png'"&gt; &lt;/a&gt; &lt;a href="2013-02-04 00.03.56.jpg" rel="lightbox[movies]" title="Django Unchained"/&gt; &lt;img class="view view-first" img src="state_13.png" onmouseover="src='state_18_13.png'"onmouseout="src='state_13.png'"onmousedown="src='state_18_13.png'"&gt; &lt;/a&gt; &lt;a href="2013-05-15 08.47.59.png" rel="lightbox[movies]" title="The Hunger Games -Catching Fire"/&gt; &lt;img class="view view-first" img src="state_14.png" onmouseover="src='state_18_14.png'"onmouseout="src='state_14.png'"onmousedown="src='state_18_14.png'"&gt; &lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;br&gt;&lt;/br&gt; &lt;br&gt;&lt;/br&gt; &lt;div id="entirefooter"&gt; &lt;div id="contactwhite"&gt; &lt;img src="footercontactcut_03.png" alt="footercontact"/&gt; &lt;/div&gt; &lt;div id="footer"&gt; &lt;img src="footerworks_02.png" alt="footer"/&gt; &lt;/div&gt; &lt;div id="contactinfo"&gt; &lt;p class="contacttext"&gt; Tel:2398 9850&lt;br&gt;&lt;/br&gt; Fax:1960 3410&lt;br&gt;&lt;/br&gt; e-mail: phantom@hotmail.com&lt;br&gt;&lt;/br&gt; 135-235 1/F, Gloucester Road Wan Chai, Hong Kong &lt;/p&gt; &lt;br&gt;&lt;/br&gt; &lt;p class="contacttext"&gt; SUBSCRIBE TO OUR NEWSLETTER! &lt;/p&gt; &lt;br&gt;&lt;/br&gt; &lt;br&gt;&lt;/br&gt; &lt;br&gt;&lt;/br&gt; &lt;br&gt;&lt;/br&gt; &lt;div id="form"&gt; &lt;form action="#" method="post"&gt; &lt;fieldset&gt; &lt;label for="name"&gt;Name:&lt;/label&gt; &lt;input type="text" name="name" id="name" /&gt; &lt;label for="email"&gt;Last Name:&lt;/label&gt; &lt;input type="text" name="name" id="lastname" /&gt; &lt;label for="email"&gt;Email:&lt;/label&gt; &lt;input type="email" name="email" id="email" /&gt; &lt;input type="submit" value="Submit" id="submit" /&gt; &lt;/fieldset&gt; &lt;/form&gt; &lt;/div&gt; &lt;br&gt;&lt;/br&gt; &lt;br&gt;&lt;/br&gt; &lt;br&gt;&lt;/br&gt; &lt;br&gt;&lt;/br&gt; &lt;br&gt;&lt;/br&gt; &lt;div id="footericons"&gt; &lt;ul&gt; &lt;li&gt; &lt;a href="http://facebook.com/"/&gt; &lt;img src="footerIconswshadow1.png" alt="facebook"/&gt; &lt;/a&gt; &lt;a href="http://twitter.com/"/&gt; &lt;img src="footerIconswshadow3.png" alt="twitter"/&gt; &lt;/a&gt; &lt;a href="http://vimeo.com/"/&gt; &lt;img src="footerIconswshadow2.png" alt="vimeo"/&gt; &lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;br&gt;&lt;/br&gt; &lt;p class="contacttext"&gt; Copyright © PHANTOM PRODUCTIONS - 2013 &lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>UPDATE CSS</p> <pre><code>body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, input, textarea, fieldset, blockquote { margin: 0; padding: 0; border: 0; } body { width:100%; height:100%; padding-left:30px; background-color:white; } #connectedbody { width:900px; } .headertwitter { margin-left:40px; margin-top:-58px; } .headervimeo { margin-left:80px; margin-top:-59px; } .headertypecontact { margin-top:-16px; margin-left:290px; } #header { } .headerwork { margin-left:147px; margin-top:-51px; } .headercontact { margin-left:302px; margin-top:-51px; } .logo { position:fixed; z-index:20; margin-top:30px; } .floater { position:fixed; z-index:10; color:#ffffff; background-color:; width:3000px; height:270px; margin-left:-100px; } #quote { text-align:center; background-color:; margin-right:-5px; margin-top:-400px; color:#ffffff; font-family:Heiti TC; font-size:20px; } #banner { position:fixed; background-color:white; } .companyimage { margin-left:-80px; } #headericons { background-color:; padding-left:430px; margin-top:80px; position:fixed; z-index:10; letter-spacing:100px; } #headertext { background-color:; padding-left:430px; position:fixed; z-index:10; word-spacing:93px; margin-top:130px; font-family:Heiti TC; } #banners { background-color:; padding-left:1000px; margin-top:161px; position:fixed; z-index:10; } #middleicons { padding-left:450px; margin-right:-200px; } #portfolio { padding-left:175px; margin-right:-200px; } ul { list-style:none; } .center { margin-right:-200px; font-family:Heiti TC; padding-right:210px; text-align:center; color:&lt;--#ffffff--&gt;; padding-top:20px; } .contacttext { margin-right:-155px; font-family:Heiti TC; padding-right:210px; text-align:center; color:#ffffff; font-size:15px; line-height:22px; } h3.center { font-size:20px; letter-spacing:1px; line-height:30px; } #middledown { margin-top:550px; position:relative; background-color:white; width:1235px; margin-left:-80px; padding-left:80px; overflow:hidden; } #form { background-color:; margin-right:185px; padding-left:210px; z-index:10; } #footericons { background-color:; margin-right:-200px; padding-left:495px; letter-spacing:30px; z-index:10; } #contactinfo { background-color:; margin-top:-450px; z-index:10; } #contactwhite { background-color:white; padding-left:546px; z-index:10; } #footer { margin-top:-40px; background-color:black; width:px; margin-left:-40px; } a:link {text-decoration:none;} a:visited {text-decoration:none;} a:hover {text-decoration:none;} a:active {text-decoration:none;} a:link {color:#000000;} a:visited {color:#000000;} a:hover {color:#000000;} a:active {color:#000000;} label { font-color:white; color:white; font-family: Heiti TC; } input { width: 120px; height: 30px; padding: 3px 15px 0 10px; float:; background: #f9f9f9; border: 1px solid #dedede; box-shadow: inset 0px 3px 5px 0px rgba(0, 0, 0, 0.1); -moz-box-shadow: inset 0px 3px 5px 0px rgba(0, 0, 0, 0.1); -webkit-box-shadow: inset 0px 3px 5px 0px rgba(0, 0, 0, 0.1); font: 20px Heiti TC; color: #7d7d7d; z-index:10; } input#submit:link {color:#ffffff;} input#submit:visited {color:#ffffff;} input#submit:hover {color:#ffffff;} input#submit:active {color:#ffffff;} input#submit { width: 150px; height: 35px; float:; clear:; cursor: pointer; background: #585858 url(images/btn-bg.png); border: none; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.4); -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.4); -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.4); font-size: 20px; color: #f9f9f9; text-shadow: 0px 1px 6px rgba(0, 0, 0, 0.4); -moz-text-shadow: 0px 1px 6px rgba(0, 0, 0, 0.4); -webkit-text-shadow: 0px 1px 6px rgba(0, 0, 0, 0.4); margin-top:-45px; } #entirefooter { margin-top:50px; } iframe { background-color:; padding-left:345px; } </code></pre> <p>Below is the problem that occurs when i open it on a imac:</p> <p><img src="https://i.stack.imgur.com/UUB7q.png" alt="Imac"></p> <p>And this is how it looks on my laptop: <img src="https://i.stack.imgur.com/AZ7Kp.png" alt="macbook"></p> <p>This content is within a div, but when i set a background color for the div and order it to cover the screen it doesn't,<img src="https://i.stack.imgur.com/ePeBi.png" alt="how to i make it fit the full screen?"></p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USjohn3161
    1. USjohn3161
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POScreen Size Optimization For Safari
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload