Problems with <ul> margin/padding in Firefox

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Alan Silver - 23 May 2006 16:05 GMT

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

Signature

Alan Silver
(anything added below this line is nothing to do with me)

Reply to this Message

ironcorona - 23 May 2006 17:41 GMT

> Hello,
>
[quoted text clipped - 7 lines]
> 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

Signature

Brian O'Connor (ironcorona)

Reply to this Message

Alan Silver - 23 May 2006 18:20 GMT

<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

Signature

Alan Silver
(anything added below this line is nothing to do with me)

Reply to this Message

Henri Sivonen - 27 May 2006 12:13 GMT

> 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).

I think the issue you are seeing is this:
http://www.subotnik.net/style/list-box-test.html

Signature

Henri Sivonen
hsivonen@iki.fi
http://hsivonen.iki.fi/
Mozilla Web Author FAQ: http://mozilla.org/docs/web-developer/faq.html

Reply to this Message

Alan Silver - 23 May 2006 18:36 GMT

>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

Signature

Alan Silver
(anything added below this line is nothing to do with me)

Reply to this Message

ironcorona - 23 May 2006 19:52 GMT

> 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.

Signature

Brian O'Connor (ironcorona)

Reply to this Message

Alan Silver - 23 May 2006 21:19 GMT

>> 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.

Signature

Alan Silver
(anything added below this line is nothing to do with me)

Reply to this Message

ironcorona - 24 May 2006 03:16 GMT

>> 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;
[quoted text clipped - 3 lines]
> 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

Signature

Brian O'Connor (ironcorona)

Reply to this Message

Alan Silver - 24 May 2006 09:22 GMT

>>> 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;
[quoted text clipped - 4 lines]
>
>Really?

Yup, really
<g>

> I used this code
>
[quoted text clipped - 6 lines]
>
>and it worked perfectly

I had to add "position:relative" 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!!

Signature

Alan Silver
(anything added below this line is nothing to do with me)

Reply to this Message

phil-news-nospam@ipal.net - 23 May 2006 20:33 GMT

| 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
[quoted text clipped - 3 lines]
| 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
[quoted text clipped - 3 lines]
|
| 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.

Signature

-----------------------------------------------------------------------------

-----------------------------------------------------------------------------

Reply to this Message

Alan Silver - 23 May 2006 21:17 GMT

>| 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.

Signature

Alan Silver
(anything added below this line is nothing to do with me)

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / May 2006

Problems with <ul> margin/padding in Firefox