Navigation Simple Vertical - problem and question

[stoi]

I am trying to put a 1px border all the way round my left hand navigation.

I have looked at the stylesheet and there is this

/* menu li block */
#menu_vert li {
  list-style: none;
  margin: 0;
  border-bottom: 1px solid white;
  display: block;
}

now here border-bottom puts a white line at bottom of the navigation, which is cool and that is what i want all the way round. If i change this from 'border-bottom' to 'border' then in Firefox i do get the border all the way round and it looks great.

However, and here is the problem, in IE6 by applying the border all the way changes the positioning of the links in the nav. It does create a border, but it doesnt cover all the links! I dont understand what is happening and as such dont know how to fix it!!

Would appreciate any ideas!

Here is a graphic of what happens after i change the 'border-bottom' to 'border'. What seems to happen is the addition of the outside border forces the 3 child links of the first parent to move down and hence outsode the border. Sadly my CSS isnt good enough to understand why this is!!


[gelöscht durch Administrator]

[RonnyK]

You can wrap the entire calling of the menu in another div f.e. .
This puts a box around it all inclluding a header .

Ronny

[stoi]

Thanks Ronny,

an easy solution and does work altho it leaves me with 1 last issue to fix. In IE6 there is a an area inside the border before the first link which becomes obvious when you rollover the link. See image attached. Is it possible to get rid of that space?

Thanks again.



[gelöscht durch Administrator]

[Nullig]

If you wrapped the menu in a news div, you should look it's the styling.

Nullig

[RonnyK]

You can copy the two divs from the NEWS, "div#news, div#news h2", rename them to another name and call these in the wrap. You can then style these specifically for the menu.

The space above is created by the margin -statement in the div#news.

Ronny

[RonnyK]

I call the div named MENU, where i changed the margin to 0 0 instead of 1em 0.

Code: Select all

/********************
MENU
*********************/
div#menu {
  margin: 0 0 1em 1em;  /* margin for the entire div surrounding the news list */
  border: 2px solid #00447A; 
  background: #B8B9BB; 
}

div#menu h2 {
   line-height: 2em;
   background: #ffffff;
}

Which styles the wrap around the vert-menu, being called in the template with:

Code: Select all

      <!-- Start Navigation -->
      <div id="menu">
      <h2>Menu</h2>
        <div id="menu_vert">
           {menu template='simple_navigation.tpl' collapse='1'}
        </div>
      </div>
      <!-- End Navigation -->

Ronny

[stoi]

Thanks a lot guys. I appreciate your help and got the border sorted no bother. 

I couldnt get that gap to vanish tho above the first link in IE. I tried changing all sorts of things in the CSS and to no avail. As far as i can tell the gap seems to come from the nesting of lists. Not sure tho.

I 'fixed' it by going to the template and removing the tages from round here:
{menu template='simple_navigation.tpl' start_level='2' collapse='1'}. This makes the vert nav the same size as the horiz nav which for my needs are ok. I think it would have problems in other layouts tho.

Would still love to know how to fix the gap tho! 

Cheers

[RonnyK]

stoi,

If you change the margin-element of your wrapping div to "0 0" instead of "0 1em", that should lift the lijnk up. Is use the CSS as described in my last post and that shifts it all. Do you have a link to see.

Ronny