473,735 Members | 11,866 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Problems with <ul> margin/padding in Firefox

Hello,

In my (seemingly) endless quest to understand CSS, I have yet another
problem. Please look at http://www.kidsinaction.org.uk/ph/x.html in
Opera, where you will see it how I expected. If you look at it in IE (6
or 7), you find it also looks fine, except for the top margin missing
from the links across the top of the page. That's not the main issue
here, but any pointers as to why it doesn't show them would be
appreciated.

The problem comes when you view the page in Firefox. The links on the
left side of the page are indented by far more than I would have
expected.

The way I intended it to work was to put 15px left margin on the top
level <ul>, then 10px left margin on every <li>. That makes the top
level items have a 25px left margin, that matches the width of the red
triangle at the left end of the FREEPHONE div. Each successive level of
links should be indented by 10px more than its parent.

Trouble is, FF adds much more indent than this. Any idea why? TIA

--
Alan Silver
(anything added below this line is nothing to do with me)
May 23 '06 #1
10 12906
Alan Silver wrote:
Hello,

In my (seemingly) endless quest to understand CSS, I have yet another
problem. Please look at http://www.kidsinaction.org.uk/ph/x.html in
Opera, where you will see it how I expected. If you look at it in IE (6
or 7), you find it also looks fine, except for the top margin missing
from the links across the top of the page. That's not the main issue
here, but any pointers as to why it doesn't show them would be appreciated.

The problem comes when you view the page in Firefox. The links on the
left side of the page are indented by far more than I would have expected.
They look the same to me in Firefox (1.5.0.3) and in Opera (9 beta) but
different [and I think the way you want then to] in IE 7 (b2)
The way I intended it to work was to put 15px left margin on the top
level <ul>, then 10px left margin on every <li>. That makes the top
level items have a 25px left margin, that matches the width of the red
triangle at the left end of the FREEPHONE div. Each successive level of
links should be indented by 10px more than its parent.
The indentation of in the lists are <ul> padding-left NOT <li>
margin-left EVEN when you turn the list-style off the padding is still
there. if you set

ul {border:1px solid red;} and
li {border:1px solid blue;}

you can see the relationship between margin and padding in lists
Trouble is, FF adds much more indent than this. Any idea why? TIA


What's happening, as your code is right now, is you've got the
padding-left on the <ul> [of whatever the default is. Let's say 10px
for the moment] AND THEN margin-left on the <ul> [of 10px]. You also
have margin-left applied to <div id="catlinks"> [of 15px]. So far you
have the <ul> 35px from the screen's left side. If you want to indent
the <li> you should do it with extra padding left in the <ul>.

To do what you wanted above try this modification of your code:

#catlinks {
display: inline;
float: left;
padding: 0;
width: 20%;
font-size: 0.9em;
}
#catlinks ul {
margin: 0 0 0 15px;
padding-left:10px;
}
#catlinks li {
list-style: none;
margin: 0;
padding: 0;
}

ps. I don't see a red triangle

--
Brian O'Connor (ironcorona)
May 23 '06 #2
In article <44********@quo kka.wn.com.au>, ironcorona
<ir*********@gm ail.com> writes
Alan Silver wrote: <snip>
The problem comes when you view the page in Firefox. The links on
the left side of the page are indented by far more than I would have
expected.


They look the same to me in Firefox (1.5.0.3) and in Opera (9 beta) but
different [and I think the way you want then to] in IE 7 (b2)


Weird, I am using FF 1.0.7 and 1.5.0.3, where it looked one way (indent
too big) and Opera 8.54 and IE6 and IE7 where it looked another way (how
I wanted it).

<snip>
Trouble is, FF adds much more indent than this. Any idea why? TIA


