Most browsers have a default style that they apply to some elements, the browser you are using is applying left padding to the navigation ul.
Try using something like YUI Reset (http://developer.yahoo.com/yui/reset/) to remove all the browser independent styling first and then start to write your own styles.
placement of the vertical menu (CSS)
Hi,
This package is ver cool. It's exactly what i was looking for.
Simple UL and IL in CSS let's me configure the output on screen as i want, but the (vertical) CSS with menu gives me the following problem:
Im placing the menu in a DIV with a gray background so you can see what i mean.
I've tried everything but i just can't seem to remove or reduce the the space marked with the red arrows.
Any Idea??
Maarten
Hi Maarten,
Have you tried using Firebug (https://addons.mozilla.org/en-US/firefox/addon/1843/) in Firefox to help debug this?
If you 'Inspect' the element in firebug you will see where this space is coming from.
Chris
Ok... this show a lot...still can't figure out a solution.
I have installed the Package [COG] flexible menu. This comes with a macro and a stylesheet
This is what i got and altered in CSS
/*VERTICAL NAV*/
.vertical
{
width:144px;
line-height:1.4em;
padding-bottom:20px;
margin:0;
padding:0;
text-align:left;
}
.vertical ul
{
width:144px;
margin:0px;
padding-left:0px;
list-style:none;
text-align:left;
}
.vertical li
{
width:144px;
margin:0px;
padding-left:0px;
font-weight:normal;
color:#9a8b86;
list-style:none;
text-align:left;
}
/* STANDAARD ALGEMENE OPMAAK */
.vertical li a
{
width:80px;
font:Arial, Helvetica, sans-serif;
font-size:14px;
margin-left:0px;
padding-left:0px;
/*display:block;*/
list-style:none;
/*padding:3px 3px 3px 5px;*/
text-decoration:none;
color:#9a8b86;
}
.vertical li a:hover
{
/* border-left:5px solid #4dB0aa; */
color: #d6d800;
background: url("/scripts/dot.png") left center no-repeat;
}
.vertical li a.branch
{
/*border-left:5px solid #ccc;*/
color:#9a8b86;
}
.vertical li a.branch:hover
{
/*border-left:5px solid #4dB0aa;*/
color: #d6d800;
}
.vertical li a.selected
{
/*border-left:5px solid #4dB0aa;*/
/*color: #d6d800;*/
color:#9a8b86;
}
.vertical.lv1 li a {
font:Arial, Helvetica, sans-serif;
font-size:16px;
padding:3px 3px 3px 0px;
}
.vertical .lv2 li a {
font:Arial, Helvetica, sans-serif;
font-size:10px;
padding:3px 3px 3px 20px;
border-bottom:1px solid #d6d800;
}
Maarten
Maarten,
Most browsers have a default style that they apply to some elements, the browser you are using is applying left padding to the navigation ul.
Try using something like YUI Reset (http://developer.yahoo.com/yui/reset/) to remove all the browser independent styling first and then start to write your own styles.
Add the following to your master page
Ok, thanks Will try this first thing tomorrow and Will keep you posted on my progress. Maarten
Chris,
You are my hero :)
I used a part of the reset CSS, UL and LI and included them in my stylesheet....space is gone...
Maarten
is working on a reply...