"display: block;" and mozilla

[Marc]

Hi everyone.

I am having trouble with a stylesheet in mozilla.

It is part of turning a list into a menu:

#menu li{
margin: 0;
display: inline;
vertical-align: bottom;
}

#menu li a:link, #menu li a:visited{
display: block; //works in ie but not mozilla
padding-top: 5px;
padding-right: 30px;
padding-bottom: 5px;
text-decoration: none;
text-align: right;
color: #3667A7;
width: 100%;
}

The work-around in #menu li above means that this works fine in IE.
However, in mozilla i seem to have padding in my list of li's. I know
that this is a common problem in IE but ive never seen it in mozilla.

How do i fix it?

Thanks,

Marc

[Els]

Marc wrote:

Hi everyone.

I am having trouble with a stylesheet in mozilla.

It is part of turning a list into a menu:

#menu li{
margin: 0;
display: inline;
vertical-align: bottom;
}

#menu li a:link, #menu li a:visited{
display: block; //works in ie but not mozilla
padding-top: 5px;
padding-right: 30px;
padding-bottom: 5px;
text-decoration: none;
text-align: right;
color: #3667A7;
width: 100%;
}

The work-around in #menu li above means that this works fine in IE.
However, in mozilla i seem to have padding in my list of li's. I know
that this is a common problem in IE but ive never seen it in mozilla.

How do i fix it?

Set padding:0; on the <li>s?

Maybe you could post a url to the problem page? That makes it easier
to see what your problem is.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Phil Collins - In The Air Tonight

[Marc]

Hello.

The test url is: http://physicalactivity.northtynesidepct.nhs.uk/

I tried setting padding to 0 and it did nothing.

Thanks for your help!

marc

[Els]

Marc wrote:

Hello.

The test url is: http://physicalactivity.northtynesidepct.nhs.uk/

I tried setting padding to 0 and it did nothing.
When you wrote "display:inline", I assumed you were making a
horizontal list.

Take off the display:inline, and your vertical "padding" is gone.

Before you do that though, add 'border:1px solid red' to the styles
for the <li>s, and you will see where your "padding" came from :-)
Thanks for your help!

You're welcome :-)

BTW - better check your page in Firefox and Opera, as you don't really
want those results.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: B52´s - Love Shack

[Marc]

Eventually had to do this:

#menu li{
margin: 0;
padding: 0;
display: inline;
vertical-align: bottom;
/*border: thin solid red;*/
}

html>body #menu li{
display: block;
}
Downloading opera now. Whats wrong with it in firefox? been testing in
firefox 1.0.3 and it looks ok!

On another note i think this is the one and only website i will be
doing with CSS. At least i knew what it would look like with layout
tables.

Thanks for your help.

marc

[Els]

Marc wrote:

Eventually had to do this:

#menu li{
margin: 0;
padding: 0;
display: inline;
vertical-align: bottom;
/*border: thin solid red;*/
}

html>body #menu li{
display: block;
}
Can you tell me why you are setting display:inline for a vertical
list?
Downloading opera now. Whats wrong with it in firefox? been testing in
firefox 1.0.3 and it looks ok!

In my Firefox (1.0.4), the content drops below the navigation (on
window-width of 795 pixels) and the horizontal line that's below "Home
Page" strikes through the links "search | contact us | links", and
this combination ("Home Page", horizontal line and those links) drops
down between the first and second line of the content.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Joe Jackson & Elaine Caswell - Happy Ending

[kchayka]

Els wrote:

In my Firefox (1.0.4), the content drops below the navigation (on
window-width of 795 pixels)

This is a side effect of setting the navbar width:10em and the content
width:80%, floating doesn't help. A bad combination, for sure, since the
two elements will rarely add up to 100% of the viewport width. It looks
pretty awful at my usual larger-than-average text size, too.

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

[C A Upsdell]

Marc wrote:

On another note i think this is the one and only website i will be
doing with CSS. At least i knew what it would look like with layout
tables.

Great! This means one less competitor to worry about!