List Styling

[shapper]

Hello,

I am creating a simple navigation bar using a list.
My anchor tags inside each list item have a background and margin. The
problem is they are overlapping.
I then added to the li tag margin-top: 20px.
The problem is that the bottom background of the last element
disappears.

I think I might doing something wrong on my styling because when I fix
something, something else gets wrong.

Could someone, please, help me out?

HTML:

<ul id="wmNavigation" class="Bar">
<li>
<a title="Page1" href="http://www.name.com/page1">Page1</a>
</li>
<li>
<a title="Page2" href="http://www.name.com/page1">Page2</a>
</li>
<li>
<a title="Page3" href="http://www.name.com/page1">Page3</a>
</li>
<li>
<a title="Page4" href="http://www.name.com/page1">Page4</a>
</li>
</ul>

CSS:

ul.Bar {}

ul.Bar li
{
font: normal 1.2em Verdana, Geneva, sans-serif;
letter-spacing: 0.1em;
margin-top: 20px;
}

ul.Bar li a
{
background-color: #202020;
color: #E2E2E2;
padding: 4px 10px 6px 12px;
text-decoration: none;
}

ul.Bar li a:link , ul.Bar li a:visited {}
ul.Bar li a:hover, ul.Bar li a:active, ul.Bar li a:focus
{
background-color: #303030;
}

Thanks,
Miguel

[Andy Dingley]

On 13 May, 09:23, shapper <[e-mail]:

My anchor tags inside each list item have a background and margin. The
problem is they are overlapping.

Post a URL not a fragment.

In particular, we don't know what doctype declaration you're using, so
we don't know if IE is in Quirks or Standards mode. That will make a
difference to many issues about box sizing.

I then added to the li tag margin-top: 20px.

When fiddling with lists, always set _all_ the margins and padding on
both <ul& <li>. This avoids inconsistencies between browser default
stylesheets (some use padding to control lists, some use margin).

<li>
<a title="Page1" href="http://www.name.com/page1">Page1</a>
</li>

is better coded like this:

<li><a title="Page1"
href="http://www.name.com/page1"

>Page1</a></li>

Avoid the whitespace between tags here, as IE is sensitive to it.
Whitespace (including linebreaks) around the attributes inside the
start tag is OK.

[Ben C]

On 2008-05-13, shapper <md*****@gmail.comwrote:

Hello,

I am creating a simple navigation bar using a list.
My anchor tags inside each list item have a background and margin. The
problem is they are overlapping.
I then added to the li tag margin-top: 20px.
The problem is that the bottom background of the last element
disappears.

I think I might doing something wrong on my styling because when I fix
something, something else gets wrong.

Could someone, please, help me out?

Put the background colour on the LI instead of on the A inside it.

The LIs don't overlap (this is defined clearly by the spec), but the top
and bottom edges of inline boxes aren't (they just depend on the font in
some way).

That should fix the original problem.

I don't know what you mean about the bottom background of the last
element disappearing. I tried your example and it seemed to be OK.

[...]

>
ul.Bar {}

ul.Bar li
{
font: normal 1.2em Verdana, Geneva, sans-serif;
letter-spacing: 0.1em;
margin-top: 20px;

background-color: #202020;
^^^^^^^^^^^^^^^^^^^^^^^^^^ <----- to here

}

ul.Bar li a
{

[background-color: #202020;] <----- move this up

[shapper]

On May 14, 10:25 pm, Ben C <[e-mail]:

On 2008-05-13, shapper <[e-mail]:

Hello,

I am creating a simple navigation bar using a list.
My anchor tags inside each list item have a background and margin. The
problem is they are overlapping.
I then added to the li tag margin-top: 20px.
The problem is that the bottom background of the last element
disappears.

I think I might doing something wrong on my styling because when I fix
something, something else gets wrong.

Could someone, please, help me out?

Put the background colour on the LI instead of on the A inside it.

The LIs don't overlap (this is defined clearly by the spec), but the top
and bottom edges of inline boxes aren't (they just depend on the font in
some way).

That should fix the original problem.

I don't know what you mean about the bottom background of the last
element disappearing. I tried your example and it seemed to be OK.

[...]

ul.Bar {}

ul.Bar li
{
font: normal 1.2em Verdana, Geneva, sans-serif;
letter-spacing: 0.1em;
margin-top: 20px;

background-color: #202020;
^^^^^^^^^^^^^^^^^^^^^^^^^^ <----- to here

}

ul.Bar li a
{

[background-color: #202020;] <----- move this up

Thank You Ben!