<ul> formatting problem Mozilla

Paul Furman · Feb 25, 2004

Mozilla 1.4 pushes the nav list over with a large false left padding of
some sort:
http://www.edgehill.net/html/css/nav.htm

Any idea what's going on? It works fine in IE6. I've simplified this to
try and track the problem. I boxed the nav menu so you can see how it's
out of whack.

source:

<html>
<head>
<style>
.left {
float: left;
padding-right: 1em;
}
ul.menu-left {
border: 1px solid #444;
list-style: none;
width: 1em;
}
li.menu-left {
margin-top: 1em;

}
li.menu-first-left {
}
li.menu-last-left {
margin-top: 1em;
}
</style>
</head>
<body>
<center>
<table class=".constrained">
<tr>
<td class=".constrained">
<div class="left">
<ul class="menu-left">
<li class="menu-first-left"><a href="index.php" >home</a></li>

<li class="menu-left"><a href="ecards.php" >ecards</a></li>
<li class="menu-last-left"><a href="class-links.php">class
links</a></li>
</ul>
</div>
Photo Galleries:
<p>
pictures<br>
travel<br>
nature<br>

</center>
</td>
</tr>
</table>
</body>
</html>

Els · Feb 25, 2004

Paul said:
Mozilla 1.4 pushes the nav list over with a large false left padding of
some sort:
http://www.edgehill.net/html/css/nav.htm

Any idea what's going on? It works fine in IE6. I've simplified this to
try and track the problem. I boxed the nav menu so you can see how it's
out of whack.

source:

<html>
<head>
<style>
.left {
float: left;
padding-right: 1em;
}
ul.menu-left {
border: 1px solid #444;
list-style: none;
width: 1em;

width: 1em?
haven't copy-pasted it, but could that have to do with it?

[snip rest of code]

Paul Furman · Feb 25, 2004

Els said:
width: 1em?
haven't copy-pasted it, but could that have to do with it?

I just did that to emphasize the problem. If I set it to 4 ems or
whatever then it fits inside but still has this crazy left margin
problem. The box resizes somewhat to hold the menu text. In fact, I can
set the width to "0" and it still gives about 3-4 ems with the contents
outside that.

Paul Furman · Feb 25, 2004

Paul said:
Els wrote:

I just did that to emphasize the problem. If I set it to 4 ems or
whatever then it fits inside but still has this crazy left margin
problem. The box resizes somewhat to hold the menu text. In fact, I can
set the width to "0" and it still gives about 3-4 ems with the contents
outside that.

IE also moves the list in from the left edge of the page about 4em

kchayka · Feb 25, 2004

Paul said:
Mozilla 1.4 pushes the nav list over with a large false left padding of
some sort:
http://www.edgehill.net/html/css/nav.htm

Both ul and li elements have either a default left margin and/or
padding, depending on the browser.

If you don't want the default values applied, set both margin-left and
padding-left to 0. Adjust to taste.

Paul Furman · Feb 25, 2004

kchayka said:
Paul Furman wrote:

Both ul and li elements have either a default left margin and/or
padding, depending on the browser.

If you don't want the default values applied, set both margin-left and
padding-left to 0. Adjust to taste.

I tried

margin-left 0;
padding-left 0;

on everything.

The url above now shows a paragraph of text wrapping around the menu (if
the window is small) which does not have this big left margin.

Sieue · Feb 25, 2004

Paul said:
Mozilla 1.4 pushes the nav list over with a large false left padding
of some sort:
http://www.edgehill.net/html/css/nav.htm

Its not that mad. Unordered lists are supposed to be indented and Mozilla
renders them properly. You can set margins so they don't indent though.

Toby A Inkster · Feb 25, 2004

Paul said:
I tried
margin-left 0;
padding-left 0;
on everything.

Did you try it with colons?

Aside: Instructions for fueling a coal fire...

if d B mt put :
if d B .

Translation:

If the grate be empty, put coal on.
If the grate be full, stop.

Paul Furman · Feb 25, 2004

kchayka said:
Paul Furman wrote:

Both ul and li elements have either a default left margin and/or
padding, depending on the browser.

If you don't want the default values applied, set both margin-left and
padding-left to 0. Adjust to taste.

Thanks, I must have done something wrong, looks like it's only needed
for the <ul>

ul.menu-left {
border: 1px solid #444;
list-style: none;
width: 9em;
margin-left: 0;
padding-left: 0;
}

Els · Feb 25, 2004

Paul said:
Thanks, I must have done something wrong, looks like it's only needed
for the <ul>

ul.menu-left {
border: 1px solid #444;
list-style: none;
width: 9em;
margin-left: 0;
padding-left: 0;
}

Just a hint:
When you need to know where spaces come from, write at the
top of the stylesheet
*{border:1px solid red; margin:0; padding:0;}

See what it looks like then, and see what difference it
makes when you take padding:0 away, and then check what
happens when you take margin:0 away.

Usually works for me

Toby A Inkster · Feb 25, 2004

Paul said:
Thanks, I must have done something wrong, looks like it's only needed
for the <ul>

Be *very* careful there. Unless you really know what you're doing,
explicitly set margin and padding for the <li>s too, as this is an area
where browser behaviour deviates greatly.

You may also want to look at li { margin-bottom: 0; } (no this isn't
always the default!)

Paul Furman · Feb 25, 2004

Els said:
Just a hint:
When you need to know where spaces come from, write at the top of the
stylesheet
*{border:1px solid red; margin:0; padding:0;}

See what it looks like then, and see what difference it makes when you
take padding:0 away, and then check what happens when you take margin:0
away.

Usually works for me

Ooohh

That's useful!

Paul Furman · Feb 25, 2004

Toby said:
Did you try it with colons?

<hanging head in shame>
I swear I tried it 5 times back & forth
surely I put colons in one of those times <g>.

Eric Bohlman · Mar 1, 2004

Aside: Instructions for fueling a coal fire...

if d B mt put :
if d B .

Translation:

If the grate be empty, put coal on.
If the grate be full, stop.

After the surgeon removed his: he had no *

Working on mobile css menu with plenty of frustration!	2	Dec 29, 2022
Help with my responsive home page	2	Dec 14, 2022
I need help fixing my website	2	Oct 15, 2023
Help with Visual Lightbox: Scripts	2	May 3, 2023
Justify-content not working	1	Mar 29, 2021
Horizontal menu bar header	2	May 12, 2021
Buttons lining up	1	Feb 6, 2022
Is it possible an iframe can overlapp another?	3	Apr 20, 2022

<ul> formatting problem Mozilla

Paul Furman

Els

Paul Furman

Paul Furman

kchayka

Paul Furman

Sieue

Toby A Inkster

Paul Furman

Els

Toby A Inkster

Paul Furman

Paul Furman

Eric Bohlman

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads