Databases
StackOverflow2013
Postsdbo
POAbsolute positioning makes trouble with IE/Chrome
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAbsolute positioning makes trouble with IE/Chrome
    primarykey
    data
    text
    <p>I have a gallery on my website. One way to switch the photo that's shown is to press the little images on the bottom of the gallery (as shown in the below photos). To position the little images I used absolute positioning and margins, as needed to make them straight. The problem is, that when I use absolute positioning in chrome, the image's default position starts from the middle (so to position the first image (1), I assigned it with 'margin-right:-395px;'. In IE, the image's dafault positiong start from where it really should be: So the '-395px' make the image go further to the right, and the images are shown badly.</p> <p>The same thing happens with the button that in chrome is on the right-top corner.</p> <p><a href="http://www.pardesmm.com/galleries/1-%20%D7%97%D7%95%D7%95%D7%99%D7%94%20%D7%9E%D7%A9%D7%A4%D7%97%D7%AA%D7%99%D7%AA/Album1.html" rel="nofollow noreferrer">This is my website</a>, if you check it with those 2 different browsers (I haven't checked others yet), you can see the problem. Images are added below as well.</p> <p><strong><em>Chrome:</em></strong> <img src="https://i.stack.imgur.com/PmM22.jpg" alt="Chrome"></p> <p><strong><em>Explorer:</em></strong> <img src="https://i.stack.imgur.com/CQ0L7.jpg" alt="Internet Explorer"></p> <p>CSS for first little image: (second image: add 100 to margin-right, third image: add 200)</p> <pre><code>height:90px; width:90px; margin-top:5px; position:absolute; opacity:0.6; filter:alpha(opacity=60); border-radius:5px; cursor:pointer; margin-right:-395px; </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USOriShuss
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COCan't check in IE right now, but what happens when you remove absolute positioning from `.pic_scroller_2`?
      singulars
      1. POAbsolute positioning makes trouble with IE/Chrome
      1. USJoris Lindhout
    2. COIt stays just the same. I changed the code on the website, you can look at it.
      singulars
      1. POAbsolute positioning makes trouble with IE/Chrome
      1. USOriShuss
    3. COI had a similar issue - albeit in a much simpler situation - which I managed to fix with removing absolute positioning from and adding `text-align: center` to the parent. I ran a little test and it seems it doesn't affect any other positioning in Chrome, so perhaps this could work in tricking IE to change it's starting position.
      singulars
      1. POAbsolute positioning makes trouble with IE/Chrome
      1. USJoris Lindhout
 

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