Horizontal Navigation Section - using unordered list with display:inline - How to control padding?

Hi there,

I'm trying to use the correct CSS to control a website as much as possible.

I want to create a nav section like below

--------------------------------------
Home Page1 Page 2
--------------------------------------

I create the links as an unordered list

and apply the style
display:inline which makes the list horisontal.

However, when I applyt a border to my
section, I also seem to get an
unwanted gap between the top and bottom of my list items and the borders of
their surrounding divs.

I.e. it looks something like this
--------------------------------------


Home Page1 Page 2


--------------------------------------



And I can't seem to loose the gap. Also it does not display the list items
in the Arial font (but does in dreamweaver CS3 preview screen).


Can anyone help? Code is below (note I have experimented around with the CSS
a bit).


***********HTML START****************

































***********HTML END****************

********STYLE SHEET START***********
..navBarMain {
border-top-width: 5px;
border-top-color: #3399CC;
border-right-color: #FFFFFF;
border-bottom-color: #0099CC;
border-left-color: #FFFFFF;
border-top-style: solid;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-bottom-width: 2px;
padding-top: 0px;
padding-bottom: 0px;
margin-bottom:0px;
margin-top:0px;
}


..navBarFontMain, .navBarFontMain a:link , .navBarFontMain a:active,
..navBarFontMain a:visited
{
font:Arial, Helvetica, sans-serif;
font-size:1em;
font-weight:bold;
color:#9f9f92;
text-decoration:none;
padding-top: 0px;
padding-bottom: 0px;
margin-bottom:0px;
margin-top:0px;

}
..navBarFontMain a:hover {
text-decoration:underline;
}

#navMenuList li {
display: inline;
list-style-type: none;
padding-right: 0.8em;
font:Arial, Helvetica, sans-serif;
border-top-width: 0px;
border-bottom-width: 0px;
padding-top: 0px;
padding-bottom: 0px;
margin-bottom:0px;
margin-top:0px;


}

..mainContent {
width:880px;
background-color:#FFFFFF;
}

********STYLE SHEET END***********

Re: Horizontal Navigation Section - using unordered list with display:inline - How to control paddin

In article ,
wrote:

> I'm trying to use the correct CSS to control a website as much as possible.
>
> I want to create a nav section like below
>
> --------------------------------------
> Home Page1 Page 2
> --------------------------------------
>
> I create the links as an unordered list

and apply the style
> display:inline which makes the list horisontal.
>
> However, when I applyt a border to my
section, I also seem to get an
> unwanted gap between the top and bottom of my list items and the borders of
> their surrounding divs.

Have you set margin and padding to the div and the list,
including trying zero explicitly for some of these to get what
you want?

--
dorayme

Re: Horizontal Navigation Section - using unordered list with display:inline - How to control paddin

On Sat, 17 Nov 2007 22:58:12 -0000, wrote:
>I'm trying to use the correct CSS to control a website as much as possible.
>
>I want to create a nav section like below
>
>--------------------------------------
>Home Page1 Page 2
>--------------------------------------
>
>I create the links as an unordered list

and apply the style
>display:inline which makes the list horisontal.
>
>However, when I applyt a border to my
section, I also seem to get an
>unwanted gap between the top and bottom of my list items and the borders of
>their surrounding divs.
>
>I.e. it looks something like this
>--------------------------------------
>
>
>Home Page1 Page 2
>
>
>--------------------------------------

You probably need to set a top and bottom margin for

, for
example:

ul{
margin-top: 0;
margin-bottom: 0;
}
--
Martin Jay