Welcome to WebmasterWorld Guest from 35.153.73.72

Forum Moderators: not2easy

Message Too Old, No Replies

What I learned today about positioning

Fixed vs. Absolute and IE vs Netscape 7

     
9:15 pm on Jul 28, 2004 (gmt 0)

Junior Member

10+ Year Member

joined:July 18, 2000
posts:131
votes: 0


I thought I might drop a quick note about how I spent all day today. Let me set the scene...

I have a client who is using a popup navigation onmouseover deal. I tried to get him away from it but he really wanted to keep it. I didn't think much of it until I put it into his new format (we took his site out of frames).
This navigation is controlled by css. Like this:

#con { position: absolute; z-index: 10; bottom: 0px; left: 5px; width: 270px; height: 42px; visibility: hidden; }
#buy { position: absolute; z-index: 11; bottom: 0px; left: 300px; width: 166px; height: 42px; visibility: hidden }
#buy2 { position: absolute; z-index: 11; bottom: 0px; left: 305px; width: 166px; height: 42px; visibility: hidden }
#mask { position: absolute; z-index: 1; bottom: 0px; left: 0px; width: 830px; height: 137px; visibility: hidden }
#inside { position: absolute; z-index: 11; bottom: 0px; left: 16px; width: 306px; height: 42px; visibility: hidden }

What happens, basically, is when a person hovers over a button the mouseover buttons appear on a z layer on top of the original button. So the main button looks like it's changing color with the z layer and then you get all the other buttons.

This worked just fine with IE. But in Netscape 7 the buttons were about a quarter of the way up the page. When I took the content out of the page this mouseover worked just fine on both browsers. But when I put the content back in the buttons again would not be at the absolute bottom of the the page. It turned out Netscape was saying that they were at the absolute bottom of screen not the page itself.

Playing around with this some more I found that the "fixed" positioning worked in Netscape. Like this:

#con { position: fixed; z-index: 10; bottom: 0px; left: 5px; width: 270px; height: 42px; visibility: hidden; }
#buy { position: fixed; z-index: 11; bottom: 0px; left: 300px; width: 166px; height: 42px; visibility: hidden }
#buy2 { position: fixed; z-index: 11; bottom: 0px; left: 305px; width: 166px; height: 42px; visibility: hidden }
#mask { position: fixed; z-index: 1; bottom: 0px; left: 0px; width: 830px; height: 137px; visibility: hidden }
#inside { position: fixed; z-index: 11; bottom: 0px; left: 16px; width: 306px; height: 42px; visibility: hidden }

But of course it didn't work in IE. So, finally I was able to do a little browser detection. I put the code that worked in IE in an external file. Then I called it with a browser detection. Then the code that worked for Netscape I kept on the page. So my completed code looked like this:

<style media="screen" type="text/css"><!--
#con { position: fixed; z-index: 10; bottom: 0px; left: 5px; width: 270px; height: 42px; visibility: hidden; }
#buy { position: fixed; z-index: 11; bottom: 0px; left: 300px; width: 166px; height: 42px; visibility: hidden }
#buy2 { position: fixed; z-index: 11; bottom: 0px; left: 305px; width: 166px; height: 42px; visibility: hidden }
#mask { position: fixed; z-index: 1; bottom: 0px; left: 0px; width: 830px; height: 137px; visibility: hidden }
#inside { position: fixed; z-index: 11; bottom: 0px; left: 16px; width: 306px; height: 42px; visibility: hidden }

--></style>
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="../stylesheets/sitestyle.css" />
<![endif]-->

This seems to have everything working. I thought I might post this to help anyone else out who might have experienced similar problems. It might be fairly unique, though. But I'm also curious if there is a better way to do the same thing.
I also found this post on the topic:
[webmasterworld.com...]

All-in-all, it was a decent way of spending a day. I could have gotten more things done. But I learned a lot.

Happy coding!
Sage

9:22 pm on July 28, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 7, 2002
posts:906
votes: 0


very nice sage
6:44 am on July 29, 2004 (gmt 0)

Junior Member

10+ Year Member

joined:June 25, 2004
posts:63
votes: 0


There's a great article on AListApart that addresses this.

Just visit AListApart and search for horizontal dropdowns.

In short:

An accessible, symantically correct, standards-compliant, very neat, clean, tightly-written, easy to understand dropdown list that works better than the Javascript ones and degrades nicely.

Once I found that article my whole approach to making menus changed. I've had more variation in the menus I've made in the past month than I did in the 3 years previous.

It also sounds like what you're looking for. There's only one small pieces of JS that is needed to force the menu to work properly in IE.

The short of it:

Create a symantically correct menu:

<ul id="nav">
<li>Item1</li>
<li>Item2</li>
.. etc.
</ul>

The CSS:

ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
border-bottom: 1px solid #ccc;
}

ul li {
position: relative;
}

li ul {
position: absolute;
left: 149px;
top: 0;
display: none;
}

ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff;
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}

/* Holly Hack needed to fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

li:hover ul, li.over ul {
display: block;
}

And the Javascript to make IE behave because it doesn't understand li:hover :

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;

I hate to violate APA's copyright but unfortunately the WW software now edits out all URL's. Unfortunate. I think that policy is due a bit of reconsideration.

3:16 pm on July 29, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 18, 2003
posts:827
votes: 0


IE correctly ignores position: fixed, so you can use this construct to set fixed for browsers that support it and absolute for the rest:

selector {
position: absolute;
position: fixed;
}

7:58 pm on Aug 2, 2004 (gmt 0)

Junior Member

10+ Year Member

joined:July 18, 2000
posts:131
votes: 0


Thanks guys. That's all very cool info.

BlueEyz, that article is awesome! I'm going to give that a try tomorrow.

I knew there must be a way to do mouseovers without all that messy JavaScript.

Can't wait to give it try!

Thanks again,
Sage

1:40 pm on Aug 4, 2004 (gmt 0)

Junior Member

10+ Year Member

joined:July 18, 2000
posts:131
votes: 0


As a follow up, **** had another article describing how how make these drop down navigations in a vertical format as well as horizontal. Searching alistapart for suckerfish will get you that info.

This is just super information. There really is no need to junk up your site with extra javascript anymore.

These drop downs can be down entirely in css.

Awesome!