Geek Answers Handbook

IE8 does not accept an absolutely positioned element from a stream

so I came across an error that I cannot understand in IE8. I saw some drugs, but that might take a cake.

I tried to replicate it in Codepen, but we have a lot of code for this, so I will try to enable computed styles from IE8.

Using Foundation 5, I have a top bar that looks like this:

Before

After

The drop-down menu is positioned absolutely, therefore, obviously, you should not stretch the parent container. In fact, this does not stretch the parent, but grandfather and grandmother. Here's the markup:

<nav id="global-nav" class="top-bar has-dropdown show-for-large-up" data-topbar > <section class="top-bar-section"> <ul class="title-area"> <li class="name"> <a href="">Title</a> </li> </ul> </section> <section class="links top-bar-section"> <ul class="left"> <li class="divider"></li> <li><a href="">Create</a> </li> <li class="divider"></li> <li class="has-dropdown"> <a>Explore</a> <ul class="dropdown tab-left" id="explore-menu"> <li><a href="#">Link 1</a> </li> <li><a href="#">Link 2</a> </li> <li><a href="#">Link 3</a> </li> </ul> </li> <li class="divider"></li> <li><a href="#">Find</a> </li> </ul> </section> <section class="top-bar-section"> <ul class="right"> <li class="has-form search"> <form id="header_search" name="search_form"> <input type="search" placeholder="Search" class="search" results=3 id="search_term" name="search_value" maxlength="200" /> <button id="search_submit"></button> </form> </li> <li class="login"> <a href="javascript:;" id="launch-login">Login</a> </li> </ul> </section>

Computed CSS from IE8:

 #global-nav{ //this is the topbar that is stretching background: #2a2d43; background-image: none; color: #666; display: block !important; font: inherit; font-family: sans-serif; font-size: 16px; height: 80px; line-height: 60px; margin: 0px; overflow: visible; padding: 0; position: relative; vertical-align: baseline; width: 100%; } li.has-dropdown .dropdown{ background: #fff; box-sizing: border-box; clip: rect(1px 1px 1px 1px); z-index: 99; color: #666; display: block; font: inherit; font-family: sans-serif; font-size: 16px; height: auto !important; left: 10%; line-height: 60px; margin: 0; max-height: none; max-width: 200px; overflow: hidden; padding: 0px; position: absolute !important; right: auto; top: 64px; vertical-align: baseline; visibility: hidden; width: auto; } li.has-dropdown.hover .dropdown{ //the open dropdown state clip: rect(auto auto auto auto); visibility: visible; }

If you need more information, let me know. Thanks in advance.

For reference, I am testing on Parallels VM Win7 with IE8 using IE8 document mode and IE8 standards.

+8
css internet-explorer-8 zurb-foundation overflow position
source share
5 answers

Do you have a link? I'm wondering maybe you should set ul to relative. I think li returns to the first relatively positioned element. Hope this helps.

0
source share

If any of the parent elements of an absolute element has a position: relative, then the absolute is calculated relative to this,

try deleting the position: relative from parent containers, maybe this will help

also make sure you have the right one

 <!DOCTYPE html>

at the beginning of your file

0
source share

This is not an IE8 rendering error, but a coding error / incompatibility. This demo code shows that IE8 makes absolutely outlier items out of the stream:

 <!DOCTYPE html> <head> <title>Demo IE8 Drop-Down Menu</title> <meta charset="utf-8"> <style> #navDivParent { /* = grandparent of the dropdown menu */ background-color: darkblue; text-align: right; color: white; height: 100px; width: 550px; } #navDiv ul { list-style-type: none; margin: 0; padding: 0; text-align: left; } #navDiv ul li { float: left; position: relative; margin-right: 10px; } #navDiv ul li ul li { clear: left; } #navDiv ul ul { display: none; } #navDiv ul li:hover ul { display: block; position: absolute; } #navDiv a { display: block; padding: 0 10px 0 10px; background: yellow; color: blue; text-decoration: none; } #navDiv #item2SubList a { width: 175px; } #navDiv a:hover { background: red; color: white; } </style> </head> <body> <div id="navDivParent">This is the grandparent<br> of the dropdown menu. <div id="navDiv"> <ul> <li><a href="#">Menu item</a></li> <li><a href="#">Menu item w/ child</a> <ul id="item2SubList"> <li><a href="#">Menu sub-item</a></li> <li><a href="#">Menu sub-item</a></li> <li><a href="#">Menu sub-item</a></li> </ul> </li> <li><a href="#">Menu item</a></li> </ul> </div> </div> </body> </html>

.
I did not make a live demo because JSFiddle, JSBin and the like do not work in IE8, but I tested it both in real IE8 and in IE9 in IE8 mode.

Since the code in this question does not contain a CSS :hover state declaration, the encoding error / incompatibility may be in Javascript, which will control the state of the hang.

0
source share

The drop-down menu has a maximum width of 200 pixels. IE8 can't handle maximum width. In essence, it is considered as a declaration of width. You force a width of 200 pixels in IE8. You will need to set it equal ...

 max-width:none\9; /* IE8 */
0
source share

I do not think this “error” has anything to do with the position: absolute; not taking .dropdown from the stream. Li.has-dropdown also has a .hover state applied to it. Probably some other style applies to lib.has-dropdown, which causes the C # global-nav port to be transferred. Perhaps some additional add-on is applied to lib.has-dropdown. Unfortunately, we do not have all the code to properly debug this.

0
source share

More articles:


All Articles