Help: Strange HREF containment behaviour

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View

Hi everyone. Its my first time posting here so be gentle :)

I have been writting web sites in html and css for several years but
havve come up against a problem which I can't get my head around. In
doing a redesign of my site I have a DIV containing some anchor tags,
but for some reason the tags keep rendering partly outside the
You can see the behaviour at my site on the top
green bar where the links do not align with the bar.

I have stripped the behaviour down to as basic as I can get it here:

and a copy of the html

<div style="background: gray; height: 30px;" >

<a class="navitem" id="navarticles" href='articles.html' style="
border-right: 1px dotted black;
height: 16px;
padding: 7px 19px;
color: white;



where it seems to look ok in IE6 but firefox and opera render the right
border partly outside the container. Is this correct behaviour and if
so, how do I correct for it?

Please someone put me out of my misery i have been banging my head
against a brick wall for a day over this.

Re: Help: Strange HREF containment behaviour

Fleeing from the madness of the jungle
and said:

Quoted text here. Click to load it

Welcome to AWW

Quoted text here. Click to load it


css ...

body {font-size:100%;
    font-family: arial;}

  div {color:#fff;
       background-color:#666; }

    a {color:#fff;
    border-right: 1px #2b332a dotted;
    padding: 1ex 2em;
    text-decoration: none;
    margin: 0;}

html ...

   <a href="articles.html">Hobbies</a>

William Tasso

Re: Help: Strange HREF containment behaviour

Thanks for the code. Unfortunately it does not solve my problem :(. The
A tag renders fine but the problem is that it jumps out of the
containing div.
What I want is a 30px height DIV, containing a bunch of A tags which
are each 16px high with 7px padding top and bottom (so they should fit
inside the div). I can then put an image background on the main div and
the A tags will automatically line up in a horizontal menu fashion
inside this container.

Any help would be much appreciated.



William Tasso wrote:
Quoted text here. Click to load it

Re: Help: Strange HREF containment behaviour

Actually, it appears to be something to do with the way firefox/opera
deal with padding
Consider the following site:

<code follows>
<div style="background: gray; height: 30px;" >

<a  href='articles.html' style="
        border-right: 1px #2b332a dotted;
        height: 20px;
        padding: 10px;
        margin: 0px;

<br />
<br />
<div style="background: gray; height: 30px;" >

<a href='articles.html' style="
        border-right: 1px #2b332a dotted;
        height: 30px;
        padding: 0px;
        margin: 0;



Here I have 2 DIVS exactly the same except the first has some padding
within the A tag. In IE6, boith do what I expect, i.e. give a 30px high
div containing a link with a right border which is 30px high. In
fiirefox/opera however, the padded link seems to jump out of the
containing DIV. Why?

Site Timeline