473,372 Members | 1,050 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,372 software developers and data experts.

"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 5741
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

13
by: Dan R Brown | last post by:
I have a large form that is generated dynamically in a jsp using xml / xslt. So, to break up this form into several "tabbed" sections, I break up the form using <div> tags. Each <div...
8
by: Andy Fish | last post by:
Hi, I have a section of a web page that I want to be able to make appear and disappear with javascript, with the things below it moving up and down as appropriate. I'm not using absolute...
4
by: Axel Dahmen | last post by:
Hi, current browsers don't support "display: inline-block;" and "display: inline-table;", resp. Thus I'm using "float: left;" to achieve a similar effect. Problem is that if a row of elements...
3
by: Castal | last post by:
hello, i am trying to learn javascript. i found an example of an menu, but there is one thing i do not understand. in the source it says: ' if(thisMenu.display == "block"){......' i do...
0
by: Alan Silver | last post by:
Hello, I have noticed that setting "display:block" for a link causes IE5 to add a line break after the link. Is there a way to stop it doing this? IE6 and compliant browsers don't add the line...
1
by: tankbattle | last post by:
That is, what's the difference between <complexType name="Address" final="restriction"> <sequence> <element name="name" type="string"/> <element name="street" type="string"/> <element...
4
by: Aaron Gray | last post by:
Hi, I want an "isZZZ" variable that I can use to generate "display: -moz-inline-box;" rather than "display: inline-block;" but in DOM. For this I need to know what version of Mozilla this...
6
chunk1978
by: chunk1978 | last post by:
hi there... i'm about to embark on my very first PHP code journey (i've been saying that for a while... so sometime soon i hope... anyway)... before i begin my exciting new journey into PHP...
2
by: Steve Richter | last post by:
I would like to use display:inline and other CSS attributes to build an entry form. Where the heading to the left of the text box is always a set width. It is not working so I am experimenting...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.