469,282 Members | 1,923 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,282 developers. It's quick & easy.

"display: block;" and mozilla

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

Jul 21 '05 #1
7 5528
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 vo. O resto imperfeito.
- Renato Russo -
Now playing: Phil Collins - In The Air Tonight
Jul 21 '05 #2
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

Jul 21 '05 #3
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 vo. O resto imperfeito.
- Renato Russo -
Now playing: B52s - Love Shack
Jul 21 '05 #4
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

Jul 21 '05 #5
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 vo. O resto imperfeito.
- Renato Russo -
Now playing: Joe Jackson & Elaine Caswell - Happy Ending
Jul 21 '05 #6
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.
Jul 21 '05 #7
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!
Jul 21 '05 #8

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

8 posts views Thread by Andy Fish | last post: by
4 posts views Thread by Axel Dahmen | last post: by
3 posts views Thread by Castal | last post: by
chunk1978
6 posts views Thread by chunk1978 | last post: by
2 posts views Thread by Steve Richter | last post: by
reply views Thread by suresh191 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.