[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now

x
?
Solved

Inconsistent popup positioning in IE

Posted on 2014-04-12
12
Medium Priority
?
577 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 2
  • 2
  • +1
12 Comments
 
LVL 84

Expert Comment

by:Dave Baldwin
ID: 39996884
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
ID: 39996897
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 84

Expert Comment

by:Dave Baldwin
ID: 39996947
No, someone else will have to do that.  I don't have them.
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:ddantes
ID: 39997853
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 83

Expert Comment

by:David Johnson, CD, MVP
ID: 40006038
I don't get any popups just get a full screen calendar.. you can't unselect a beginning date
0
 

Author Comment

by:ddantes
ID: 40006070
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 2000 total points
ID: 40006146
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
ID: 40007075
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
ID: 40007118
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
ID: 40007209
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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

650 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