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)

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)

In article <44733b47$1 (AT) quokka (DOT) wn.com.au>, ironcorona
<iron.corona (AT) gmail (DOT) 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)

In article <FEmqokXQTycEFwLI (AT) nospamthankyou (DOT) spam>, Alan Silver
<alan-silver (AT) nospam (DOT) thanx.invalid> 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)

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)

On Tue, 23 May 2006 16:05:52 +0100 Alan Silver <alan-silver (AT) nospam (DOT) thanx.invalid> 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/ |
-----------------------------------------------------------------------------

In article <e4vo2001bhc (AT) news4 (DOT) newsguy.com>, phil-news-nospam (AT) ipal (DOT) 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)

In article <447359fa$1 (AT) quokka (DOT) wn.com.au>, ironcorona
<iron.corona (AT) gmail (DOT) 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)

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)

In article <4473c1f9$1 (AT) quokka (DOT) wn.com.au>, ironcorona
<iron.corona (AT) gmail (DOT) com> writes

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?

Yup, really
<g>

I used this code

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

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

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