CODEWITHSUNDEEP
htmlcssinternet-explorer-7
Chris
Chris

Reputation: 1883

Absolutely positioned elements not visible in ie7

Can anyone tell me why the absolutely positioned navigation buttons in the top right corner of this page are not visible in ie7, but are working fine in all other browsers (including ie8 and 9)

Thanks!

Upvotes: 0

Views: 632

Answers (2)

Pebbl
Pebbl

Reputation: 36015

For one you are using display:inline-block which isn't properly supported by IE7 or below (sometimes it works, others not -- depends on the element and the situation).

Use display:block and float:left instead as this is more supported (however if you see my first link you can using display:inline too).

Don't forget to include overflow:hidden in the surrounding UL element either otherwise you'll get strange results due to the float.

css:

#navlist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
  overflow: hidden;
}

#navlist li {
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
  float: left;
  /* your styles from before */
  background-color: #F2F2F2;
  border-radius: 5px 5px 5px 5px;
  color: black;
  height: 20px;
  padding-top: 2px;
  text-align: center;
  width: 20px;
}

markup:

<ul id="navlist">
  <li id="li1">
    <a id="link1" href="#">1</a>
  </li>
  <li id="li2">
    <a id="link2" href="#">2</a>
  </li>
  <li id="li3">
    <a id="link3" href="#">3</a>
  </li>
  <li id="li4">
    <a id="link4" href="#">4</a>
  </li>
 </ul>

useful links:

  1. http://aaronrussell.co.uk/legacy/cross-browser-support-for-inline-block/
  2. http://www.quirksmode.org/css/display.html#t03

update:

Another thing you could try (if the above doesn't solve the problem) is to temporarily remove your conditional commented code for IE7 - just to make certain there isn't anything in there causing a problem:

<!--[if IE 7]>
  <link rel="stylesheet" type="text/css" href="css/ie7.css" />
  <script type="text/javascript" src="Scripts/ie7.js"></script> 
<![endif]-->

update:

Now that I've been able to actually test in IE7 the problem shows up if you enable borders - using css borders to debug is always a good idea :) The problem above is being caused by an child element pushing out the width of your parent element innerWrap. This wont affect more modern browsers, but IE7 and older always try and wrap their children no matter where they are placed or what size they are (unless you override this behaviour). Because your child element slideWrap is 3000px wide, it is causing your right positioned elements to vanish off the edge of the screen.

The following css should fix it:

#innerWrap { width: 100%; }

Upvotes: 1

Learner
Learner

Reputation: 4004

Use left or right properties with it in order to make them visible.

Upvotes: 0

Related Questions