Position of <a> inside <li> in a styled navigation <ul>

[Andrew Donaldson]

I'd welcome some help in understanding what's going on with graphical
browsers in the navigation list at:

http://www.bounceandtickle.org.uk/index.html

(This site is not about what it might seem from the URL!)

I'm using a <ul> for the gimmicky teddy bear links. The teddy is a
background image for each <li>. Each link 'button' is an <a> within an
<li>, and I'm trying to get the button to appear partway down the teddy
image, as if the teddy is holding the button.

WinIE6 displays this correctly, where 'correctly' means 'shows the
effect I'm after.' However, Firefox and Opera no doubt do what I'm
telling them and display a button at the top of each <li>, and have a
large spacing between each teddy/button.

However, if I set a border on each <li> all three browsers display the
list near enough the same and in just the way I'm trying to achieve.
I've currently commented out the line border: 1px solid #FFA500; (where
the colour is the same as the body background) to show the difference in
rendering.

Both the HTML and the CSS validate. The CSS is at:

http://www.bounceandtickle.org.uk/styles.css

It's not very optimised at the moment so I've moved the <li> and related
styling to the start of the file.

I understand neither the difference in browser rendering without the
border nor why the border makes a difference. Can anyone help?

Andrew

[kchayka]

Andrew Donaldson wrote:

http://www.bounceandtickle.org.uk/index.html

I'm trying to get the button to appear partway down the teddy
image, as if the teddy is holding the button.

WinIE6 displays this correctly, where 'correctly' means 'shows the
effect I'm after.'

However, if I set a border on each <li> all three browsers display the
list near enough the same and in just the way I'm trying to achieve.

That's probably because of collapsing margins. Google for more info on
this subject.

If you set padding-top:1px on the li element, you should get the effect
you want in browsers other than IE.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

[Andrew Donaldson]

kchayka wrote:

Andrew Donaldson wrote:
[unexpected position of one element within another]
That's probably because of collapsing margins. Google for more info on
this subject.
I know of collapsing margins but clearly my understanding is incomplete.
I'll check the specs.
If you set padding-top:1px on the li element, you should get the effect
you want in browsers other than IE.

You're exactly right. Thank you.

Andrew