What's happening, as your code is right now, is you've got the
padding-left on the <ul> [of whatever the default is.


That was the problem. I had forgotten to set the padding explicitly, so
was relying on the browser's default.

<snip>To do what you wanted above try this modification of your code: <snip>

Thanks for the code, but I found that just explicitly setting the
padding on the <ul> to zero sorted it out.

Thanks for the reply.
ps. I don't see a red triangle


I probably didn't explain myself well enough here. The left end of the
red FREEPHONE div has an angled shape. That is done by having a small
image with a red triangle as the background. I was trying to get the
left edge of the links to line up with the point where the slanted edge
of this met the bottom of the div. Sorted thanks to you<g>

Ta ra

--
Alan Silver
(anything added below this line is nothing to do with me)
May 23 '06 #3
In article <FE************ **@nospamthanky ou.spam>, Alan Silver
<al*********@no spam.thanx.inva lid> writes
In my (seemingly) endless quest to understand CSS, I have yet another
problem. Please look at http://www.kidsinaction.org.uk/ph/x.html in
Opera, where you will see it how I expected. If you look at it in IE (6
or 7), you find it also looks fine, except for the top margin missing
from the links across the top of the page.


Now I have the indent issue sorted, anyone any ideas why these top
border don't show up? TIA

--
Alan Silver
(anything added below this line is nothing to do with me)
May 23 '06 #4
Alan Silver wrote:
Now I have the indent issue sorted, anyone any ideas why these top
border don't show up? TIA


I don't know why but I can make it go away. In #sectionlinks remove
float:right; and in its place put in text-align:right;

When it's floated the top border decides to go for a wander in IE. Who
the hell knows why.
--
Brian O'Connor (ironcorona)
May 23 '06 #5
On Tue, 23 May 2006 16:05:52 +0100 Alan Silver <al*********@no spam.thanx.inva lid> wrote:

| In my (seemingly) endless quest to understand CSS, I have yet another
| problem. Please look at http://www.kidsinaction.org.uk/ph/x.html in
| Opera, where you will see it how I expected. If you look at it in IE (6
| or 7), you find it also looks fine, except for the top margin missing
| from the links across the top of the page. That's not the main issue
| here, but any pointers as to why it doesn't show them would be
| appreciated.

How things get rendered in IE is not a valid way to learn CSS.
| The problem comes when you view the page in Firefox. The links on the
| left side of the page are indented by far more than I would have
| expected.

For each HTML element, browsers may have variations in their default
presentations. CSS should allow you to override them. In Firefox, you
can look at the default .css files installed to see what is used as the
default. Anything the author does not explicitly specify can have its
property take from the default.
| The way I intended it to work was to put 15px left margin on the top
| level <ul>, then 10px left margin on every <li>. That makes the top
| level items have a 25px left margin, that matches the width of the red
| triangle at the left end of the FREEPHONE div. Each successive level of
| links should be indented by 10px more than its parent.
|
| Trouble is, FF adds much more indent than this. Any idea why? TIA

Because they wanted to? Specify everything, margin, border, padding, and
see if that gets you in control. You _may_ also have to specify some of
the MOZ custom properties where used in the FF default stylesheets.

--
-----------------------------------------------------------------------------
| Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
| (first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |
-----------------------------------------------------------------------------
May 23 '06 #6
In article <e4*********@ne ws4.newsguy.com >, ph************* *@ipal.net
writes
| Trouble is, FF adds much more indent than this. Any idea why? TIA

Because they wanted to? Specify everything, margin, border, padding,
and see if that gets you in control. You _may_ also have to specify
some of the MOZ custom properties where used in the FF default
stylesheets.


Problem was that I *thought* I had specified margin and padding
explicitly, which is why I was baffled. It turned out that I had
forgotten to specify one, and FF's default was larger than the other
browsers.

Thanks for the reply.

--
Alan Silver
(anything added below this line is nothing to do with me)
May 23 '06 #7
In article <44********@quo kka.wn.com.au>, ironcorona
<ir*********@gm ail.com> writes
Alan Silver wrote:
Now I have the indent issue sorted, anyone any ideas why these top
border don't show up? TIA
I don't know why but I can make it go away. In #sectionlinks remove
float:right; and in its place put in text-align:right;


Hmm, I tried that, and the top border appeared, but nothing else!! no
text and no side borders. As soon as I put my mouse over it, the whole
thing appeared correctly. I haven't time to look at it now, will have to
examine it further tomorrow.
When it's floated the top border decides to go for a wander in IE. Who
the hell knows why.


Microsoft? Actually, maybe not!!

Thanks again.

--
Alan Silver
(anything added below this line is nothing to do with me)
May 23 '06 #8
Alan Silver wrote:
I don't know why but I can make it go away. In #sectionlinks remove
float:right; and in its place put in text-align:right;


Hmm, I tried that, and the top border appeared, but nothing else!! no
text and no side borders. As soon as I put my mouse over it, the whole
thing appeared correctly. I haven't time to look at it now, will have to
examine it further tomorrow.


Really? I used this code

#sectionlinks {
text-align: right;
margin: 0;
font-size: 0.8em;
list-style: none;
}

and it worked perfectly
--
Brian O'Connor (ironcorona)
May 24 '06 #9
In article <44********@quo kka.wn.com.au>, ironcorona
<ir*********@gm ail.com> writes
Alan Silver wrote:
I don't know why but I can make it go away. In #sectionlinks remove
float:righ t; and in its place put in text-align:right; Hmm, I tried that, and the top border appeared, but nothing else!!
no text and no side borders. As soon as I put my mouse over it, the
whole thing appeared correctly. I haven't time to look at it now, will
have to examine it further tomorrow.


Really?


Yup, really
<g>
I used this code

#sectionlink s {
text-align: right;
margin: 0;
font-size: 0.8em;
list-style: none;
}

