Databases
StackOverflow2013
Postsdbo
PONegative margin causes content to move during zoom
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PONegative margin causes content to move during zoom
    primarykey
    data
    text
    <p>I can not for the life of me find why the information in my <code>content2</code> <code>div</code> keeps moving on zoom in, I imagine it is due to using negative margin. Is there any way around this? Any ideas or fixes?</p> <p><strong>HTML</strong></p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;link href="index.css" rel="stylesheet" type="text/css" /&gt; &lt;title&gt;Programs R Us&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="body"&gt; &lt;div id="wrap"&gt; &lt;!--header starts--&gt; &lt;div id="header"&gt; &lt;div id="name"&gt; &lt;h1&gt;Programs &lt;span&gt;R&lt;/span&gt; Us&lt;/h1&gt; &lt;/div&gt;&lt;!--end name--&gt; &lt;div id="nav"&gt;&lt;br&gt; &lt;ol&gt; &lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="about.html"&gt;About Us&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="contact.html"&gt;Contact Us&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="programs.html"&gt;Our Programs&lt;/a&gt;&lt;/li&gt; &lt;/ol&gt; &lt;/div&gt;&lt;!--end nav--&gt; &lt;/div&gt;&lt;!--end header--&gt; &lt;!--header ends--&gt; &lt;!--content1 starts--&gt; &lt;div id="content1"&gt; &lt;img src="images/placeholder.png" width="400" height="323" alt="logo"&gt; &lt;div id="imgright"&gt; &lt;h2&gt;What We Do&lt;/h2&gt; &lt;p&gt;paragraph&lt;/p&gt; &lt;div id="button"&gt;&lt;a href=#&gt; &lt;h4&gt;Request A Program&lt;/h4&gt;&lt;/a&gt; &lt;/div&gt;&lt;!--end button--&gt; &lt;/div&gt;&lt;!--end imgright--&gt; &lt;/div&gt;&lt;!--end content1--&gt; &lt;!--content1 ends--&gt; &lt;!--content2 starts--&gt; &lt;div id="content2"&gt; &lt;div id="one"&gt; &lt;img src="images/arrow.png" width="70px" height="50px;" alt="arrow1"&gt; &lt;h3&gt;Contact Us&lt;/h3&gt; &lt;p&gt;"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam"&lt;/p&gt; &lt;/div&gt;&lt;!--end one--&gt; &lt;div id="two"&gt; &lt;img src="images/arrow.png" width="70px" height="50px;" alt="arrow1"&gt; &lt;h3&gt;About Us&lt;/h3&gt; &lt;p&gt;"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam"&lt;/p&gt; &lt;/div&gt;&lt;!--end two--&gt; &lt;div id="three"&gt; &lt;img src="images/arrow.png" width="70px" height="50px;" alt="arrow1"&gt; &lt;h3&gt;View Our Programs&lt;/h3&gt; &lt;p&gt;"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam"&lt;/p&gt; &lt;/div&gt;&lt;!--end three--&gt; &lt;/div&gt;&lt;!--end content2--&gt; &lt;!--content2 ends--&gt; &lt;!--footer starts--&gt; &lt;div id="footer"&gt; &lt;h5&gt;Insert some footer information, copyright information also&lt;/h5&gt; &lt;/div&gt;&lt;!--end footer--&gt; &lt;!--footer ends--&gt; &lt;/div&gt;&lt;!--end wrap--&gt; &lt;/div&gt;&lt;!--end body--&gt; &lt;div id="blue"&gt; &lt;/div&gt;&lt;!--end blue--&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p><strong>CSS</strong></p> <pre><code>@charset "utf-8"; /* CSS Document */ html, body{ margin:0; padding:0; } body{ background-image:url(images/background.jpg); overflow: auto; } #body{ margin-top:-25px; margin-bottom:25px; padding:0; } #wrap{ width:1124px; height:100%; margin:0 auto; padding-top:5px; } #header h1{ font-size:36px; font-family: Terminal, Verdana, Geneva, sans-serif; color: white; } #header span{ font-size:100px; color:black; font-family:"brush script std", Verdana, Geneva, sans-serif; } #nav{ margin-top:-90px; margin-bottom:75px; margin-right:40px; background-color:#2e3192; float:right; margin-left:-300px; border-radius:10px; -moz-border-radius:10px; } #nav ol { margin: 0; padding: 0; list-style: none; line-height: normal; background-color:#2e3192; margin-top:-10px; } #nav li { display: inline; } #nav a { display: block; float: left; margin-right: 3px; padding: 10px 20px; text-decoration: none; font: 24px "Trebuchet MS", Arial, Helvetica, sans-serif; color: white; padding-top:0px; padding-bottom:10px; } #nav a:hover { text-decoration: none; color: black; } #content1 img{ margin-left:25px; } #imgright{ margin-left:445px; margin-top:-389px; } #button h4{ font-family:"Times New Roman", Times, serif; font-size:24px; color:white; padding-left:10px; } #button{ margin-left:-400px; margin-top:-50px; margin-bottom:110px; border-radius:10px; -moz-border-radius:10px; background-color:#ff0000; width:220px; } #button a{ text-decoration:none; } #button a:hover{ text-decoration:underline; color:white; } h2{ font-family:"Times New Roman", Times, serif; font-size:48px; } #imgright p{ color: white; font-size:24px; font-family: "Times New Roman", Times, serif; margin-top:-30px; margin-left:20px; } #content2{ background-color:#2e3192; overflow-x:visible; width:100%; height:100%; } #one, #two, #three{width:341.3px;} #one img, #two img, #three img{padding-right:10px;} #one h3, #two h3, #three h3{ border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:white; padding-bottom:2px; border-left-width:3px; border-left-style:solid; border-left-color:white; padding-left:6px; padding-top:4px; } #one h3{ font-family:trajan pro, Verdana, Geneva, sans-serif; color:white; margin-left:80px; margin-top:-40px; } #one p{ font-family:vijaya, Verdana, Geneva, sans-serif; color:white; } #two h3{ font-family:trajan pro, Verdana, Geneva, sans-serif; color:white; margin-left:80px; margin-top:-46px; } #two p{ font-family:vijaya, Verdana, Geneva, sans-serif; color:white; } #three h3{ font-family:trajan pro, Verdana, Geneva, sans-serif; color:white; margin-left:80px; margin-top:-46px; } #three p{ font-family:vijaya, Verdana, Geneva, sans-serif; color:white; } #one{ margin-top:50px; } #two{ margin-top:-270px; margin-left:360px; } #three{ margin-top:-140px; margin-left:720px; margin-bottom:0px; } #footer { clear: both; position: relative; z-index: 10; height: 3em; margin-top: 10px; } #footer h5{ margin-left:300px; } #blue{ position:absolute; top:619px; z-index:-1; background-color:#2e3192; height:100%; width:100%; } </code></pre> <p><strong>Image of the problem</strong> <img src="https://i.stack.imgur.com/4a4iI.jpg" alt="margins moving"></p> <p><strong>Image of the problem</strong> <img src="https://i.stack.imgur.com/Lx5Am.jpg" alt="jsfiddle, i think"></p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USJSuar
    1. USYou Me
    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. PONegative margin causes content to move during zoom
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PONegative margin causes content to move during zoom
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. PONegative margin causes content to move during zoom
      1. This table or related slice is empty.
      1. VTUpMod
    1. COWhere's your `<html>` tag? That can cause problems like that.
      singulars
      1. PONegative margin causes content to move during zoom
      1. USJared Farrish
    2. COWow i cant believe i missed that, however that wasnt the problem.
      singulars
      1. PONegative margin causes content to move during zoom
      1. USYou Me
    3. COI'm not seeing a http://jsfiddle.net or link to the page that's showing the problem. You're right, it is often margins or padding, but staring at the markup is sorta pointless.
      singulars
      1. PONegative margin causes content to move during zoom
      1. USJared Farrish
 

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