Solved

Inconsistent popup positioning in IE

Posted on 2014-04-12
12
446 Views
Last Modified: 2014-04-17
Recently an Expert assisted me in styling the position of a calendar popup, such that it appears centered over the icon which launched it.   This is working under Chrome, Firefox and Safari, but in IE 8, 10 & 11 the popup is too high.   Curiously, the popup is perfectly positioned if the page is launched from a local file, but not on the server.

Could you verify this observation and advise how to adjust that?  Please visit www.mauitradewinds.com/RezEasy/availability.html and click on a calendar icon.

 Here is the styling code (which is included in style/calendar1.css, and a screen shot of the displaced popup is attached.  

.calendar table {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -115px 0 0 -100px;
  border-top: 1px solid #000;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  border-left: 1px solid #000;
  font-size: 11px;
  color: #000;
  cursor: default;
  background: #c8d4d0;
  font-family: tahoma,verdana,sans-serif;
}

Misplaced popup
0
Comment
Question by:ddantes
  • 5
  • 2
  • 2
  • +1
12 Comments
 
LVL 82

Expert Comment

by:Dave Baldwin
Comment Utility
Your first problem is that the av0001.html page is an HTML5 page and IE8 doesn't understand HTML5.  Firefox says you have a few CSS and javascript errors too.  I don't know how important they are.
0
 

Author Comment

by:ddantes
Comment Utility
Thank you, Dave.  I'm not so concerned about IE8.  Can you test that popup with IE 10 or IE11 and let me know if it appears over the calendar icon on your machine?
0
 
LVL 82

Expert Comment

by:Dave Baldwin
Comment Utility
No, someone else will have to do that.  I don't have them.
0
 

Author Comment

by:ddantes
Comment Utility
Someone did test it in IE11, and the popup was centered over the left calendar icon (which is the icon they clicked), as intended.  This is also what I see if I open a copy of the page on my local drive.

So, why am I seeing a different popup position on the internet than what I see on my local drive, and what others see on the internet?   It seems that an excessively-negative top margin is being applied to my view (image in original question).

Someone else's view the popup
0
 
LVL 78

Expert Comment

by:David Johnson, CD, MVP
Comment Utility
I don't get any popups just get a full screen calendar.. you can't unselect a beginning date
0
Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

 

Author Comment

by:ddantes
Comment Utility
Thank you for participating.  When you visit the page, please look at the lower form.  There are calendar icons for arrival and departure dates.  When an icon is clicked, there should be a calendar popup centered over that icon.  Under IE 8, 9, 10 and 11, the popup appears high on the page in my browser, instead of centered over the icon.  But if I open the same page from my local drive, instead of a server, the popup appears where it belongs.  Other browsers render the popup over the icon, as well.  I'd like to know what you observe.
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 500 total points
Comment Utility
I see the same image
as you

in my IE10

I think when you load it from your server, it is possibly you are in compatibility mode- Hit F12 and look
0
 

Author Comment

by:ddantes
Comment Utility
Thank you.  I couldn't tell by hitting F12.  But when I un-ticked "Display Intranet Sites in Compatibility View" the issue resolved, and the popup appears in the correct placement.   Could you clarify what happened?
0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
Hitting F12 opens the console and at the top it would say
IE10 compatibility mode instead of Standards mode

Compatibility mode is only needed for older websites that have special IE8 or lower coding, which interferes with especially the box model e.g. placements
0
 

Author Comment

by:ddantes
Comment Utility
My console in IE11 doesn't say either compatibility mode or Standards mode.  However, un-ticking the option to display intranet sites in compatibility view resolved this mystery.  Thanks!
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

744 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now