and it worked perfectly


I had to add "position:relat ive" to get it to work. Just changing the
float to a text-align caused everything but the top margin to disappear,
but adding position brought it all back again.

Thanks for the reply. At least I now have a working solution!!

--
Alan Silver
(anything added below this line is nothing to do with me)
May 24 '06 #10

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

16
4450
by: michael | last post by:
Is it possible to get all href URLs contained in a unordered list and place them in an array? Or in fact two different arrays, differently named one for each <ul> group? <ul> <li><a href="lemurs.html">Lemurs</a></li> <li><a href="chameleons.html">Chameleons</a></li> </ul> <ul>
2
7632
by: Shaun | last post by:
Hello! I have a quick question regarding CSS and having it applied to all elements. I am trying to eliminate the gap between a paragraph and a list that usually occurs in html and I've found away to do that with this code: <p>a</p> <ul style="margin-top: -20; padding-top: 0"> <li>1</li>
11
5173
by: namenotgivenhere | last post by:
My design goal is to make the white space above and below <p> and <ul> equal to the height of my font. The first step to achieving this I believe is to have an equal amount of white space above or below <p> and <ul>. Can someone suggest a method using css to accomplish this? I have succeeded in doing this in IE6 but I'd also like to know if there's a method to achive this goal that will have a similar visual look in other modern browsers....
2
12057
by: Jerry | last post by:
I've got a website that uses an external style sheet to manage several of the design elements. One of the webpages includes an unordered list. I would like for the list to not be indented at all, with the bullets directly below the left margin of a standard paragraph of text. All of the content is included in a table cell. I was able to accomplish that when viewed in IE, using the following CSS snippet, but both NS and FireFox displays the...
6
2298
by: ashkaan57 | last post by:
Hi, How can I set up the styling for different levels of <ULto use different images for bullets, be indenetd differently, ... Like: .. list 1 - item 1 - item 2 .. list 2
19
11615
by: ashkaan57 | last post by:
Hi, I have a page in a right-to-left language and I am trying to make some bulleted lists using <ul>, but it puts the bullets to the left. Is there any way I can set the bullets to be on the right: ..lists { margin:2em 0 0 2em; } ..lists ul {
1
12203
by: jasonchan | last post by:
How do you align <ol> and <ul> elements when they are contained in a floated box? Here is my website: http://geocities.com/jasonchan483/ Here's my problem. The markers of the lists are located out of the floated box when i set the margin to 0px. I actually want to align the <ol> and <ul> the same distance as i have aligned the paragraph of the second column, which is margin-left: 20px i.e. #column2 p {
5
4484
by: Syl | last post by:
Hello experts!! The top menu navigation bar displays perfectly in IE, but does not display properly in Mozilla or Netscape : http://checkeredshirt.com/textonly.html For some reason the non-IE browers are forcing the top navigation menu to dislpay "staggered" after the the first <ul><lielement. Can anyone see why this is happening ?
2
1830
by: cityman007 | last post by:
Hi Somebody help me to solve the problem with <ul><li> with images. I used images with Hspace and Vspace and beside the images i make list. its overlapping in Firefox and not seen in IE7 http://www.goalsettingthatworks.com/demo/index.html mycode: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
0
8962
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
8785
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
9327
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
0
8201
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
6747
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 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 a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
4559
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
4822
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
3273
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
3
2188
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.