FF margin-top covering other elements

[computerbarry]

Hi all

I'm having a problem with FF, I have a drop down with the ul positioned above, even though these elements are further down the tree, their margin is covering all the content above and disabling my links in the header.

Has anybody had this problem with FF, everything's ok in IE.

Thanks

[RyanReese]

Hi, can you post a link to this where it is happening? I think I need to actuallly see this happening as I can't visualize it .

[computerbarry]

It's running locally... if you recall lesson 27 I think, with the pure css dropdowns you'll know what I mean. Each subnav has a margin-top... this is whats causing the problem in FF, everything runs fine in IE etc.

I thought z-index or something would solve it but... ???

[RyanReese]

Lesson 27..?

At the least we need to see full code . HTML and CSS.

[computerbarry]

Ok as an example:

<div id="top_nav">content........</div>
<div id="banner">content........</div>
.... and further down the page

<div id="main_navigation">
<ul>
<li>services
<ul class="sub">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li>about us
<ul class="sub">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</li>
......
</ul>

</div>

Each of the <li>'s is a link and the <ul class="sub"> are hidden with margin-top:400px until rolled over. It's this 400px that's covering the elements above it (banner, top_nav), like a mask over the content.

It should be underneath not on top.

make sense?

[RyanReese]

First of all, is the nested <ul> position:absolute;? If you do that and give a negatvie z-index it will be under it.

However the custom method is to do margin-left:-999em; to hide and bring it back with a 0 left margin (because verticalness to hide it won't always work-aka on a long page )

[computerbarry]

Yes I understand with the left margin...

Lesson 27..?

It's quiz 27 at the top of the page, I've altered the code to fit my site different styling etc... but the concept and most of the coding structure is the same. If you have a look you'll know what I mean.

When elements are placed above this navigation, only FF covers anything above it with the margin I'm taking about, restricting me from accessing any links or content.

[RyanReese]

Once again I will need full code to look at .

[computerbarry]

Ok I've uploaded the site to a temporary space.

My problems:

1. The margins in FF as we've been discussing.
2. If I click a link from the dropdown and click the broswer back button, the dropdown stays open, how can this be cleared if somebody clicks back?
3. Extra top-margin in IE6/7 on top of the rainbow colored bar above the navigation.

This link is just temporary so any help would be great

www.girlsclubbing.co.uk

[RyanReese]

Ok I've uploaded the site to a temporary space.

My problems:

1. The margins in FF as we've been discussing.
2. If I click a link from the dropdown and click the broswer back button, the dropdown stays open, how can this be cleared if somebody clicks back?
3. Extra top-margin in IE6/7 on top of the rainbow colored bar above the navigation.

This link is just temporary so any help would be great

www.girlsclubbing.co.uk

1) Try giving "#top_navigation" a position:relative; and a z-index (1 for example)
2) Dunno
3) Try setting the top padding for #wrapper to 0.

[computerbarry]

Cheers

position:relative; z-index:1; nearly there... the top right hand side links work but its just the big logo on the left, still nothing.

[computerbarry]

Try setting the top padding for #wrapper to 0.

You know your stuff Ryan thanks

[RyanReese]

Cheers

position:relative; z-index:1; nearly there... the top right hand side links work but its just the big logo on the left, still nothing.

You know your stuff Ryan thanks

Glad to hear someone appreciates my l33t skillzz lol. Everything fixed now?

[computerbarry]

Sorted I applied position:relative; z-index:2 to the logo banner to sort the logo link

What about the dropdown issue when you click back... any ideas?

[computerbarry]

Glad to hear someone appreciates my l33t skillzz lol

lol... posted the same time... yes everything sorted just the dropdown issue when you click back... not sure if thats a browser cache thing???

[RyanReese]

What about the dropdown issue when you click back... any ideas?

I'm clueless about that. Perhaps someone else can take a look and sort you out .

[computerbarry]

ok Ryan a think thats me for the night, thanks again

[Paul O'B]

I'm clueless about that. Perhaps someone else can take a look and sort you out

The link is missing now so no one else can

[computerbarry]

Yes thanks Paul, this was just a temporary development area... don't like leaving things up to long in case Google crawls and indexes the clients site etc.

Anyway have a look http://girlsclubbing.co.uk/I've uploaded it the site. If you click a sub menu link from any of the dropdowns then click back in the browser you'll see waht I mean.

Thanks Paul

[Paul O'B]

Hi,

That's simply the effect of :focus to enable keyboard navigation. It has nothing special to do with that layout and would be apparent on a page like this also:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
a.test:focus {
    background:red;
}
</style>
</head>
<body>
<ul>
    <li><a href="#">test</a></li>
    <li><a href="#">test</a></li>
    <li><a href="#">test</a></li>
    <li><a class="test" href="www.google.com">Click this one to test</a></li>
    <li><a href="#">test</a></li>
    <li><a href="#">test</a></li>
    <li><a href="#">test</a></li>
</ul>
</body>
</html>

You would have to remove the :focus pseudo class to make it go away which would be a shame for keyboard users.

I suppose you could set some JS up to clear the focus before the page navigates to the new link.

e.g.

<li><a class="test" onclick="this.blur();return true" href="test3.htm">Click here test 3</a></li>

Obviously you would want to do that unobtrusively which is beyond my skills and a question for the javascript forum

[computerbarry]

Thanks a lot Paul, Ill have a play around with this see what I come up with. Just a shame to add javascript to the CSS method, I might leave it I'll have to decide weather it's worth it. If it's just a small snippet a suppose it can't do any harm.

Thanks again

ps love the inline-block article on search-this, and good to see the site back on-line

[computerbarry]

Hi Paul

Just a bit confused regarding these links.

Ok I've added the <li><a onclick="this.blur();return true" href="online-leak-sealing.php">online leak sealing</a></li> to leak repairs links and dropdown seems to work great. You say "Obviously you would want to do that unobtrusively..." what do you mean?

If I turn JS off it will just revert back to the normal CSS and if I leave the JS it works. Check the site and try it on the first link - leak repairs.

If you have time thanks

[computerbarry]

unobtrusively. I know what you mean now thanks again

[Paul O'B]

"Obviously you would want to do that unobtrusively..." what do you mean?

Yes sorry, I assumed too much

These days its bad practice to use inline event handlers such as the onclick I placed in the anchor and instead you should set up an event listener that looks to see if the anchor has been clicked. This means that there is no inline javascript and it is all handled from an external file so the html remains untouched and is therfore an unobtrusive method.

Here would be a basic method but you would need ot setup checks that the anchor actually exists etc.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
a.test:focus,a.test:active {
    background:red;
}
</style>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
startList = function() {

if (document.getElementById) {
    navRoot = document.getElementById("nav");
    for (i=0; i<navRoot.childNodes.length; i++) {
        node = navRoot.childNodes[i];
        if (node.nodeName=="LI") {
        node.onclick=function() {
            this.childNodes[0].blur();
            this.childNodes[0].hideFocus = true;  // internet explorer
            return true;
            }
           }
      }
 }
}

// addLoadEvent 
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}
addLoadEvent(startList);

//--><!]]>
</script>

</head>
<body>
<ul id="nav">
    <li><a href="#">test</a></li>
    <li><a href="#">test</a></li>
    <li><a href="#">test</a></li>
    <li><a class="test" href="http://www.google.com">Click this one to test</a></li>
    <li><a href="#">test</a></li>
    <li><a href="#">test</a></li>
    <li><a href="#">test</a></li>
</ul>
</body>
</html>

There area also some methods you could utilise on this page.

[computerbarry]

Thanks Paul

Yes I understand the inline issue now, and thanks for the explnation I spent some time on the javascript forum yesterday and managed to come up with:

function clearFocus() {
    var navigation = document.getElementById("main_navigation");
    if (!navigation) return;
    var links = navigation.getElementsByTagName("a"); // note the use of "navigation" here rather than "document". We only want the links inside "navigation", not all of them in the entire document
    for (var i=0; i < links.length; i++) {
        links[i].onclick = function() {
            this.blur(); // "this" refers to the current link being looped through that has been clicked
        }
    }
}
 
clearFocus();

maybe others would like to store this function

Which works great. Just wondering though, is this something we'll need to use everytime we want to use the quiz 27 css dropdown method? obliviously everything still works but just to remove this little sticking problem.

Thanks